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

[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

[David]

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.

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

[David]

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.

[Scott]

Perfect, thanks!
Cumulative Layout Shift = 0 🙂

[David]

Glad to hear that!

[Mario Carvajal]

David… How should I use this snippet?

a) Should I upload the PHP file to somewhere?
b) Should I copy and paste in functions.php?

Thank you!

[David]

Hi there,

this article explains adding PHP:

https://docs.generatepress.com/article/adding-php/

TLDR: If you’re using a Child theme then you can add it to the Child theme functions.php, if you’re not using a Child Theme then install the Code Snippets plugin and add it to a new snippet.

[Mario Carvajal]

David, thank you so much!!! I get 0 in “Cumulative Layout Shift”. I am testing Dev Theme. I am very impressed by the great result, 98 in mobile diagnostic. Thank you!!!

[David]

You’re welcome!

[Author]

Posts