Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Embracing Performance Optimization

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.

Jon Bellah

October 08, 2013
Tweet

More Decks by Jon Bellah

Other Decks in Programming

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?