- This topic has 3 replies, 2 voices, and was last updated 3 years, 10 months ago by
.
-
Posts
-
Hi GeneratePress team,
I’m trying to optimize my site for the web vitals that Google recently announced, and something is causing my Cumulative Layout Shift to be in the red.
From the looks of one of the reports (https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.trackinghappiness.com%2Fimportant-to-have-purpose-in-life%2F&tab=mobile) it seems that the logo in the mobile header is causing a layout shift when the page loads.
This image better explains the issue I think: https://i.imgur.com/jZxB3XG.png
I tried fixing it by defining the logo width and height in CSS, but it didn’t have any effect. Is there something I’m missing here?
Thanks in advance. 🙂
Lead Developer
Hi there,
It looks like it’s being lazy-loaded – what happens if you disable lazy loading for the logo only?
Let me know 🙂
That does the trick! I used code from this page (https://docs.wp-rocket.me/article/15-disabling-lazy-load-on-specific-images) in my child themes functions.php file and it now loads with a layout shift! Thanks Tom. 🙂
You’re welcome 🙂
- You must be logged in to reply to this topic.