Archived topic
Set an explicit width and height on image elements to reduce layout shifts
5 replies · Started by Robert on July 19, 2021
I looked at the 7 other posts first related to this but did not find the answer. I added my main photo on the home page via a new header. When I do the page speed test I get....
Set an explicit width and height on image elements to reduce layout shifts and improve CLS
How would I set that in the header?
Hi there,
I see you're using a Header Element for this page.
In this case, you'll have to manually write in the attributes to the img element as the <img> added to the Header Element's code is manually written.
Currently, you have <img src="https://bobbysfitness.com/wp-content/uploads/2020/12/New-Logo.jpg">,
You can write it this way:
<img src="https://bobbysfitness.com/wp-content/uploads/2020/12/New-Logo.jpg" width="1920" height="1080">
You can change 1920 and 1080 to your preferred size. :D
Thanks! When I do the Google speed test it still shows...Set an explicit width and height on image elements to reduce layout shifts and improve CLS.
Do have to do anything else other than adding it into the header element as I did?
Actually, it looks like it is gone now!!!!! Page speed went up! Thanks again
The same issue with the logo.
I set the width at 300px in
customize - site identity - logo width
but inspecting the element
shows as:
height: auto;
max-width: 100%;
How do I set the logo width and height?
Hi there,
can you raise a new topic where you can share a link to your site then we can take a look at the problem.
