Archived topic
Logo in header seems to be causing bad CLS performance in Pagespeed Insights
3 replies · Started by Hugo on June 14, 2020
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. :)
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 :)
