Reduce CLS with placeholder image for dynamic heros

Design help General
1

Hi there,

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.

Has anyone solved this problem in Webflow?

Here is a gif of the problem:
af1761ef-7721-477a-b9aa-562cc6e578bc

Here is my site: https://www.postsnap.com

2

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.

1 Like
3

Hi,

I totally understand the issue you’re facing with Cumulative Layout Shift (CLS) for the dynamic hero image. It can be frustrating, especially when you’re trying to optimize your site’s performance for Google. Fortunately, there’s a simple solution that will allow you to set a placeholder image while the hero image is loading, even with the dynamic sizing based on the device.

Use Aspect Ratio for Placeholder Image

To prevent the layout shift, you can create a placeholder element with a set aspect ratio that will maintain the same space on the page while the dynamic hero image loads. This approach ensures that the layout stays consistent, even on different screen sizes.

Step-by-Step Solution with Code:

Use a div block to act as a placeholder, but instead of giving it a fixed size, we’ll use a CSS aspect ratio so that it scales responsively based on the hero image’s aspect ratio.

Since your hero image is dynamically sized, use the padding-top trick to control the aspect ratio. This method works by setting the padding to a percentage value, which makes the div block responsive.

Hero Image

.hero-placeholder {

width: 100%; /* Make the placeholder responsive */

padding-top: 56.25%; /* 16:9 aspect ratio (adjust to your image’s aspect ratio) */

background-color: #f0f0f0; /* Set a background color for the placeholder */

}

.hero-image {

width: 100%;

height: auto;

display: block;

}

After applying these changes, be sure to check your site’s performance again on Google PageSpeed Insights to see the impact on CLS score.

Alternatively, if you don’t want to spend too much time on optimization, you can try our Website Speedy tool, which offers a 14-day free trial. It automatically handles the optimization for you, saving you time and effort.

(Disclaimer: We are the developers of this tool and are happy to answer any questions you may have.)