[Resolved] CLS issue on Home page for mobile, and after first image on posts for desktop.

[Kevin Wabiszewski]

Hi,

I posted once about recent CLS issues on GP. Switching from floats to flexbox made the CLS times go down significantly.

I am using google page speed to try and get CLS to zero. On the home page and page 1, page 2, page 3 etc, the CLS on mobile is yellow in the lab data. It references the first paragraph text as a CLS contribution of .174.

There is a desktop CLS shift of .015. This happens on most pages on all my GP websites. It is not a huge value but varies from 0 to .06 and would be nice to bring it to zero.

Any suggestions would be appreciated!

Thank you!

[David]

Hi there,

you have the Critical CSS option enabled in your cache plugin.
The automated version isn’t accurate enough to cover all the basis. And will defer some of the Themes CSS that is required on initial load.

Unless you know how to manually write your own critical CSS then you should disable that option.

[Kevin Wabiszewski]

David,

Thanks for the response.

I turned off the Optimize CSS check box in wp rocket. I thought it would slow down the site but did not.

However, this did not change the CLS times. The homepage for example still has a CLS of .175. I did clear the cache for the entire site.

Any other ideas?

Thank you.

[Kevin Wabiszewski]

David,

I also removed all custom CSS to see if that helped and it did not.

[Leo]

Any chance you can disable all plugins except GP Premium and let us have a cleaner look?

[Kevin Wabiszewski]

Leo,

Everything is deactivated for a bit. Let me know if this helps you troubleshoot.

Thank you!

[Kevin Wabiszewski]

It did remove the CLS issue. Let me reactivate them slowly and see what plugin is causing the issue.

[Leo]

I’m getting 0 for CLS using PageSpeed Insights:
https://www.screencast.com/t/BTAlY6G9QwK

Can you confirm?

[Kevin Wabiszewski]

It looks like it was from a3 lazy load. The problem with leaving that disabled is that long pages become very slow on mobile.

I could try playing around with the settings on A3 and WP-rocket to see if I can find the ones that work best.

I like a3 for lazy loading because it has an image load threshold to make lazy loading images appear instantly when scrolling.

Do you recommend lazy loading images with WP-rocket for GP?

[Leo]

I don’t have a recommendation for this unfortunately.

Personally, I don’t use any lazy loading or caching plugins.

The only optimization I do is to use Autopimize:
https://docs.generatepress.com/article/configuring-autoptimize/

And also use a site like this to optimize the images:
https://imagecompressor.com/

[Kevin Wabiszewski]

I see. On long pages, these are needed.

In A3 lazy load, not lazy loading the, Post Thumbnails, removed the CLS issue on the home page for some reason. Strange because there are no thumbnails on the homepage but I will take the fix.

Turing lazy loading on for images still creates the smaller CLS on posts around .06 seconds. I can not figure out why it happens or how to remove it.

Any ideas now that we know it is coming from lazy loading the first image?

Thank you.

[Leo]

Just to make sure, we are talking about the first image in this post here right?
[URL removed]

If so you will need to exclude that image from being lazy loaded – likely by adding a specific class for A3 lazy load.

Can you check with their support team first?

[Kevin Wabiszewski]

Leo,

Thanks for your help.

I guess WProcket made some improvements to their lazy loading features. I am just going to use that rather than A3 lazy load and it solves the issue.

Thank you!

[Leo]

No problem 🙂

[Kevin Wabiszewski]

See customer support message.

Thanks again!

[Author]

Posts