vue-lazyload VS critical

I'd you are using a frontend framework, you can use lazy loading that loads more content on scroll. For Vue: https://github.com/hilongjw/vue-lazyload For React: https://github.com/twobin/react-lazyload

What I use → In my case I'm using Vue Lazyload to lazy-load my images and background images: https://github.com/hilongjw/vue-lazyload#demo

Critical by Addy Osmani

npm install purgecss -g purgecss --css styles.css --content index.html --output clean-styles.css ### 2. Use Critical CSS Load the CSS needed for above-the-fold content *first*, and defer the rest. Tools like [Critical](https://github.com/addyosmani/critical) automate this process and help speed up your **first paint** dramatically.

If the link element is placed inside of the shadow DOM, then it's not render blocking and you will experience a flash of unstyled content. That's what the lit docs are referring to.

If you place the link element inside the head of your document, then it is render blocking, which means the browser has to make two round trips to the server if the CSS file isn't in the cache before it render (one to download the HTML file, and then another after it discovers your link element, and has to download the corresponding CSS file).

> The best from both worlds is to embed a lightweight basic CSS stylesheet inline and the rest in cache-able external CSS files.

This is the absolute optimal way of doing it. You would have to analyze your styles to see which styles are applied to elements above the fold, then extract them and put them in an inline style tag. The rest of the styles would have to be downloaded via a link tag, but you'd have to place the link tag at the very end of the HTML body tag to prevent the browser from blocking as soon as it encounters the link element or alternatively use JavaScript to add the link element after the page has been rendered. There are tools to automate this for static sites [1], but doing this for dynamically generated HTML is kind of a pain, and I've found that browsers parse CSS so quickly that the overhead of just inlining it all is very low in many cases.

[1] https://github.com/addyosmani/critical

CLS is a pain in the arse. Extract your critical CSS and inline it https://github.com/addyosmani/critical although doing critical CSS badly makes things worse.

There is a tool that allows generating critical CSS and determining which CSS is critical and which is not. It helps to separate it into files, and there is also an npm package for that.

I am a fan of CSSWizardry and yet I find this post misleading. The examples shown are ways NOT to do frontend performance engineering.

The current best performant way to load JS is asynchronously as documented at https://web.dev/efficiently-load-third-party-javascript/.

And the best way to load CSS is with Critical Path CSS + Async CSS as documented at https://web.dev/defer-non-critical-css/.

The easiest way to generate Critical CSS is https://github.com/addyosmani/critical where you may suggest multiple resolutions.

I have found https://github.com/addyosmani/critical-path-css-tools to be a great resource to master critical path CSS which improves page render speeds. It helps build fast rendering sites, sometimes even sub-second renders given you have a low latency backend.

A while ago I'd noticed that the version (or configuration) of the Critical packaged used by my Netlify build plugin was missing that fallback, so I manually added it to my Eleventy template, no big deal.