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. Web Performance Past, Present, and Future /TheMattShull mattshull.com/performance

  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
  3. Web Performance • Best practices changing • Better code to

    track performance • Lots of room to improve and be successful
  4. Blast from the Past

  5. None
  6. Growing Pains Nov 2010 - Jan 2015 Top 100 HTTP

    Archives Sites
  7. Growing Pains Nov 2010 - Jan 2015 Top 100 HTTP

    Archives Sites
  8. Growing Pains Nov 2010 - Jan 2015 Top 100 HTTP

    Archives Sites
  9. Mobile Revolution

  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
  11. Responsive Revolution • Page sizes still increasing • TTFB can

    take several seconds on mobile networks
  12. Performance is Important! #perfLife

  13. Importance of Performance First and foremost, we believe that speed

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

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

    delay took several weeks to return to normal searching habits
  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.
  17. Ghost of Performance Past • There are time tested techniques

    • Best practices are changing often • Not every best practice will work for every site.
  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
  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
  20. Optimizing Code in the Past More Rules from Steve Souders:

    http://stevesouders.com/hpws/rules.php
  21. Optimizing Images: the Past • File Types • JPEG, PNG,

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

    right image type • Optimize with tools
  23. Measuring Perf in the Past • TTFB • Start Render

    • Load Time for Entire Page
  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?
  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)
  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
  27. Performance Today • New Image Types: WebP • 25%-34% smaller

    than JPEG equivalent • 26% smaller than PNG equivalent • Chrome and Opera
  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…
  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>
  30. Performance Today

  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
  32. Case Study • Remove CSS bloat • Separate Above the

    Fold CSS and Below the Fold CSS • Use WebP image formats for logo using <picture>
  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
  34. Case Study

  35. What to Measure • Backend Load Time • # of

    redirects • # of requests • TTFB • Frontend Load Time • Start Render • Speed Index • Visually Complete • Total Load Time
  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
  37. RUM Tools • Navigation Timing API (JS) • Google Analytics

    • Boomerang (Yahoo!) • Nines
  38. RUM Tools

  39. RUM Tools • Navigation Timing API (JS) • Google Analytics

    • Boomerang (Yahoo!) • Nines
  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
  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
  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
  43. Future of Performance https://www.youtube.com/watch?v=_Jn93FDx9oI

  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)
  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)
  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
  47. #perfMatters bit.ly/ninesperf twitter.com/TheMattShull