Archived topic

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

7 replies · Started by Xin Yi on November 25, 2020

Viewing posts 1–8 of 8

November 25, 2020 at 5:37 am #1546088

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!

November 25, 2020 at 7:07 am #1546437

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.

November 25, 2020 at 7:34 am #1546483

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?

November 25, 2020 at 1:59 pm #1547451

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 :)

November 25, 2020 at 6:28 pm #1548094

Hey Tom,

That CLS number is for the mobile.

It’s the desktop version that has the issue.

Any idea why?

November 26, 2020 at 7:45 am #1549960

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

December 27, 2020 at 10:34 pm #1596261

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.

December 28, 2020 at 4:36 am #1596597

Glad to hear you resolved the issue

This archived topic is closed to new replies.

Start building better websites today.