Archived topic
Set an explicit width and height on image for logo
15 replies · Started by Heidi on April 7, 2021
I need to Set an explicit width and height on image elements to reduce layout shifts and improve CLS.
The failing element is the logo.
I have read through solutions on other posts and installed the Code Snippets plugin and copied/pasted the PHP (updating the width/height).
But, the speed test still gives the same error.
And with the Code Snippet set to Run snippet everywhere, the Total Blocking Time goes up. And still have the same error for the CLS.
Can you please advise?
Thank you!
Hi there,
Any chance you can link us to the site in question?
You can use the private information field.
Let me know :)
ok. I will send in the private information.
any chance a theme update is coming out soon for this issue?
Can you try switching the theme structure from Float to Flex under Customizer > General?
I just tried Flex and I could see elements shifting from left to right (or maybe right to left), which seems like would be another CLS problem, so I changed it back to Floats.
Hmm that shouldn't happen. Which elements are you referring to?
Can you change it so I can see?
I have it switched to Flex now.
The blog content and side bar jump around from right to left (and left to right).
I just checked the "Post Title Removed" post but not seeing the issue at all.
did you try it in Chrome? that is where I am seeing it, but maybe I need to clear my cache or something? It's not happening in FireFox or Edge.
The change also seems to break the mobile page score, if you run it through https://developers.google.com/speed/pagespeed/insights/. the mobile score was 100, and drops to 41.
Yup I was using Chrome.
Flexbox is the newer/better version so it shouldn't cause any issues like that.
If you prefer to stick with float then you will need this PHP snippet:
https://docs.generatepress.com/article/generate_logo_output/#setting-a-width-and-height
Just edit the width and height numbers.
I will try Flexbox then, since you do not see the issue and will assume it's my cache.
Does the snippet fix both mobile and desktop? In the Code Snippets options, do I choose "Run snippet everywhere?
is this the ONLY snippet I need (I had copied/pasted another one before contacting support).
Also, I cleared my chrome cache and I still see the blog content/sidebar shift when the page loads. if I record my screen is there a way to share the recording with you?
If you are using the Flexbox version then the snippet is not needed.
A screen recording doesn't really help for problems like these unfortunately.
What if you use incognito mode?
I doubt this is a theme issue as it doesn't happen across all browsers.
The next step would be to disable all plugins except GP Premium and see if that helps with the issue.
okay. thanks. the problem does happen in incognito mode as well. it seems odd though that it's just happening to me, so I guess will try the plugin idea later (or tomorrow).
