Css Critical Path

Some info about what I got about Critical Path, and some tools and ideas how to solve it

Transcript

1. CSS Critical Path by Valerio Sillari October 2017
2. Back to basics
3. How Browser Works
4. Browser Step for rendering/displaying a page Build DOM Build CSSOM Render Tree Layout Paint
5. And CSS and JS?
6. How Browsers display a page Build DOM Build CSSOM Render Tree Layout Paint Get CSS Get JS
7. Javascript is parser blocking When the parser finds a script tag in the document, it blocks DOM construction (step 1), then waits for the browser to get the file and for the javascript engine to parse the script
8. How Browsers display a page Build DOM Build CSSOM Render Tree Layout Paint Blocked Get CSS Get JS If we have some JS tag into the document, during the building DOM, we block the page
9. That’s why JS usually is at the bottom of body You load first all the DOM, then load the js so it will not block it
10. BUT ...
11. JS is also stringly connected with CSS So it needs also to have all the css already loaded in the CSSOM moment...
12. JS and CSS Build DOM Build CSSOM Render Tree Layout Paint Blocked Get CSS Get JS JS need not only to be requested, but also parse ALL the css if exist PARSE CSS RUN JS
13. Solution: It doesn’t block DOM construction and don’t have the need to wait for the CSSOM event Async scripts
14. How Browsers display a page Build DOM Build CSSOM Render Tree Layout Paint Get CSS Async JS
15. And CSS?
16. For building the CSSOM (step2), the CSS parser goes through each selector (tag, class or ID) in the CSS file and gets the styles attributed to it.
17. How Browsers display a page Build DOM Build CSSOM Render Tree Layout Paint Blocked Get CSS Get JS Until we do not have ALL the css file loaded and parsed, we can not start to build the CSSOM.
18. CSS is render blocking The browser blocks page rendering until it receives and processes all the css files
19. How Browsers display a page Build DOM Build CSSOM Render Tree Layout Paint Blocked Get CSS Get JS Until we do not have ALL the css file loaded and parsed, we can not start to build the CSSOM.
21. CSS is the “enemy”
22. That’s Critical Path Css
23. Solutions?
24. Solution 01: They does not block the render of the page! Inline styles
26. Technically, inline styles not required any css file with extra request, and they not “block” the DOM and CSSOM
27. But basically impossible to maintain ...
28. Solution 02: Load first only basic code, then the rest Split CSS
29. “Ideally, the ATF (above the fold) content should fit under 14KB — this allows the browser to paint the page after just one round trip…” https://developers.google.com/speed/docs/insights/mobile Google Page Speed
30. So you have 14kb to use, for delivering the DOM + CSS. You can split the CSS in 2 files: - The basic stuff (above the fold) - The Fanciness Stuff
31. Load CSS by Filament Group
32. Solution 03: Set inline styles with automation Inline Styles by Task Runner
33. Critical by Addy Osmani
34. Solution 04: Not load CSS at all (until JS will do it for you) CSS in JS
35. React / Angular / Vue etc... They take care of the CSS using JS A quick example: https://vue-nuxt-test-valerio.herokuapp.com/
36. The Future? JS take care of the rendering of the page. No DOM + CSS loaded at first New Css Logic
37. The end. Thanks. github.com/valeriosillari @stellavalerio