Critical CSS causes high CLS

Thanks a lot for your idea optimizingmatters,

I don’t see plenty of tools I can try beside sitelocity. There is https://jonassebastianohlsson.com/criticalpathcssgenerator/ but I’m not sure I know how to properly extract the full CSS (as needed in step 2 for this site).

I’m doing it through Google Chrome Dev tool, viewing CSS files and copy-paste into https://jonassebastianohlsson.com/criticalpathcssgenerator/ the content of Autoptimized CSS.

I’m getting a nice 0.021 CLS when doing this. But the problem is then, that I miss the Fa-fa Icons of my website. And this Problem isn’t solved by excluding folowing files into CSS options of Autoptimize, and unchecking the last option in order not to minify these:

wp-content/cache/, wp-content/uploads/, admin-bar.min.css, dashicons.min.css, font-awesome.min.css, font-awesome.css

What can I do?

Thanks for the video. My problem was mostly to find the whole CSS code of my website and the video only shows how to find it through a link of the header.php file. But mine hasn’t got that kind of link. Finally I found a way with the Quick source Viewer add-on for Chrome.

Nevertheless, I still have the same problem. When I force the Critical CSS code for the ‘is front page’, I lost my Fa Fa icons.

Can you help me with this problem?

Ok, I see you won’t dig more into this with me. Of course I was a bit dissapointed because I thought that, with your experience in Critical CSS, you would help me more with this problem.

But I really understand you’ve got your limits. Sooo.. I did a lot of searches, tests, and finally came out with a solution that I expose here, with explanations so that if someone else faces the same problem, he will (hopefully) be able to adapt the solution to his own situation:

a) one has to consider that the fa-icons are depending from the fontawesome font

b) therefore, I added the Quick source viewer add-on into Chrome Browser in order to be
able to extract the whole CSS code of my page when it was set with the automatic
Critial CSS Rule of ‘Critical CSS’ WP plugin. (With this setting, the performance was
not fully satisfying but I have the fa-icons prompting ok to my page. So my aim was to
find what was there, and not into the better setting with the Sitelocity CSS).

c) I spotted the @font-face declaration below, and when checking into the Critical CSS
given by https://www.sitelocity.com/critical-path-css-generator I saw that this
declaration was missing. Therefore:

@font-face{font-family:FontAwesome;src:url(https://activequilibre.ch/wp-content/themes/glow/css/../fonts/fontawesome-webfont.eot?v=4.4.0);src:url(https://activequilibre.ch/wp-content/themes/glow/css/../fonts/fontawesome-webfont.eot?#iefix&v=4.4.0) format('embedded-opentype'),url(https://activequilibre.ch/wp-content/themes/glow/css/../fonts/fontawesome-webfont.woff2?v=4.4.0) format('woff2'),url(https://activequilibre.ch/wp-content/themes/glow/css/../fonts/fontawesome-webfont.woff?v=4.4.0) format('woff'),url(https://activequilibre.ch/wp-content/themes/glow/css/../fonts/fontawesome-webfont.ttf?v=4.4.0) format('truetype'),url(https://activequilibre.ch/wp-content/themes/glow/css/../fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular) format('svg');font-weight:400;font-style:normal;font-display:swap}

d) I did set the Critical CSS code from Sitelocity through the advanced settings of
your Critical CSS plugin tab into Autoptimize with the button [Edit] of the rule
for ‘is_front_page’

e) I also used the [Add/Edit Additional Critical CSS] button in order to add the
@Font-Face declaration above to all rules.

This way I finally got my icons promping all right and with the Largest Contentfull Paint at 2.4s and the CLS at 0 for a score of 93 on Google’s PageSpeed Insight !

Hope that will help others 😉