[Resolved] Cumulative Layout Shift

Home Forums Support [Resolved] Cumulative Layout Shift

Home Forums Support Cumulative Layout Shift

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1573765
    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?

    #1573779
    Elvin
    Staff
    Customer Support

    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/

    A wise man once said:
    "Have you cleared your cache?"

    #1573785
    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)

    #1573788
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #1573792
    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.

    #1573797
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #1573812
    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:
    CLS in Web Vitals is high
    You know why and can I do something about it?

    #1573837
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #1574239
    Laurens

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

    #1575011
    Elvin
    Staff
    Customer Support

    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. 🙂

    A wise man once said:
    "Have you cleared your cache?"

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.