I am trying to reduce the cumulative layout shift for the hero image on my site. The issue occurs because the image loads in after the rest of the page. Google ranks on performance so we want to improve this score.
A common solution to this is to add an empty div that is the exact height and width of the image.
The problem here is that the hero image for this page is dynamically sized based on the device.
For hero images specifically, I usually fix the container size, and then use object-fit, or WEBP background images for the image content. You can make that container size vary across breakpoints, so that on mobile it has a taller, narrower aspect.
Since the frame size is fixed, layout shifts don’t happen.
Just be aware that in this approach the edges of the image will crop depending on the layout, so if you want text, overlay it rather than making it part of the image itself.
