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
Tweet

More Decks by Matt Shull

Other Decks in Technology

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