What's render blocking? - React London Meetup

What is render-blocking and how to avoid it? - how we optimised our critical rendering path and some gotchas along the way.

Transcript

1. What's What's render-blocking render-blocking? ? Csaba Palfi ( ) @csabapalfi
4. How did we learn How did we learn about this? about this?
5. PageSpeed Insights PageSpeed Insights
6. in Lighthouse, too in Lighthouse, too
7. let's take a step let's take a step back back
8. browsers: browsers: 1. 1. get HTML get HTML → DOM → DOM 2. link to CSS → 2. link to CSS → get CSS get CSS → CSSOM → CSSOM 3. DOM + CSSOM → render tree 3. DOM + CSSOM → render tree 4. render tree → layout/reflow 4. render tree → layout/reflow 5. layout/reflow → paint 5. layout/reflow → paint
9. ⚠ critical path ⚠ critical path resources → pixels on the screen resources → pixels on the screen goal: getting to paint ASAP goal: getting to paint ASAP
10. render-blocking render-blocking CSS CSS <link> <link> to CSS → to CSS → get CSS get CSS → CSSOM → CSSOM
11. what to measure? what to measure?
12. is it happening? is it happening? first-paint first-paint ( ( ) ) - ( - ( ) ) Paint Timing API Paint Timing API Start Render Start Render webpagetest.org webpagetest.org
13. let's find a page let's find a page that has the problem that has the problem
16. baseline baseline first-paint first-paint ~0.5s ~0.5s ~3s ~3s ~10s ~10s
18. how to fix this? how to fix this?
19. ✅ Inline critical CSS ✅ Inline critical CSS embed styles for rendering above-the fold content <style> /* yes, here */ </style>
20. Wait a second Wait a second <link rel="stylesheet" href="..." >
21. ⬇ Async loading CSS ⬇ Async loading CSS for below the fold <link rel="preload" href="..." as="style" onload="this.rel='stylesheet'" >
22. Results Results
23. baseline vs fixed baseline vs fixed first-paint first-paint <0.5s → <0.5s <0.5s → <0.5s ~3s → ~1s ~3s → ~1s ~10s -> ~2s ~10s -> ~2s
26. Gotchas Gotchas
27. are we done? are we done? is this even your bottleneck? is this even your bottleneck? how many slow 3G users? - tricky how many slow 3G users? - tricky it's sooo not just about first-paint it's sooo not just about first-paint #LNM 14/11 #LNM 14/11
28. below the fold below the fold where is the fold? where is the fold? what if the user scrolls early? what if the user scrolls early?
29. ⚒ critical CSS ⚒ critical CSS how to extract (but e.g. styletron) how to extract (but e.g. styletron) keeping it small keeping it small testing with critical CSS only testing with critical CSS only @import @import, relative , relative url(...) url(...)s s
30. async loaded CSS async loaded CSS rel=preload rel=preload browser support browser support <noscript> <noscript>
31. Should've been a Should've been a blog post? blog post? - bit out of date - bit out of date also also by Google by Google I have a blog post, too! I have a blog post, too! Critical Rendering Path Critical Rendering Path
32. Thanks! Questions? Thanks! Questions? @csabapalfi