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.

Transcript

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

   View Slide

2. next.theguardian.com
   

   View Slide

3. 100million
   !
   

   View Slide

4. "
   #
   $ 6000
   

   View Slide

5. View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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

    View Slide

11. 1000ms
    

    View Slide

12. Browser rendering 101
    

    View Slide

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

    View Slide

14. HTTP
    (TTFB)

    DNS Lookup
    Content download
    Initial connection
    (Socket)
    

    View Slide

15. Source: Google - Pagespeed Insights
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

23. Get the CSS down as
    soon as possible.
    

    View Slide

24. CSS and the critical path
    

    View Slide

25. What is your critical CSS?
    

    View Slide

26. Popular content ✘
    Sharing
    ✘
    Comments ✘
    Related content
    ✘
    Commercial components ✘
    Article
    ✔
    

    View Slide

27. Final progressively
    enhanced page
    Initial page payload
    

    View Slide

28. What if we inlined
    our critical CSS?
    

    View Slide

29. Inline
    

    View Slide

30. WTF%$?!
    

    View Slide

31. View Slide

32. 0.9 1.0 1.1
    0.9 1.0 1.1
    

    View Slide

33. View Slide

34. localStorage
    

    View Slide

35. Is modern browser?
    CSS in localStorage?
    Inject into
    Request with
    Request with AJAX
    localStorage space?
    Cache in localStorage
    

    View Slide

36. View Slide

37. View Slide

38. View Slide

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
    

    View Slide

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

    View Slide

41. View Slide

42. Monitor
    

    View Slide

43. assets radiator
    

    View Slide

44. View Slide

45. speedcurve
    

    View Slide

46. View Slide

47. Alternatives
    

    View Slide

48. PageSpeed
    

    View Slide

49. UnCSS & grunt-uncss
    

    View Slide

50. Source: http://addyosmani.github.io/basket.js/
    basket.js
    

    View Slide

51. What does the future hold?
    

    View Slide

52. http/2
    

    View Slide

53. 
    )
    HTML
    "
    )
    CSS
    
    "
    *
    HTML & CSS
    
    "
    HTTP/1.1
    HTTP/2 Server push
    

    View Slide

54. service worker
    ServiceWorker
    

    View Slide

55. ServiceWorker
    
    " )
    )
    

    View Slide

56. Takeaways
    

    View Slide

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

    View Slide

58. Where possible, cache
    aggressively in localStorage.
    

    View Slide

59. Set a performance budget.

    Measure, optimise & repeat!
    

    View Slide

60. Performance is a requirement;
    not a feature.
    

    View Slide

61. Thank you.
    Questions?
    @patrickhamann - CSSConf - May 2014
    g
    We’re hiring!
    github.com/guardian/frontend
    +
    bit.ly/css-and-the-critical-path
    +
    

    View Slide