$30 off During Our Annual Pro Sale. View Details »

CSS and the Critical Path - CSSConfEU September 2014

Patrick Hamann
September 11, 2014

CSS and the Critical Path - CSSConfEU September 2014

For a website to feel instant, a perceptible response to user input must be provided within hundreds of milliseconds.

This perceived speed of your website relies heavily on the browser being able to paint to your user’s screen. For this they must construct a “render tree” which consists of the DOM and the often forgotten CSSOM. The critical path which the browser takes to gather this information is the only thing standing between your server and the user’s screen.

Using new research and real world examples, Patrick Hamann will cover a range of techniques – from the controversial to bleeding edge – the Guardian are using to make the CSS of their next generation website load as fast as possible, and ultimately taking it off the critical path. 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 loading websites.

Patrick Hamann

September 11, 2014
Tweet

More Decks by Patrick Hamann

Other Decks in Programming

Transcript

  1. CSS and the critical path
    @patrickhamann - CSSConf EU - September 2014

    View Slide

  2. next.theguardian.com

    View Slide

  3. 105million
    !

    View Slide

  4. "
    #
    $ 6000

    View Slide

  5. View Slide

  6. 0
    7500
    15000
    22500
    30000
    Jan Feb Mar Apr May June July August
    10% Percentile Median 90% Percentile
    Source: HTTPArchive - BigQuery - September 2014
    Average SpeedIndex from top 10,000 websites

    View Slide

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

  8. 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

  9. 1000ms

    View Slide

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

    View Slide

  11. Browser rendering 101

    View Slide

  12. HTTP
    (TTFB)

    DNS Lookup
    Content download
    Initial connection
    (Socket)

    View Slide

  13. Source: Google - Pagespeed Insights

    View Slide

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

    View Slide

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

    View Slide

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

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

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

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

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

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

    View Slide

  22. Get the CSS down as soon as possible.

    View Slide

  23. CSS and the critical path

    View Slide

  24. What is your critical CSS?

    View Slide

  25. Popular content ✘
    Sharing

    Comments ✘
    Related content

    Commercial components ✘
    Article

    View Slide

  26. Final progressively
    enhanced page
    Initial page payload

    View Slide

  27. What if we inlined
    our critical CSS?

    View Slide

  28. Inline

    View Slide

  29. WTF%$?!

    View Slide

  30. View Slide

  31. 0.0 0.1 0.2 0.3
    0.0 0.1 0.2 0.3

    View Slide

  32. View Slide

  33. localStorage

    View Slide

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

    View Slide

  35. View Slide

  36. View Slide

  37. View Slide

  38. 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

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

    View Slide

  40. View Slide

  41. Cookie

    View Slide

  42. 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

  43. Monitor

    View Slide

  44. WARNING!

    View Slide

  45. assets radiator

    View Slide

  46. speedcurve

    View Slide

  47. Alternatives

    View Slide

  48. View Slide

  49. What does the future hold?

    View Slide

  50. Resource priorities
    Yay!

    View Slide

  51. http/2

    View Slide


  52. )
    HTML
    "
    )
    CSS

    "
    HTTP/1.1
    *
    HTML & CSS

    "
    HTTP/2 Server push

    View Slide

  53. service worker
    ServiceWorker

    View Slide

  54. ServiceWorker

    " ) 
    " )
    )

    View Slide

  55. Takeaways

    View Slide

  56. Inline critical CSS and defer all other
    non-critical assets to avoid render blocking.

    View Slide

  57. Cache aggressively.

    View Slide

  58. Set a performance budget.

    Measure, optimise & repeat!

    View Slide

  59. Thank you.
    @patrickhamann - CSSConf EU - September 2014
    github.com/guardian/frontend
    +
    bit.ly/cssconf-critical-path
    ,

    View Slide

  60. View Slide