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. Breaking news at 1000ms
    @patrickhamann - Velocity EU - November 2014

    View Slide

  2. theguardian.com

    View Slide

  3. View Slide

  4. next.theguardian.com

    View Slide

  5. 110million
    !

    View Slide

  6. "
    #
    $ 7000

    View Slide

  7. View Slide

  8. View Slide

  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

    View Slide

  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

    View Slide

  11. View Slide

  12. 1000ms

    View Slide

  13. A performance budget
    https://flic.kr/p/iQ69Kg

    View Slide

  14. Setting a budget
    https://flic.kr/p/eHsirY

    View Slide

  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

    View Slide

  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

    View Slide

  17. View Slide

  18. User
    Content API
    Popular Comments
    Article
    DB
    DB

    View Slide

  19. https://flic.kr/p/77ZtUH

    View Slide

  20. User
    Content API
    Popular Comments
    Article
    DB
    DB

    View Slide

  21. Final progressively
    enhanced page
    Initial page payload

    View Slide

  22. View Slide

  23. View Slide

  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

    View Slide

  25. Browser rendering 101

    View Slide

  26. Source: Google - Pagespeed Insights

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  34. JS
    CSS
    HTML CSS & JS
    §
    HTML
    async
    DOMContentReady
    Start render

    View Slide

  35. Get the CSS down
    as soon as possible.

    View Slide

  36. What is your critical CSS?

    View Slide

  37. Popular content ✘
    Sharing

    Comments ✘
    Related content

    Commercial components ✘
    Article

    View Slide

  38. What if we inlined
    our critical CSS?

    View Slide

  39. Inline

    View Slide

  40. WTF%$?!

    View Slide

  41. View Slide

  42. 0.0 0.1 0.2 0.3
    0.0 0.1 0.2 0.3

    View Slide

  43. View Slide

  44. localStorage

    View Slide

  45. Is modern browser?
    Requet with
    Request with
    CSS in localStorage? localStorage space?
    Request with AJAX
    cache in
    localStorage
    inject into

    View Slide

  46. View Slide

  47. View Slide

  48. View Slide

  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

    View Slide

  50. Use MD5 hash for cache key
    WTF no stylesheets?

    View Slide

  51. Cookie

    View Slide

  52. Initial request HTML response
    with inline CSS Render page Request global CSS
    with AJAX Set cookie
    Initial request HTML response
    with default Render page
    Does request contain
    cookie?

    View Slide

  53. https://github.com/addyosmani/critical
    http://ngxpagespeed.com/
    Penthouse
    https://github.com/pocketjoso/penthouse

    View Slide

  54. What does the future hold?

    View Slide

  55. http/2

    View Slide


  56. )
    HTML
    "
    )
    CSS

    "
    HTTP/1.1
    *
    HTML & CSS

    "
    HTTP/2 Server push

    View Slide

  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

    View Slide

  58. Story of my life

    View Slide

  59. Font loading 101
    IE Firefox WebKit Blink
    Blocking ✗ ✔ ✔ ✔
    Timeout – 3s – –
    Source: Ian Feather – Web fonts and the Critical Path

    View Slide

  60. guardian egyptian

    View Slide

  61. progressive
    enhancement
    https://flic.kr/p/9RDXVd

    View Slide

  62. Is modern browser?
    Requet with
    Show fallback?
    Support WOFF?
    localStorage space?
    Request with AJAX
    cache in
    localStorage
    inject into
    font in
    localStorage?

    View Slide

  63. Example of base64
    json’ifed fonts

    View Slide

  64. service worker
    Webfontjson

    View Slide

  65. What does the future hold?

    View Slide

  66. Font load events

    View Slide

  67. CSS font rendering

    View Slide

  68. service worker
    ServiceWorker

    View Slide

  69. ServiceWorker

    " ) 
    " )
    )

    View Slide

  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

    View Slide

  71. WARNING!

    View Slide

  72. assets radiator

    View Slide

  73. R.U.M.
    (real user metrics)

    View Slide

  74. View Slide

  75. View Slide

  76. View Slide

  77. speedcurve

    View Slide

  78. View Slide

  79. What does the future hold?

    View Slide

  80. Resource Timing

    View Slide

  81. Beacon API

    View Slide

  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

    View Slide

  83. Takeaways

    View Slide

  84. Everyone must be involved by baking
    performance into your workflow from day
    one.

    View Slide

  85. Deliver core content first,

    then progressively enhance the extras.

    View Slide

  86. Set a performance budget.

    Measure, optimise & repeat!

    View Slide

  87. Performance is a requirement;
    not an extra feature.

    View Slide

  88. Thank you.
    Questions?
    @patrickhamann - Velocity EU - November 2014
    github.com/guardian/frontend
    +

    View Slide