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

Breaking news at 1000ms - Velocity EU 2014

Breaking news at 1000ms - Velocity EU 2014

An introduction into how the Guardian are making their next generation website load as fast as possible, and ultimately breaking the news to the user within 1000ms.

During the talk you will discover why performance matters, what are the common performance bottlenecks in the browser from networking to painting and learn how to best optimise and monitor each stage of the critical path to create fast, jank free websites.

This version of the talk was given at Velocity Conference Europe on the 18th November 2014.

Patrick Hamann

November 18, 2014
Tweet

More Decks by Patrick Hamann

Other Decks in Programming

Transcript

  1. Maslow's hierarchy of user needs ! % & ' We

    surveyed 3000 users About 17 key product drivers They rated speed 2nd most important Only after easy to find content
  2. Time & user perception Delay User perception 0–100 ms Instant

    100–300 ms Small perceptible delay 300–1000 ms Machine is working 1,000+ ms Likely mental context switch 10,000+ ms Task is abandoned Source: Ilya Grigorik – High-Performance Browser Networking
  3. 1. Core content should be delivered first 2. Core content

    should render within 1000ms 3. Every feature must fail gracefully 4. Every request should be measured
  4. 1. Core content should be delivered first 2. Core content

    should render within 1000ms 3. Every feature must fail gracefully 4. Every request should be measured
  5. 1. Core content should be delivered first 2. Core content

    should render within 1000ms 3. Every feature must fail gracefully 4. Every request should be measured
  6. Network JavaScript Render tree Layout Paint HTML DOM CSS CSSOM

    Network JavaScript Render tree Layout Paint HTML DOM CSS CSSOM
  7. Network JavaScript Render tree Layout Paint HTML DOM CSS CSSOM

    Network JavaScript Render tree Layout Paint HTML DOM CSS CSSOM DOM
  8. Network JavaScript Render tree Layout Paint HTML DOM CSS CSSOM

    Network JavaScript Render tree Layout Paint HTML DOM CSS CSSOM Network JavaScript Render tree Layout Paint HTML DOM CSS CSSOM DOM Network JavaScript Render tree Layout Paint HTML DOM CSS CSSOM
  9. Network JavaScript Render tree Layout Paint HTML DOM CSS CSSOM

    Network JavaScript Render tree Layout Paint HTML DOM CSS CSSOM Network JavaScript Render tree Layout Paint HTML DOM CSS CSSOM DOM Network JavaScript Render tree Layout Paint HTML DOM CSS CSSOM Network JavaScript Render tree Layout Paint DOM CSS CSSOM
  10. Network JavaScript Render tree Layout Paint HTML DOM CSS CSSOM

    Network JavaScript Render tree Layout Paint HTML DOM CSS CSSOM Network JavaScript Render tree Layout Paint HTML DOM CSS CSSOM DOM Network JavaScript Render tree Layout Paint HTML DOM CSS CSSOM Network JavaScript Render tree Layout Paint HTML DOM CSS CSSOM Network JavaScript Render tree Layout Paint HTML DOM CSS CSSOM
  11. Request page Network Render GET html Build DOM response Build

    CSSOM Render page GET css GET js response response idle idle Async Render blocking Run JS Source: Google - Web Fundamentals
  12. Request page Network Render GET html Build DOM response Build

    CSSOM Render page GET css GET js response response idle idle Async Render blocking Run JS
  13. Is modern browser? Requet with <link> Request with <link> CSS

    in localStorage? localStorage space? Request with AJAX cache in localStorage inject into <head>
  14. Load time First byte Start render Visually complete 3.366s 0.204s

    1.113s 3.700s Before Load time First byte Start render Visually complete 3.017s 0.262s 0.759s 2.00s After
  15. Initial request HTML response with inline CSS Render page Request

    global CSS with AJAX Set cookie Initial request HTML response with default <link> Render page Does request contain cookie?
  16.  ) HTML " ) CSS  " HTTP/1.1 *

    HTML & CSS  " HTTP/2 Server push
  17. 1. Core content should be delivered first 2. Core content

    should render within 1000ms 3. Every feature must fail gracefully 4. Every request should be measured
  18. Font loading 101 IE Firefox WebKit Blink Blocking ✗ ✔

    ✔ ✔ Timeout – 3s – – Source: Ian Feather – Web fonts and the Critical Path
  19. Is modern browser? Requet with <link> Show fallback? Support WOFF?

    localStorage space? Request with AJAX cache in localStorage inject into <head> font in localStorage?
  20. 1. Core content should be delivered first 2. Core content

    should render within 1000ms 3. Every feature must fail gracefully 4. Every request should be measured
  21. 1. Core content should be delivered first 2. Core content

    should render within 1000ms 3. Every feature must fail gracefully 4. Every request should be measured