[Resolved] Core Web Vitals – Cumulative Layout Shift (CLS) – Header/Navigation

Home Forums Support Core Web Vitals – Cumulative Layout Shift (CLS) – Header/Navigation

  • This topic has 5 replies, 2 voices, and was last updated 3 months ago by David.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1339614
    Scott

    Hi team

    I’m trying to diagnose an issue with the Core Web Vitals measurement Cumulative Layout Shift (CLS)
    – all 200+ URLs failed in GSC for both mobile and desktop.

    When running the URLs in Pagespeed Insights, under the “Lab Data” header you can see the snapshots of the screen loading. Looking at this for mobile, the header/navigation is double-height for the majority of the load. It’s not until the final screen when the header halves in height to become the correct height.

    https://developers.google.com/speed/pagespeed/insights/

    Do you know why this is? You can also observe this with the naked eye when watching the page load. I imagine this is contributing negatively to the CLS metric.

    Something similar occurs on desktop but it’s not as noticeable.

    Thanks
    Scott

    #1339902
    David
    Staff
    Customer Support

    Hi there,

    the shift you’re seeing is caused by the placeholder your lazy loader is adding.

    Most lazy loaders have an option to exclude images by their filename ( or other method ) apply this to your logo image to fix the issue.

    #1340857
    Scott

    Hi David

    Thanks for the reply.

    I’m using WP-Rocket for Lazy loading.

    This is what they say about disabling LazyLoad on an image:

    If you want to disable LazyLoad on a specific image, you can do so by adding either:

    – the data-skip-lazy attribute
    – or the skip-lazy class
    to the img HTML tag.

    Examples:
    < img src=”my-image.jpg” data-skip-lazy=”” alt=”” width=”100″ width=”100″ />
    < img src=”my-image.jpg” class=”skip-lazy” alt=”” width=”100″ width=”100″ />

    How would I go about adding the HTML to my logo image?

    #1341205
    David
    Staff
    Customer Support

    Use the PHP Snippet that WP Rocket provides here under Example 2: Exclude an image based on its filename

    https://docs.wp-rocket.me/article/15-disabling-lazy-load-on-specific-images

    Let us know.

    #1342062
    Scott

    Perfect, thanks!
    Cumulative Layout Shift = 0 🙂

    #1342284
    David
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.