Critical / Deferred CSS Implementation

Question

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.

"what is the correct way to implement it?" is a very broad question. There are probably many ways. Is there a specific approach that you have tried and that you need help with? What have you tried? — pixelistik, Nov 23 '19 at 21:33
@pixelistik It's not me, it's a new hire adamant in using it. The way he's implemented it just styles the header, so FOUC occurs with the rest of the page (not even gracefully styling either), which doesn't look good. I've been told all above-the-fold CSS should be inlined. I don't think it should be used in our use case due to this. I'm lead dev, and have been since predecessor left last year, but they won't take on board what/how we work. As he's so adamant in using it, I'm trying to find a compromise that I'm happy with him using. — nick-roberts91, Nov 23 '19 at 21:58

score 0 · Answer 1 · answered Nov 25 '19 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

1 Answers1