[Resolved] Cumulative Layout Shift

[Laurens]

Hello,
my website has a problem with the Cumulative Layout Shift in the desktop mode.
At the PageSpeed Insights is it still in green but it shows me under Avoid large layout shifts 5 elements found that the

has the biggest CLS contribution.
If I test the web vitals addon in chrome the CLS is even red.
My site: https://www.koffer-flugreise.de/

How can I avoid this?

[Elvin]

Hi,

I’ve checked the page on other page test sites.

See results here:
GTMetrix
– https://gtmetrix.com/reports/www.koffer-flugreise.de/gtgBCzd9/

Google PSI
– https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.koffer-flugreise.de%2F&tab=desktop

Webpagetest.org (Uses web vitals)
– https://webpagetest.org/result/201210_DiFC_3284a11d40ce1f93a50079e1d7f814d6/

And if we check the results. They mostly point out that the bigger issue is the TTFB or initial server response time. And this I’m afraid is something to be address by your site’s hosting service provider.

As for the CLS: Consider using optimization plugins and check for improvements.

We at GeneratePress recommend Autoptimize.

We even have a brief documentation on setting it up which is found here:
https://docs.generatepress.com/article/configuring-autoptimize/

[Laurens]

Hello Elvin,
thank you for the quick response.
The initial server response time is hopefully just temporally because normally I don’t have problems with this.
I already used Autoptimize for my sites.
If we just look at the results, the CLS isn’t really a big issue but on the site https://www.koffer-flugreise.de/ you can see that the content is jumping during the loading.
I think it is because of the CLS. On my other sites I don’t have this issues and there I used the same settings and plugins:
https://carry-on-bag.org/sample-blog-post-4/ (Autoptimize + Cache Enabler)
https://www.handgepaeck-flugreise.de/ (here I use Autoptimize + WP Super Cache)
https://www.koffer-flugreise.de/ (only Autoptimize; I deactivated WP Super Cache for testing the CLS issue but the content is still jumping)

[Elvin]

https://www.koffer-flugreise.de/ you can see that the content is jumping during the loading.

Ah that’s right. That could be from the site logo being lazyloaded.

You can try excluding it from lazyloading on Autoptimize.

[Laurens]

ok, I will try. Sorry for the newbie question that exactly I have to write for excluding the logo?

Edit:
For testing, I deactivate the lazy load and the jumping stopped but in generally I would prefer to use the lazy load function.

Edit 2:
I figured it out. I just put the file name of the logo in the exception field.

[Elvin]

ok, I will try. Sorry for the newbie question that exactly I have to write for excluding the logo?

Go to Dashboard > Settings > Autoptimize. On the “Images” tab, you should see a “Lazy-load exclusions” text field.

Add is-logo-image to this text field. This should exclude the site logo.

[Laurens]

Add is-logo-image to this text field. This should exclude the site logo.

also works!

Thank you. The CLS is now even better in the Google PSI. What I still not understand in the Web Vitals extension the CLS is still high:

You know why and can I do something about it?

[Elvin]

Thank you. The CLS is now even better in the Google PSI. What I still not understand in the Web Vitals extension the CLS is still high:

If you check the results on webpagetest.org, GTMetrix and Google PSI, the page score did improve after removing it, but it’s quite difficult to pinpoint the cause as we get different results every time we run the page test.

Even web vitals extension include a (might change) indication because of this.

But you can try playing around with different settings on autoptimize to see if you can improve it even further. Perhaps try completely disabling lazyloading and try checking “Optimize CSS Code?” to aggregate CSS.

[Laurens]

thank you, Elvin. I will try different settings on autoptimize and see if I can improve it. For now I will close here.

[Elvin]

thank you, Elvin. I will try different settings on autoptimize and see if I can improve it. For now I will close here.

No problem. 🙂

[Author]

Posts