CLS: How to Maintain Element Heights (Images, JS Components, Iframes…)

In this guide, discover why and how you need to ensure dimensions at the HTML or CSS level for elements that are asynchronously embedded in the page, such as <img>, <iframe>, or JavaScript components.

Properly preparing space for these elements helps you avoid unwanted page shifts, thereby preventing a deterioration in the Cumulative Layout Shift (CLS) metric, a part of the Core Web Vitals set.

Why Is It Important to Control Dimensions and Aspect Ratios?#

Every asynchronously loaded element on a page should have defined dimensions. This includes images, videos, iframes, or other web components.

When a page loads and the first content appears (the FCP event), the browser needs to have space allocated for this element before it can display it.

Let's delve into solutions for specific elements.

1. Images, IMG Elements#

A common issue with the CLS metric is missing dimensions for images. A browser knows nothing about an image until it is fully downloaded and displayed. If you specify the width and height parameters in the <img> tag, the browser will create the necessary space for the image.

<img src="image.webp" alt="…" width="1600" height="900" />

In the width and height attributes, it's best to specify the actual pixel dimensions of the image.

From these dimensions, the aspect ratio can also be calculated, making it work for images in responsive layouts. Whenever possible, always provide dimensions for images. This is especially crucial for images that are lazy-loaded and have the loading="lazy" parameter.

Sometimes, due to technical constraints, you might not be able to generate width and height parameters in HTML. This can be remedied with the CSS property aspect-ratio, which prepares space using the aspect ratio.

If you do not know the dimensions or aspect ratio of the images in advance, you can use the trick with automatic aspect ratio.

.wysiwyg img {
	aspect-ratio: auto 16 / 9;
}

This aspect-ratio setting ensures that each image is set with a 16/9 aspect ratio, but after the image is downloaded and rendered, the browser will respect the actual image ratio.

It's better to reserve some space than none at all.

An image without set dimensions first displays at the wrong height, then shifts content below it, causing a layout shift.

2. JavaScript Components on Your Site#

This could involve various calculators, image slideshow viewers, carousels with offers, and similar elements. It's possible that this element is not rendered immediately in the first render of the page, but its display is deferred, for example, by lazy loading or its content is asynchronously fetched through JavaScript.

Always reserve space for these elements in the layout in advance. For content loaded later via JavaScript, prepare space using the CSS properties aspect-ratio or min-height in your style sheet.

When the aspect ratio is known:

.box {
	aspect-ratio: 16 / 9;
}

When the aspect ratio is unknown, insert an estimated minimum height:

.box {
	min-height: 200px;
}

3. Third-Party JavaScript Components#

Typically, these are social plugins like Instagram, Facebook, TikTok, Google reviews, YouTube videos, etc.

These widgets often do not render immediately in the first render of the page, but their display is deferred just like the components mentioned in the previous section.

Always reserve space for these elements in the layout in advance. If you do not know either the aspect ratio or the exact dimensions, you can at least use the CSS property min-height to prepare a minimum height.

Check the display with a "typical post" and set the minimum height of this component accordingly. It's always better to prepare some space than none at all. You may not eliminate all layout shifts completely, but you will significantly reduce their impact on the CLS metric.

If you're using a Google review widget, prepare space for it on the page before the data loads.

Mini Case Study: Carousel from External Service on Datart#

Datart.cz managed to significantly improve unwanted layout shifts on their homepage in collaboration with PageSpeed.ONE. The problem was with a carousel loaded via the external service Bloomreach, which loaded after the first page render and shifted content below it.

The solution was relatively simple, but not easy to implement on the existing setup. We reserved space for the carousel using the CSS property min-height before it loaded. Thanks to this adjustment, the CLS value on the homepage decreased from 0.6 to 0.06, a tenfold improvement.

The graph shows the development of the CLS metric on the Datart homepage. The share of non-compliant measurements (red area) dropped from about two-thirds of page views to a minimum, while the share of compliant measurements (green area) rose to over 80%.

How to Test for Missing Dimensions or Aspect Ratios#

1. Local Measurement Using Chrome DevTools#

Using the Performance panel, you can monitor live changes to the CLS metric. The panel also explains the cause of the issue.

In this case, it is ideal to slow down the network in settings. This setting will quickly reveal images and components without dimensions since there will be a longer wait for resources.

2. Synthetic Tests with Lighthouse#

Synthetic tests with Lighthouse, which you can also create in our PLUS speed monitoring, will indicate which images lack dimensions and could potentially cause issues for the CLS metric.

The Lighthouse test result shows the impact of elements in the visible part of the screen on CLS.

Ensuring height or aspect ratio is among the basic methods to avoid unwanted page shifts and deterioration of the Cumulative Layout Shift (CLS) metric.

In our guide, you'll also find other methods for optimizing the CLS metric.