CSS and the Critical Path - CSSConfEU September 2014

276c149f793de9af4e98991ed52ff874?s=47 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.

276c149f793de9af4e98991ed52ff874?s=128

Patrick Hamann

September 11, 2014
Tweet

Transcript

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

    September 2014
  2. next.theguardian.com

  3. 105million !

  4. " # $ 6000

  5. None
  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
  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
  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
  9. 1000ms

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

  11. Browser rendering 101

  12. HTTP (TTFB)
 DNS Lookup Content download Initial connection (Socket)

  13. Source: Google - Pagespeed Insights

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

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

    Network JavaScript Render tree Layout Paint HTML DOM CSS CSSOM DOM
  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
  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
  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
  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
  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
  21. JS CSS HTML CSS & JS § HTML async DOMContentReady

    Start render
  22. Get the CSS down as soon as possible.

  23. CSS and the critical path

  24. What is your critical CSS?

  25. Popular content ✘ Sharing ✘ Comments ✘ Related content ✘

    Commercial components ✘ Article ✔
  26. Final progressively enhanced page Initial page payload

  27. What if we inlined our critical CSS?

  28. Inline

  29. WTF%$?!

  30. None
  31. 0.0 0.1 0.2 0.3 0.0 0.1 0.2 0.3

  32. None
  33. localStorage

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

    in localStorage? localStorage space? Request with AJAX cache in localStorage inject into <head>
  35. None
  36. None
  37. None
  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
  39. Use MD5 hash for cache key WTF no stylesheets?

  40. None
  41. Cookie

  42. 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?
  43. Monitor

  44. WARNING!

  45. assets radiator

  46. speedcurve

  47. Alternatives

  48. None
  49. What does the future hold?

  50. Resource priorities Yay!

  51. http/2

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

    HTML & CSS  " HTTP/2 Server push
  53. service worker ServiceWorker

  54. ServiceWorker  " )  " ) )

  55. Takeaways

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

    avoid render blocking.
  57. Cache aggressively.

  58. Set a performance budget.
 Measure, optimise & repeat!

  59. Thank you. @patrickhamann - CSSConf EU - September 2014 github.com/guardian/frontend

    + bit.ly/cssconf-critical-path ,
  60. None