Links
- davidsonfellipe/awesome-wpo
- Curated list of Web Performance Optimization
- Tools
- Tracing-Framework (Google)
- Boomerang (by Yahoo)
- Browserscope
- JSperf
- Gotcha: ref: The setup phase can and will be executed multiple times. So remember to tear down registered event handlers from the setup phase.
- Scrolling Performance
- 60 Frames Per Second and the Web
- HTML5Rocks: tag "performance"
- Posts by Vyacheslav Egorov (Mr. Aleph)
- MDN
- PageSpeed: Web Performance Best Practices
- Google Developers
- Steve Souders - High Performance Web Sites
- David Calhoun – Mobile Performance Manifesto (Oct 2011)
- Caching
- Browser Cache Usage – Exposed! (YUI blog, 2007)
- 40-60% of Yahoo!’s users have an empty cache experience and ~20% of all page views are done with an empty cache.
- regardless of usage patterns, the percentage of page views with an empty cache is always ~20%.
- iPhone Cacheability – Making it Stick (YUI blog, 2008)
- Browser Cache Usage – Exposed! (YUI blog, 2007)
- Don’t use @import | stevesouders.com/blog
- Could be outdated for today.
- Notes
- Note that 'visibility: hidden' is different from 'display: none'. The former makes the element invisible, but the element is still occupies space in the layout (i.e. it's rendered as an empty box), whereas the latter (display: none) removes the element entirely from the render tree such that the element is invisible and is not part of layout.
Measuring Critical Render Path
Ref: Measuring the Critical Rendering Path with Navigation Timing
<script> /* Ref: https://developers.google.com/web/fundamentals/performance/critical-rendering-path/measure-crp * domInteractive: marks when DOM is ready. * domContentLoaded: typically marks when both the DOM and CSSOM are ready. * If there is no parser blocking JavaScript then documentContentLoaded * will fire immediately after domInteractive. * domComplete: marks when the page and all of its subresources are ready. */ function measureCRP() { var t = window.performance.timing; var interactive = t.domInteractive - t.domLoading; var dcl = t.domContentLoadedEventStart - t.domLoading; var complete = t.domComplete - t.domLoading; console.log('interactive: %sms, dcl: %sms, complete: %sms', interactive, dcl, complete); } </script>
Non-blocking CSS
Ref: Render Blocking CSS
<!-- blocking --> <link href="style.css" rel="stylesheet"> <!-- non-blocking --> <link href="print.css" rel="stylesheet" media="print"> <!-- conditionally blocking --> <link href="other.css" rel="stylesheet" media="(min-width: 40em)"> <link href="portrait.css" rel="stylesheet" media="orientation:portrait">
Loading some CSS after page load
<script> var cb = function() { var l = document.createElement('link'); l.rel = 'stylesheet'; l.href = 'small.css'; var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h); }; var raf = requestAnimationFrame || mozRequestAnimationFrame || webkitRequestAnimationFrame || msRequestAnimationFrame; if (raf) raf(cb); else window.addEventListener('load', cb); </script>