Archived topic
Core web vitals - size for page hero image
3 replies · Started by mkjj on April 8, 2021
While I'm really not a big fan of Google lighthouse and core web vitals, layout shift seems to very important. A shifting layout is a nuissance. One way to avoid this it to use dimensions for the images. So, the browser can calulate the room needed, even if the image ist still loading. How can we apply this to the background image of an header element? I'm not really sure whether this is an issue at all. I tested a site setting throttling to slow 3G, and I couldn't see a significant layout shift.
Hi there,
background images are a CSS property of the container - they will never affect the size of their parent element or its contents and therefore will never contribute to CLS.
Ah, of course. Thanks for the input. I forgot that I set a padding-top as a percentage to give the container a height. So, the dimensions of the container are already defined even before loading the background image. Pretty dumb question. :-))
No problems :)
