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

Css Critical Path

Css Critical Path

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

Valerio Sillari

October 13, 2017
Tweet

Other Decks in Technology

Transcript

  1. 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
  2. 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
  3. 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
  4. JS is also stringly connected with CSS So it needs

    also to have all the css already loaded in the CSSOM moment...
  5. 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
  6. Solution: It doesn’t block DOM construction and don’t have the

    need to wait for the CSSOM event Async scripts
  7. 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.
  8. 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.
  9. CSS is render blocking The browser blocks page rendering until

    it receives and processes all the css files
  10. 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.
  11. Technically, inline styles not required any css file with extra

    request, and they not “block” the DOM and CSSOM
  12. “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
  13. 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
  14. React / Angular / Vue etc... They take care of

    the CSS using JS A quick example: https://vue-nuxt-test-valerio.herokuapp.com/
  15. The Future? JS take care of the rendering of the

    page. No DOM + CSS loaded at first New Css Logic