Archived topic
Header re-sizing on page load on mobile causing CLS issues
9 replies · Started by Joy on June 22, 2021
Hey GP Team,
I'm trying to get our Core Web Vitals into shape and our CLS is showing up issues on mobile specifically. I spoke to our advertising provider who said the following "it appears the header re-sizing on page load is what's triggering that remaining shift on page." And he provided a couple of screen shots showing how Google is noticing the navigation div gets pushed down when that area loads.
He suggested we "set up a min-height to that header image and that should take care of the remaining CLS across the board"
I was looking through the support forum and seems this might be relevant: https://generatepress.com/forums/topic/logo-does-not-have-explicit-width-and-height/#post-1762272
Should I add this code to fix the issue?
Note I am on the latest version of GP and I recently re-loaded our logo into the "customise", "site identity" section as I saw on one of your other forum posts that this could also be a fix for some CLS issue. I have asked Google to validate the update but that will take a while so just want to get ahead of it if there is anything else I need to do.
Thanks so much for the help.
Hi Joy,
The "Image elements do not have explicit width and height" flag on the logo has been addressed on the newest GP Premium version (2.0).
But for the fix to apply, you'll have to remove the logo and re-apply it so the attributes would be generated for it.
As for the other causes:
There's a lot going on within the site.
The low-hanging fruit that should be easy to address first is the images. Try reuploading a jpeg 2000 or jpeg xr or webp images or at least get the best possible compression for your images. This way, the images are served faster.
As for everything else:
It's mostly about the scripts from your plugins and other add-ons. Some of them are unused while some of them are duplicated. This is outside of the theme's control as the theme doesn't control how these things are added. For these, you'll have to do a process of elimination to see what you actually don't use anymore.
Thanks Elvin,
Yes I'm separately addressing the images and scripts so only concerned in this thread about the header resizing / navigation div. So just to confirm, if I deleted the old logo file and replaced it with a new logo file and I'm on the latest version of GP, this specific issue should be resolved, right?
Many thanks!
Joy
Yes I’m separately addressing the images and scripts so only concerned in this thread about the header resizing / navigation div. So just to confirm, if I deleted the old logo file and replaced it with a new logo file and I’m on the latest version of GP, this specific issue should be resolved, right?
Yes that should be the case. Unless you have a filter preventing this from working. :D
Cool thanks!
No problem. :D
Hi again Elvin,
Just checking in on this issue of "Image elements do not have explicit width and height" - I had replaced our logo after the last GP update and asked Google to validate the fix but as of today, Page Speed Insights is still showing this as an issue (even with our newly loaded logo which we loaded on 19 June after updating GP. Is there any other trick to fixing this issue or should I just try again?
Many thanks,
Joy
Can you try adding the PHP snippet Tom provided here?
https://generatepress.com/forums/topic/logo-does-not-have-explicit-width-and-height/#post-1762272
Here's how to add PHP. https://docs.generatepress.com/article/adding-php/
Let us know how it goes.
Ok will give it a shot, thanks!
No problem. Let us know if you need further help. :D
