- This topic has 9 replies, 3 voices, and was last updated 2 months, 2 weeks ago by David.
June 23, 2020 at 7:32 pm #1339614Scott
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.
ScottJune 24, 2020 at 2:50 am #1339902DavidStaffCustomer Support
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.June 24, 2020 at 7:11 pm #1340857Scott
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?June 25, 2020 at 4:07 am #1341205DavidStaffCustomer Support
Use the PHP Snippet that WP Rocket provides here under Example 2: Exclude an image based on its filename
Let us know.June 25, 2020 at 5:04 pm #1342062Scott
Cumulative Layout Shift = 0 🙂June 26, 2020 at 12:44 am #1342284DavidStaffCustomer SupportNovember 5, 2020 at 11:25 pm #1519989Mario 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!November 6, 2020 at 5:10 am #1520280DavidStaffCustomer Support
this article explains 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.November 6, 2020 at 10:44 am #1520920Mario 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!!!November 6, 2020 at 3:05 pm #1521142
- You must be logged in to reply to this topic.