[Resolved] CLS issue even after disabling lazy loading on logo and featured image

[Xin Yi]

Hi there,

Have been experiencing this annoying CLS issue:

It’s CLS more than 0.1s on desktop (mobile is perfectly fine).

I’ve read some of the forum posts and implemented the code to disable LazyLoading of the logo and featured image. Only using the default wordpress lazy load; WpRocket image lazy load is disabled.

But the CLS issue still exists.

I’ve checked PageSpeed Insights and found out that it’s in the section containing the H1 title tag, author image, author name, and last updated date.

As I’m not great at all these, could you let me know a fix or point me a direction to solve this issue?

Thanks!

[David]

Hi there,

first place to start is to disable the WP Rocket Critical CSS – unless you know how to manually configure this its going to cause you problems.

See if that makes a difference.

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

[Xin Yi]

Hi David,

Have unchecked ‘Optimise CSS delivery’ and ‘Load Javascript deferred’ in WP Rocket, but the issue is still the same.

PageSpeed Insights still point this out:

Element:
The 7 Best SRS Investment Options in 2020 Abram LimLast Updated: 29 August 2020…

CLS Contribution:
0.1

Any further thoughts?

[Tom]

Hi there,

I just took a look at your URL and I’m seeing this: https://www.screencast.com/t/iJXZqHvmFPHm

0.002 is very good – looks like this may have fixed it?

Let us know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Xin Yi]

Hey Tom,

That CLS number is for the mobile.

It’s the desktop version that has the issue.

Any idea why?

[David]

The remaining issue is related to the Font Loading.
You can try preloading them – WP Rocket has an option for that:

https://docs.wp-rocket.me/article/1317-preload-fonts

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

[Xin Yi]

For the longest time, I was trying to figure out how to resolve this (CLS on desktop).

I’ve tried excluding above the fold images from lazyloading but it still persists.

The primary reason was because of my navigation menu (which shows on desktop).

I believe it had too many items. So once I took away an item from the menu, the CLS issue was resolved.

For those who have similar issues, you could try it too.

[David]

Glad to hear you resolved the issue

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

[Author]

Posts