Critical / Deferred CSS Implementation

193 Views Asked by nick-roberts91 At 23 November 2019 at 20:05

Google PageSpeed Audits suggest adding Critical CSS of above-the-fold content to a <style> tag in the <head>, and defer the rest until after the content has loaded.

Whilst I don't agree with this practice, what is the correct way to implement it?

I have a few reservations against using it:

FOUC (either individual elements or the page as a whole using visibility: hidden)
Too much content above the fold to style with minimal inlined CSS to prevent FOUC being seen
Additional page weight on load, before getting to the content itself
No caching of inlined CSS, meaning it has to be re-downloaded every time a page loads

I do not use CSS frameworks, so there is no bloated CSS to download anyway.

Original Q&A

There are 1 best solutions below

pixelistik On 25 November 2019 at 12:48

A "correct" way to implement it would be an automated way, to ensure

you have no additional work, once set up
you make no mistakes (e.g. missing individual elements)

There are tools that can identify and extract your critical CSS as part of the build process. One popular choice would be addyosmani/critical:

Basic usage:

critical.generate({
     base: 'test/',
     src: 'index.html',
     target: 'styles/main.css',
     width: 1300,
     height: 900
});

You feed it an exemplary HTML page and the viewport port size to define "above the fold". Then it gives you the Critical CSS. There are build plugins and configurations available for Webpack, Grunt, and Gulp.

Once you have such a technically correct setup, you can weigh the pros and cons that you are already aware of.

Critical / Deferred CSS Implementation

There are 1 best solutions below

Related Questions in CSS

Related Questions in PAGESPEED-INSIGHTS

Related Questions in CRITICAL-CSS

Trending Questions

Popular # Hahtags

Popular Questions