Web Performance: Past, Present, and Future

7b8d0adf6fd2decedeb551dc9dd027de?s=47 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.

7b8d0adf6fd2decedeb551dc9dd027de?s=128

Matt Shull

February 10, 2015
Tweet

Transcript

  1. 2.

    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. 3.

    Web Performance • Best practices changing • Better code to

    track performance • Lots of room to improve and be successful
  3. 5.
  4. 10.

    Responsive Revolution • Ethan Marcotte • Before we had fixed

    width pages and separate mobile sites • Now we could make sites adapt to different screen sizes
  5. 11.
  6. 13.

    Importance of Performance First and foremost, we believe that speed

    is more than a feature. Speed is the most important feature. - Fred Wilson
  7. 14.

    Importance of Performance Up to 40% of users abandon a

    request if it takes longer than 3 secs to load.
  8. 15.

    Importance of Performance Google Survey: users exposed to a 400ms

    delay took several weeks to return to normal searching habits
  9. 16.

    Ghost of Performance Past • How we used to optimize

    code (and still do to some extent). ! • How we have measured performance in the past.
  10. 17.

    Ghost of Performance Past • There are time tested techniques

    • Best practices are changing often • Not every best practice will work for every site.
  11. 18.

    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
  12. 19.

    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
  13. 20.

    Optimizing Code in the Past More Rules from Steve Souders:

    http://stevesouders.com/hpws/rules.php
  14. 21.

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

    Gif • JPEG baseline vs progressive •https://www.youtube.com/watch?v=TOc15-2apY0
  15. 22.

    Optimizing Image: the Past • File Size • Use the

    right image type • Optimize with tools
  16. 23.
  17. 24.

    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?
  18. 25.

    Performance Today:
 UX is Important! • DUH…better UX! 
 (Keep

    the user in mind!) • SEO • Fast sites = better rankings (Google) • TTFB possible determining factor
 (websiteoptimization.com)
  19. 26.

    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
  20. 27.

    Performance Today • New Image Types: WebP • 25%-34% smaller

    than JPEG equivalent • 26% smaller than PNG equivalent • Chrome and Opera
  21. 28.

    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…
  22. 29.

    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>
  23. 31.

    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
  24. 32.

    Case Study • Remove CSS bloat • Separate Above the

    Fold CSS and Below the Fold CSS • Use WebP image formats for logo using <picture>
  25. 33.

    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
  26. 35.

    What to Measure • Backend Load Time • # of

    redirects • # of requests • TTFB • Frontend Load Time • Start Render • Speed Index • Visually Complete • Total Load Time
  27. 36.

    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
  28. 38.
  29. 40.

    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
  30. 41.

    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
  31. 42.

    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
  32. 44.

    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)
  33. 45.

    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)
  34. 46.

    #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