Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS and the critical path - CSSConf May 2014

Patrick Hamann
May 27, 2014
Programming
20
1.8k

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.

Patrick Hamann

May 27, 2014
Tweet

More Decks by Patrick Hamann

See All by Patrick Hamann
CSS and the First Meaningful Paint - CSS Conf EU, May 2017
patrickhamann
15
2k
CSS and the First Meaningful Paint - All day Hey!, April 2017
patrickhamann
4
350
Embracing the Network — DIBI Conf, March 2016
patrickhamann
1
330
HTTP2 What, where, why, and when?! Smashing Conference, March 2016
patrickhamann
16
3.6k
Embracing the network - Web Directions
patrickhamann
4
1.3k
Embracing the network - Smashing Conf
patrickhamann
6
1.2k
Embracing the Network – ColdFront, September 2015
patrickhamann
36
3.9k
Building theguardian.com
patrickhamann
41
6.9k
Breaking news at 1000ms - Velocity EU 2014
patrickhamann
16
2.6k

Other Decks in Programming

See All in Programming
Semantic search with Django and pgvector
pauloxnet
0
220
Rubyでたのしむクリエイティブコーディング/Enjoy Creative coding with Ruby
chobishiba
1
160
受託開発でGitLab CI を活用していく
xiombatsg
1
260
単体テストを書かない技術 #phpcon_odawara
o0h
PRO
24
7k
From Spring Boot 2 to Spring Boot 3 with Java 22 and Jakarta EE
ivargrimstad
0
700
イベントストーミングによるオブジェクトモデリング・オブジェクト指向プログラミングの適用・開発プロセスの変遷・アーキテクチャの変革 / Object modeling with Event Storming.
nrslib
13
4.8k
⼤規模⾔語モデルの拡張（RAG）が 終わったかも知れない件について
nearme_tech
22
14k
プールにゆこう
irof
2
120
OpenAPI を守るのは難しい
ohmori_yusuke
2
720
object-oriented-conference-2024
fuwasegu
8
2.6k
DDDはなぜ難しいのか / 良いコードの定義と設計能力の壁
pospome
28
10k
設計の知識と技能で駆動するソフトウェア開発
masuda220
PRO
20
17k

Featured

See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
60
14k
Testing 201, or: Great Expectations
jmmastey
27
6.3k
BBQ
matthewcrist
79
8.7k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
225
51k
Done Done
chrislema
178
15k
Web development in the modern age
philhawksworth
201
10k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
Building a Scalable Design System with Sketch
lauravandoore
455
32k
Designing Experiences People Love
moore
135
23k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
319
20k
Fontdeck: Realign not Redesign
paulrobertlloyd
75
4.9k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.8k

Transcript

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

  2. next.theguardian.com

  3. 100million !

  4. " # $ 6000

  5. None

  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

  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

  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

  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

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

  11. 1000ms

  12. Browser rendering 101

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

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

  15. Source: Google - Pagespeed Insights

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

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

    DOM

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

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

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

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

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

    Start render

  23. Get the CSS down as soon as possible.

  24. CSS and the critical path

  25. What is your critical CSS?

  26. Popular content ✘ Sharing ✘ Comments ✘ Related content ✘

    Commercial components ✘ Article ✔

  27. Final progressively enhanced page Initial page payload

  28. What if we inlined our critical CSS?

  29. Inline

  30. WTF%$?!

  31. None

  32. 0.9 1.0 1.1 0.9 1.0 1.1

  33. None

  34. localStorage

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

    with <link> Request with AJAX localStorage space? Cache in localStorage
  36. None
  37. None
  38. None

  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

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

  41. None

  42. Monitor

  43. assets radiator

  44. None

  45. speedcurve

  46. None

  47. Alternatives

  48. PageSpeed

  49. UnCSS & grunt-uncss

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

  51. What does the future hold?

  52. http/2

  53.  ) HTML " ) CSS  " * HTML

    & CSS  " HTTP/1.1 HTTP/2 Server push

  54. service worker ServiceWorker

  55. ServiceWorker  " ) )

  56. Takeaways

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

    avoid render blocking.

  58. Where possible, cache aggressively in localStorage.

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

  60. Performance is a requirement; not a feature.

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

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