Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web Performance: Past, Present, and Future

Matt Shull
February 10, 2015

Web Performance: Past, Present, and Future

A look at best practices, measurements, and tools that help us to create robust and fast websites.

Matt Shull

February 10, 2015

More Decks by Matt Shull

Other Decks in Technology


  1. Intro to #perfLife • How we have optimized code in

    the past • How we measured performance in the past • New ways to optimize your code • What metrics we should be measuring • What tools are available to measure performance • Technology that can help us moving forward
  2. Web Performance • Best practices changing • Better code to

    track performance • Lots of room to improve and be successful
  3. Responsive Revolution • Ethan Marcotte • Before we had fixed

    width pages and separate mobile sites • Now we could make sites adapt to different screen sizes
  4. Importance of Performance First and foremost, we believe that speed

    is more than a feature. Speed is the most important feature. - Fred Wilson
  5. Importance of Performance Up to 40% of users abandon a

    request if it takes longer than 3 secs to load.
  6. Importance of Performance Google Survey: users exposed to a 400ms

    delay took several weeks to return to normal searching habits
  7. Ghost of Performance Past • How we used to optimize

    code (and still do to some extent). ! • How we have measured performance in the past.
  8. Ghost of Performance Past • There are time tested techniques

    • Best practices are changing often • Not every best practice will work for every site.
  9. Optimizing Code in the Past • Condense CSS and JS

    files • Removes white spaces • Makes file sizes smaller • Hard to read minified files: keep a dev copy to make changes
  10. Optimizing Code in the Past • Place JS at the

    end of the <body> • Biggest factor in slow sites • JS and CSS are render blocking • JS can use async or defer
  11. Optimizing Code in the Past More Rules from Steve Souders:

  12. Optimizing Images: the Past • File Types • JPEG, PNG,

    Gif • JPEG baseline vs progressive •https://www.youtube.com/watch?v=TOc15-2apY0
  13. Optimizing Image: the Past • File Size • Use the

    right image type • Optimize with tools
  14. Performance Today: Benchmarks • User Experience: How fast until… •

    the user seeing the first paint?
 (Start Render) • the above the fold content is loaded? • the document is interactive?
  15. Performance Today:
 UX is Important! • DUH…better UX! 

    the user in mind!) • SEO • Fast sites = better rankings (Google) • TTFB possible determining factor
  16. Performance Today: Optimizing Code • Make sites responsive • Above

    The Fold CSS in <head> (possibly in the HTML?!) • Below the Fold CSS at the end of <body> • Use CSS instead of GIFs
  17. Performance Today • New Image Types: WebP • 25%-34% smaller

    than JPEG equivalent • 26% smaller than PNG equivalent • Chrome and Opera
  18. Performance Today • New HTML Elements • <picture> • Load

    different images for different screen sizes • Load different types of file types • Falls back to <img> if all else fails…
  19. Performance Today <picture>! ! <!--[if IE 9]><video style="display: none;"><![endif]-->! !

    <source srcset="large.webp" media="(min-width: 800px)" type="image/webp">! ! <source srcset="large.jpg" media="(min-width: 800px)">! ! <source srcset="medium.jpg" media="(min-width: 400px)">! ! <!--[if IE 9]></video><![endif]-->! ! <img srcset="examples/images/small.jpg" alt=“Some Text">! </picture>
  20. Case Study • Optimized photos • Moved scripts to the

    bottom of <body> • Created a sprite • Put all scripts in 1 file, Put all CSS in 1 file • Minified scripts and CSS
  21. Case Study • Remove CSS bloat • Separate Above the

    Fold CSS and Below the Fold CSS • Use WebP image formats for logo using <picture>
  22. Case Study Test A Test B • JS and CSS

    in the <head> • Un-minified JS and CSS • Uses baseline JPEGs • Above the Fold CSS in the <head> • Below the Fold CSS and JS at the end of the <body> • Uses progressive JPEGs
  23. What to Measure • Backend Load Time • # of

    redirects • # of requests • TTFB • Frontend Load Time • Start Render • Speed Index • Visually Complete • Total Load Time
  24. How to Measure • RUM (Real User Measurement) • Gather

    data from actual users/devices • Measure performance for different locations
 • Synthetic Testing • Gather data from actual devices/browsers • See non-cached “first view” measurements
  25. Synthetic Tools • Uses real devices to collect tons of

    data • Gives “first view” and “repeat view” data • Test website from multiple locations • New Relic • WebPageTest.org • Nines
  26. Synthetic Tools • Uses real devices to collect tons of

    data • Gives “first view” and “repeat view” data • Test website from multiple locations • New Relic • WebPageTest.org • Nines
  27. Future of Performance • UX will affect SEO more •

    HTTP2 and SPDY • Prefetch & Prerender • Use SEO to determine user behavior • Prefetch images, js, and/or css needed for the next page to cache • User clicks on link and page loads from cache
  28. Future of Performance • Use microseconds instead of standard milliseconds

    using High Resolution Timing 
 (IE 10+, Chrome, Opera, FF, Android) • User Timing API to meausure AJAX requests, script loading, script execution, etc. (IE 10+, Chrome, Opera, Android) • Beacons: send performance data async whenever the current page is unloaded
 (Chrome, FF, Opera)
  29. Future of Performance • Navigation Error Logging Javascript API: Get

    RUM data of when and how a page failed to load (i.e. DNS lookup, connection timeout, reset connection, etc.) (No support yet)
  30. #perfMatters • Optimize code and images • Measure RUM and

    Synthetic testing using tools available • Embrace the new APIs to measure UX and performance bit.ly/ninesperf