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.

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