CSS and the critical path - CSSConf May 2014

CSS and the critical path - CSSConf May 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

May 27, 2014
Tweet

Transcript

  1. 5.
  2. 6.

    0 2.25 4.5 6.75 9 2000 2006 2009 2012 User

    load time expectations (Secs) User load time expectations are decreasing Source: Web Performance Today - March 2013
  3. 7.

    0 5000 10000 15000 20000 Jan Feb Mar Apr 10%

    Percentile Median 90% Percentile Average SpeedIndex top 10,000 websites Source: HTTPArchive - May 2014
  4. 8.

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

    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. 26.
  8. 29.
  9. 30.
  10. 31.
  11. 33.
  12. 35.

    Is modern browser? CSS in localStorage? Inject into <head> Request

    with <link> Request with AJAX localStorage space? Cache in localStorage
  13. 36.
  14. 37.
  15. 38.
  16. 39.

    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
  17. 41.
  18. 42.
  19. 44.
  20. 46.
  21. 48.
  22. 52.
  23. 53.

     ) HTML " ) CSS  " * HTML

    & CSS  " HTTP/1.1 HTTP/2 Server push
  24. 56.
  25. 61.

    Thank you. Questions? @patrickhamann - CSSConf - May 2014 g

    We’re hiring! github.com/guardian/frontend + bit.ly/css-and-the-critical-path +