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.

276c149f793de9af4e98991ed52ff874?s=128

Patrick Hamann

November 18, 2014
Tweet

Transcript

  1. 3.
  2. 7.
  3. 8.
  4. 9.

    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
  5. 10.

    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
  6. 11.
  7. 12.
  8. 15.

    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
  9. 16.

    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
  10. 17.
  11. 22.
  12. 23.
  13. 24.

    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
  14. 27.

    Network JavaScript Render tree Layout Paint HTML DOM CSS CSSOM

    Network JavaScript Render tree Layout Paint HTML DOM CSS CSSOM
  15. 28.

    Network JavaScript Render tree Layout Paint HTML DOM CSS CSSOM

    Network JavaScript Render tree Layout Paint HTML DOM CSS CSSOM DOM
  16. 29.

    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
  17. 30.

    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
  18. 31.

    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
  19. 32.

    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
  20. 33.

    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
  21. 37.
  22. 39.
  23. 40.
  24. 41.
  25. 43.
  26. 45.

    Is modern browser? Requet with <link> Request with <link> CSS

    in localStorage? localStorage space? Request with AJAX cache in localStorage inject into <head>
  27. 46.
  28. 47.
  29. 48.
  30. 49.

    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
  31. 51.
  32. 52.

    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?
  33. 55.
  34. 56.

     ) HTML " ) CSS  " HTTP/1.1 *

    HTML & CSS  " HTTP/2 Server push
  35. 57.

    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
  36. 59.

    Font loading 101 IE Firefox WebKit Blink Blocking ✗ ✔

    ✔ ✔ Timeout – 3s – – Source: Ian Feather – Web fonts and the Critical Path
  37. 62.

    Is modern browser? Requet with <link> Show fallback? Support WOFF?

    localStorage space? Request with AJAX cache in localStorage inject into <head> font in localStorage?
  38. 70.

    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
  39. 71.
  40. 74.
  41. 75.
  42. 76.
  43. 78.
  44. 82.

    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
  45. 83.