Embracing Performance Optimization

Optimizing the critical rendering path, eliminating unnecessary roundtrips, and employing other optimization tactics can have a huge impact on scalability, user experience and your bottom line. In this session, we'll take a look at some of the ways you can improve the performance of your websites.

Transcript

1. Embracing Performance Optimization
   making the web faster
   

   View Slide

2. @jonbellah
   

   View Slide

3. What is performance optimization?
   The science of making websites faster.
   

   View Slide

4. Perceived speed vs. Actual speed
   

   View Slide

5. 3 Critical Limits
   • 0.1 Second - limit for having the user feel the system is reacting.
   • 1.0 Second - limit for the users flow of thought to remain
   uninterrupted.
   • 10 Seconds - limit for keeping the users attention on the dialogue.
   Source: Nielsen Norman Group, 1993
   

   View Slide

6. How does performance affect
   the bottom line?
   

   View Slide

7. • Increased search results from 10 to 30.
   • Load speed went from 0.4s to 0.9s.
   • Traffic and revenue from searchers in the experimental group dropped
   by 20%.
   Source: Marissa Mayer, 2006 Web 2.0 Conference
   Google Experiment
   

   View Slide

8. • Reduced Google Maps payload by 30%.
   • Resulted in a 30% increase in requests.
   Source: Marissa Mayer, 2008 Google I/O
   Google Maps Optimization
   

   View Slide

9. • Predicted that a 1 second reduction in load speed would improve
   downloads and conversions by 2.7%.
   • In reality, they reduced page load speed by 2.2 seconds and saw a
   15.4% increase in downloads and conversions.
   • With 275,000 daily visitors, that increase translated into over 10
   million extra downloads every year.
   Source: Mozilla Blog, 2010
   Mozilla Performance Optimization
   

   View Slide

10. What is our benchmark?
    Sub-second rendering.
    

    View Slide

11. The Critical Rendering Path
    The users path from following a link to the first
    impression to the working experience.
    

    View Slide

12. Source: Ilya Grigorik
    

    View Slide

13. Source: Ilya Grigorik
    

    View Slide

14. The Overview
    

    View Slide

15. • Minimize requests and round-trip times.
    • Optimize the critical rendering path.
    • Leverage browser caching.
    • Reduce payload.
    • Compress and serve scaled images.
    • Maximize parallelization.
    • Prefetch resources.
    Performance Optimization Overview
    

    View Slide

16. Minimize Requests and Round-trip Times
    

    View Slide

17. • Initial connection requires a minimum of 3 RTTs (1 for DNS, 1 for
    TCP connection, 1 for HTTP request).
    • The server can only send ~14kb in the first round-trip.
    • Avoid redirects.
    • Concatenate CSS and JavaScript to reduce requests.
    Minimize Round-trip Times (RTTs)
    

    View Slide

18. View Slide

19. Optimize the Critical Rendering Path
    

    View Slide

20. • Allows the page to render progressively.
    • Scripts block subsequent downloads, but those already in progress will
    continue.
    • Browsers can’t process CSS incrementally, so it all needs to arrive
    before the browser begins to paint.
    CSS at the top, JavaScript at the bottom
    

    View Slide

21. View Slide

22. • Don’t load CSS from an asset domain.
    • Avoid duplicate rulesets and otherwise bloated CSS.
    • Don’t use @import in CSS, each occurrence is a new HTTP request.
    • Inline CSS above-the-fold.
    Optimizing CSS
    

    View Slide

23. View Slide

24. X
    

    View Slide

25. Leverage Browser Caching
    

    View Slide

26. • Cache rules everything around me.
    Leverage Browser Caching
    

    View Slide

27. View Slide

28. • Cache rules everything around me.
    Leverage Browser Caching
    • Cache resources using far-future Expires or Cache-control max-age
    headers.
    • Specify a Last-Modified or ETag for each cacheable resource.
    • Load major libraries from Google Hosted Libraries.
    

    View Slide

29. Text
    ExpiresActive On
    ExpiresByType text/html "access plus 1 day"
    ExpiresByType image/gif "access plus 10 years"
    ExpiresByType image/jpeg "access plus 10 years"
    ExpiresByType image/png "access plus 10 years"
    ExpiresByType text/css "access plus 10 years"
    ExpiresByType text/javascript "access plus 10 years"
    ExpiresByType application/x-javascript "access plus 10 years"
    

    View Slide

30. Reduce Payload
    

    View Slide

31. • Gzip compresses based on repeated or repeatable strings.
    • Generally reduces file size by around 70%.
    • Minifying removes unnecessary comments and spacing, reducing
    overall file size.
    Reduce Payload
    

    View Slide

32. Compress and Scale Images
    

    View Slide

33. • Sprites.
    • 220% JPEG at 0 quality.
    • Picturefill /
    • Srcset
    Compress and Serve Scaled Images
    

    View Slide

34. • Baseline renders top-to-bottom.
    Baseline vs. Progressive JPEGs
    

    View Slide

35. View Slide

36. • Baseline renders top-to-bottom.
    Baseline vs. Progressive JPEGs
    • Progressive renders layered scans of increasing quality.
    • Perceived Speed vs. Actual Speed
    

    View Slide

37. Maximize Parallelization
    

    View Slide

38. • HTTP/1.1 suggests that browsers only download two components in
    parallel per hostname.
    • Asset domains allows you to fetch more resources in parallel.
    Maximize Parallelization
    

    View Slide

39. Prefetch Resources
    

    View Slide

40. • Lets you tell the browser to start fetching a DNS a fraction of a
    second before it’s needed.
    • Especially helpful in combination with the look-ahead preloader.
    Prefetching Resources
    

    View Slide

41. How do we test all this stuff?
    

    View Slide

42. Waterfalls
    Allow you to see the series of actions that occur
    between a user and your server in order for a user
    to view a page.
    

    View Slide

43. View Slide

44. View Slide

45. Real User Monitoring (RUM)
    Captures time spent on front-end and back-end,
    geographic origin, browser type and version, and
    many other performance-related metrics.
    

    View Slide

46. • PageSpeed Insights
    • Y-Slow
    • Pingdom
    Other Performance Testing Tools
    

    View Slide

47. Questions?
    

    View Slide