2

I use Wordpress and I add critical CSS in the head section generated with: https://www.sitelocity.com/critical-path-css-generator.

In addition, I have this code for loading all other rendering-blocking CSS with Async and Preload:

<link rel=preload href=https://www.examplesite123.com/wp-content/cache/minify/37929.css as=style>
<link rel=stylesheet href=https://www.examplesite123.com/wp-content/cache/minify/37929.css media=print onload="this.media='all'; this.onload=null;">
<noscript><link rel=stylesheet href=https://www.examplesite123.com/wp-content/cache/minify/37929.css></noscript>

I use PageSpeed Insights and can therefore see that this method increases dramatically the CLS (Cumulative Layout Shift).

Before using this method to load CSS, i had only the following code without Critical CSS.

<link rel=stylesheet href=https://www.examplesite123.com/wp-content/cache/minify/37929.css media=all>

In this case the CLS was perfect, but other parameters like "First Contentful Paint" and "Time to Interactive" were bad.

So nothing else has changed on the site.

How can I reduce the CLS?

hermes_44
  • 101
  • 3
  • 9
  • 2
    There isn't enough information here to give a definitive answer but I would imagine you still have critical resources "above the fold", plugins are not 100% successful at finding everything. Check the "critical request chains" item under "diagnostics", you may find there is still something there. Either that or you have an image loading in where the height is not defined so that causes a layout shift etc. You may find [this question and answer](https://stackoverflow.com/questions/62751471/how-to-find-cumulative-layout-shift-problems-if-page-speed-insights-says-one-thi) useful. – GrahamTheDev Nov 24 '20 at 11:46
  • Thanks Graham Ritchie! Interesting point. So do you think that the tool https://www.sitelocity.com/critical-path-css-generator hasn't find all the critical CSS of my site? I also updated the question with more details – hermes_44 Nov 24 '20 at 11:57
  • 1
    I would guess so, do you have a publicly accessible URL so I can have a look for you? – GrahamTheDev Nov 24 '20 at 13:21
  • 1
    You are right! i generated critical CSS with this tool https://jonassebastianohlsson.com/criticalpathcssgenerator/ , much more accurate and now it's good. Thanks :) – hermes_44 Nov 25 '20 at 16:40

0 Answers0