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

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.

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.

David,

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

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

Leo,

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

Thank you!

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

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

Can you confirm?

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?

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/

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.

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?

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!

No problem :)

See customer support message.

Thanks again!