CLS Issue

Hi there,

the main issue is generated by the Logo and header image being lazyloaded.
In your Lazy Loader plugin you will generally find an option to exclude images from lazy loading using a CSS Class; you can add these three: is-logo-image header-image avatar

I included the avatar as its above the fold so no need to lazy load that either.

Thanks David. I use Autoptimize for lazyloading and tried adding those CSS classes, but no luck.

I found the below Autoptimize thread, which says that you need to use the file name you're trying to exclude.

https://wordpress.org/support/topic/exclude-class-from-lazy-load/

But when I did that, I made things worse: my CLS numbers were unchanged, but my overall site speed dropped significantly.

Do you have any other suggestions for how I might fix this?

In the autoptimize settings > images there is the Lazy-load exclusions field but my bad, those CSS classes have to be Comma Separated ie.

is-logo-image, header-image, avatar

Thanks David. I added the commas, but when I ran a pagespeed test afterwards my mobile speed dropped from 63 to 49, so it seems like excluding those images caused more problems than it solved.

Do you know if there's any way to address the CLS issue without negatively affecting the page speed?

in Customizer > General can you change the structure to Flexbox ?

I don't see an option for Flexbox. In General the three options are:

Combine CSS
Reduce the number of CSS file requests and use a lite version of our grid system.

Cache dynamic CSS
Cache CSS generated by your options to boost performance.

Smooth scroll
Initiate smooth scroll on anchor links using the smooth-scroll class.

Hi there,

You're supposed to see this dropdown option.
https://share.getcloudapp.com/Qwu9jvXK

Are you using an updated GeneratePress and GP Premium?
https://docs.generatepress.com/article/switching-from-floats-to-flexbox/

Apologies, I was using an outdated version of GP Premium, so I just updated it, switched to Flexbox as suggested, and added the exclusions David recommended to Autoptimize.

My page speeds are good, though Pagespeed Insights still shows bad CLS scores. Is this something that will take time to be reflected there, or is there something else I can do to improve those numbers?

I just checked the site on PSI and the Lab Results for CLS are good they're all in the green and below 0.01.

Google collects origin summary data over 28 days so it takes time for that to get updated - and further to this it will collect Field Data which is from real user visits that will again demonstrate real values which should be around the Lab Data results.

OK great, thanks very much for all your help! Greatly appreciated.

You're welcome