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

More Decks by Jon Bellah

Other Decks in Programming


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

    a 30% increase in requests. Source: Marissa Mayer, 2008 Google I/O Google Maps Optimization
  4. • 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
  5. The Critical Rendering Path The users path from following a

    link to the first impression to the working experience.
  6. • 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
  7. • 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)
  8. • 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
  9. • 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
  10. X

  11. • 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.
  12. 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"
  13. • 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
  14. • Sprites. • 220% JPEG at 0 quality. • Picturefill

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

    renders layered scans of increasing quality. • Perceived Speed vs. Actual Speed
  16. • 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
  17. • 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
  18. 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.
  19. 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.