Web Performance: Past, Present, and Future

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

Transcript

1. Web Performance
   Past, Present, and Future
   /TheMattShull
   mattshull.com/performance
   

   View Slide

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
   

   View Slide

3. Web Performance
   • Best practices changing
   • Better code to track performance
   • Lots of room to improve and be successful
   

   View Slide

4. Blast from the Past
   

   View Slide

5. View Slide

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

   View Slide

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

   View Slide

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

   View Slide

9. Mobile Revolution
   

   View Slide

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
    

    View Slide

11. Responsive Revolution
    • Page sizes still increasing
    • TTFB can take several seconds on mobile
    networks
    

    View Slide

12. Performance is Important!
    #perfLife
    

    View Slide

13. Importance of Performance
    First and foremost, we believe that speed is more
    than a feature. Speed is the most important feature.
    - Fred Wilson
    

    View Slide

14. Importance of Performance
    Up to 40% of users abandon a request if it takes
    longer than 3 secs to load.
    

    View Slide

15. Importance of Performance
    Google Survey:
    users exposed to a 400ms delay took several
    weeks to return to normal searching habits
    

    View Slide

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.
    

    View Slide

17. Ghost of Performance Past
    • There are time tested techniques
    • Best practices are changing often
    • Not every best practice will work for
    every site.
    

    View Slide

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
    

    View Slide

19. Optimizing Code in the Past
    • Place JS at the end of the
    • Biggest factor in slow sites
    • JS and CSS are render blocking
    • JS can use async or defer
    

    View Slide

20. Optimizing Code in the Past
    More Rules from Steve Souders:
    http://stevesouders.com/hpws/rules.php
    

    View Slide

21. Optimizing Images: the Past
    • File Types
    • JPEG, PNG, Gif
    • JPEG baseline vs progressive
    •https://www.youtube.com/watch?v=TOc15-2apY0
    

    View Slide

22. Optimizing Image: the Past
    • File Size
    • Use the right image type
    • Optimize with tools
    

    View Slide

23. Measuring Perf in the Past
    • TTFB
    • Start Render
    • Load Time for Entire Page
    

    View Slide

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?
    

    View Slide

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)
    

    View Slide

26. Performance Today:
    Optimizing Code
    • Make sites responsive
    • Above The Fold CSS in
    (possibly in the HTML?!)
    • Below the Fold CSS at the end of
    
    • Use CSS instead of GIFs
    

    View Slide

27. Performance Today
    • New Image Types: WebP
    • 25%-34% smaller than JPEG
    equivalent
    • 26% smaller than PNG equivalent
    • Chrome and Opera
    

    View Slide

28. Performance Today
    • New HTML Elements
    •
    • Load different images for different
    screen sizes
    • Load different types of file types
    • Falls back to if all else fails…
    

    View Slide

29. Performance Today
    !
    ! !
    ! type="image/webp">!
    ! !
    ! !
    ! !
    ! !
    
    

    View Slide

30. Performance Today
    

    View Slide

31. Case Study
    • Optimized photos
    • Moved scripts to the bottom of
    • Created a sprite
    • Put all scripts in 1 file, Put all CSS in 1 file
    • Minified scripts and CSS
    

    View Slide

32. Case Study
    • Remove CSS bloat
    • Separate Above the Fold CSS and
    Below the Fold CSS
    • Use WebP image formats for logo
    using
    

    View Slide

33. Case Study
    Test A
    Test B
    • JS and CSS in the
    • Un-minified JS and CSS
    • Uses baseline JPEGs
    • Above the Fold CSS in the
    
    • Below the Fold CSS and JS at
    the end of the
    • Uses progressive JPEGs
    

    View Slide

34. Case Study
    

    View Slide

35. What to Measure
    • Backend Load Time
    • # of redirects
    • # of requests
    • TTFB
    • Frontend Load Time
    • Start Render
    • Speed Index
    • Visually
    Complete
    • Total Load Time
    

    View Slide

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
    

    View Slide

37. RUM Tools
    • Navigation Timing API (JS)
    • Google Analytics
    • Boomerang (Yahoo!)
    • Nines
    

    View Slide

38. RUM Tools
    

    View Slide

39. RUM Tools
    • Navigation Timing API (JS)
    • Google Analytics
    • Boomerang (Yahoo!)
    • Nines
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

43. Future of Performance
    https://www.youtube.com/watch?v=_Jn93FDx9oI
    

    View Slide

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)
    

    View Slide

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)
    

    View Slide

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
    

    View Slide

47. #perfMatters
    bit.ly/ninesperf
    twitter.com/TheMattShull
    

    View Slide