[Support request] I Have a High Cumulative Layout Shift, What’s the Solution

Home Forums Support [Support request] I Have a High Cumulative Layout Shift, What’s the Solution

Home Forums Support I Have a High Cumulative Layout Shift, What’s the Solution

Viewing 15 posts - 1 through 15 (of 27 total)
  • Author
    Posts
  • #1622861
    Shane

    My GT Metrix test this morning shows a high CLS of 0.28 when a score of 0.1 is recommended I have been told by my host that my theme provider will be able to provide me with some solutions. Any assistance is appreciated thank you.
    Performance Report

    #1622913
    Leo
    Staff
    Customer Support

    Hi there,

    Any chance you can link us to the site in question?

    You can use the private information field.

    Let me know 🙂

    #1622949
    Shane

    Hi Leo Yes I have provided that detail in the private info area, thanks

    #1622956
    Elvin
    Staff
    Customer Support

    Hi there,

    Let’s tackle each one by one.

    “Ensure text remains visible during webfont load”

    The theme’s font icons are being flagged. To address this, you can switch GP icons from fonts to SVG icons through Customizer > General.
    https://docs.generatepress.com/article/svg-icons/

    “Avoid large layout shifts”

    The elements flagged here are usually the contents of your pages. The reason can be from an unoptimized image, font, or CSS.

    In your case, It may be from the image or CSS. As for the Image, try optimizing it with Optimole or Smush. As for the CSS, you can use Autopmitize.

    “Eliminate render-blocking resources”

    Tom recommends Autoptimize to address this:
    https://generatepress.com/forums/topic/eliminate-render-blocking-resources-2/#post-1527484

    Here’s a brief documentation on configuring Autoptimize.
    https://docs.generatepress.com/article/configuring-autoptimize/

    As to why we recommend Autoptimize, check David’s reply here.
    https://generatepress.com/forums/topic/why-autoptimize/#post-1517520

    Note: You may have to exclude a few styles or scripts on Autoptimize incase some plugins don’t work.

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

    #1623018
    Shane

    Thank you Elvin, I have changed GP icons to SVG icons, plus I have now activated Autoptimize and completed those tasks as per https://docs.generatepress.com/article/configuring-autoptimize/
    I also clear the cache daily on my site.
    What do you suggest is the next step, please?

    #1623052
    Elvin
    Staff
    Customer Support

    Try disabling lazyload.

    To turn off WordPress default’s lazyloading, try adding this PHP snippet:

    add_filter( 'wp_lazy_loading_enabled', '__return_false' );

    Here’s how to add PHP code/s – https://docs.generatepress.com/article/adding-php/

    If you’re using WP Rocket, try following this article.
    https://wp-rocket.me/blog/lazy-load-images-wordpress-site/

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

    #1623140
    Shane

    Thank you Elvin, Can I ask what turning off WordPress default’s lazyloading actually achieves?
    Thank you.

    #1623824
    David
    Staff
    Customer Support

    Hi there,

    the main issue i see is the Logo being lazyloaded from the Smush CDN. Are you able exclude specific images from Smush ?

    #1625765
    Shane

    Thank you, I have now turned off WordPress default’s lazyloading, by adding this PHP snippet:

    ( ‘wp_lazy_loading_enabled’, ‘__return_false’ );

    I have now completed all the above tasks except excluding specific images from Smush (Last Message)
    and the CLS score of 0.28 has not changed.

    I will now try to disable the Logo being lazyloaded from the Smush CDN and see how that goes.

    Thank you

    #1626912
    Shane

    Hi Support, I have now disabled the Logo being lazyloaded from the Smush CDN.

    #1627315
    David
    Staff
    Customer Support

    Well thats a lot better – the CLS is well below where it was and is in the Green values.
    The minor CLS that is left, still looks related to the lazyloading.

    Open the site in Chrome, open the Dev Tools, and go to Network tab and switch from Online to Slow 3G – with dev tools still open, refresh the page or navigate some links…. you will see that some of the image placeholder sizes are incorrect, causing CLS when the image loads.

    #1627374
    Shane

    Hi David, Yes much better I am very happy with those results so far. I will take care of that task you have given me tomorrow. Thank you.

    #1627465
    David
    Staff
    Customer Support
    #1635109
    Shane

    Hi David, so I done that task, switched from online to slow 3G and refreshed the page, however, when I go back into the dev tools it still shows as online is this correct? thanks

    #1635408
    David
    Staff
    Customer Support

    You have to keep the Dev tools open when refreshing the page to keep the slow 3G connection.

    Closing the Dev tools will reset the connection to online.

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