[Resolved] CLS issue

[Patty]

Hi!

My site keeps getting a medium-high CLS rating.

I don’t quite understand the concept of CLS, so I would really appreciate if you could take a look at what could be causing it 🙂

My website is horoscoop-hoekje.nl

Thank you!

[Leo]

Hi there,

Any chance you can disable all plugins except GP Premium for me to run a PageSpeed insight test?

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Patty]

Hi Leo,

I just disabled everything! Hope it helps to narrow it down

[Leo]

Looks like the CLS issue is resolved.

Can you confirm that on your end?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Patty]

Thank you Leo! It didn’t seem to make a difference on my end though.

Google PageSpeed gives a CLS of 0.131, while layoutstability.rocks gives 0.26. In Google Search Console it says 0.18 and “needs improvement”.

[Elvin]

Hi,

The CLS issues flagged on your site seems to be from the fonts set to your site.

There seems to be some Flash of Unstyled Text (FOUT) issue happening.

To address this, you can try preloading the font you use.

As to how it’s done, you can try following David’s brief guide here:
https://generatepress.com/forums/topic/local-font-pagespeed-insights/

A wise man once said:
"Have you cleared your cache?"

[Patty]

Thank you, Elvin! Seems complicated, and I’m not particularly attached to the font, so perhaps simply changing the font will help?

The guide starts with talking about a local font. I just selected one from the customizer.

I think I’ll just start from scratch though and test better with every step whether the CLS changes or not.

[Patty]

Hmm, even using one of the premade templates leads to isses. All I did was change the colors. It’s fine freshly unpacked but then when using the customizer things get messed up it seems.

Added later: removing the GP premium plugin solved everything, but that doesn’t seem like a good thing.

[David]

Hi there,

looks like your using the Phast Cache plugin which is using inline Critical CSS – can you try disabling that option, and let us know.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Patty]

I’m suspecting it might be caused by CloudFlare’s caching. Turning on Developer Mode instantly changes the results. Searched their site and some report the same issue. No solution though. I’ll teste more tomorrow.

[David]

Yep theres a good chance that is also an issue, especially if other CSS is being deferred ( Optimized CSS and Cached CSS ) and those requests rely on CDNs to deliver it.

Fingers crossed for tomorrow

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Patty]

Whatever the underlying issue may be, another person had the exact same issue: turning on developer mode instantly solves the problem. Their support dismissed it as a design issue.

But I guess if I can achieve better speed results with free plugins, that’s a win for my wallet 🙂

[Author]

Posts