Embracing Performance Optimization

9c152b1584187e23aa5d9b1dc2f697b7?s=47 Jon Bellah
October 08, 2013

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.

9c152b1584187e23aa5d9b1dc2f697b7?s=128

Jon Bellah

October 08, 2013
Tweet

Transcript

  1. Embracing Performance Optimization making the web faster

  2. @jonbellah

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

  4. Perceived speed vs. Actual speed

  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
  6. How does performance affect the bottom line?

  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
  8. • Reduced Google Maps payload by 30%. • Resulted in

    a 30% increase in requests. Source: Marissa Mayer, 2008 Google I/O Google Maps Optimization
  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
  10. What is our benchmark? Sub-second rendering.

  11. The Critical Rendering Path The users path from following a

    link to the first impression to the working experience.
  12. Source: Ilya Grigorik

  13. Source: Ilya Grigorik

  14. The Overview

  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
  16. Minimize Requests and Round-trip Times

  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)
  18. None
  19. Optimize the Critical Rendering Path

  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
  21. None
  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
  23. None
  24. X

  25. Leverage Browser Caching

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

  27. None
  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.
  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"
  30. Reduce Payload

  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
  32. Compress and Scale Images

  33. • Sprites. • 220% JPEG at 0 quality. • Picturefill

    / <picture> • Srcset Compress and Serve Scaled Images
  34. • Baseline renders top-to-bottom. Baseline vs. Progressive JPEGs

  35. None
  36. • Baseline renders top-to-bottom. Baseline vs. Progressive JPEGs • Progressive

    renders layered scans of increasing quality. • Perceived Speed vs. Actual Speed
  37. Maximize Parallelization

  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
  39. Prefetch Resources

  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
  41. How do we test all this stuff?

  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.
  43. None
  44. None
  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.
  46. • PageSpeed Insights • Y-Slow • Pingdom Other Performance Testing

    Tools
  47. Questions?