[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
  • #1339614

    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.


    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.


    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.


    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.

    < 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?

    Customer Support

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


    Let us know.


    Perfect, thanks!
    Cumulative Layout Shift = 0 🙂

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