4 min
September 17, 2024
CLS Optimization in Practice
What is CLS?
Cumulative Layout Shift (CLS) is an indicator that has become essential in evaluating website performance. CLS is one of three Core Web Vitals metrics introduced by Google as part of an initiative to improve the overall quality of websites.
The goal of these metrics is to provide users with a better experience when browsing websites. CLS measures the visual stability of a page, meaning how often elements on a page move unexpectedly while loading.
This is very important because sudden shifts in the layout of elements can lead to user frustration and, in many cases, high bounce rates.
Listen to the audio version of this article.
Why is CLS important?
Imagine browsing a website, you want to click a button, and suddenly that button moves to the bottom of the page because an ad or image is loading. This situation is not only annoying, but can also lead to users accidentally clicking on something they didn't intend to. This can affect conversion rates, user satisfaction, and the perception of the site’s quality overall.
CLS is, therefore, a key indicator for measuring how visually stable a site is when it loads. The lower the CLS index, the better the user experience. Ideally, the CLS value should be as low as possible, preferably below 0.1. Values above 0.25 indicate serious problems with the visual stability of the site.
How to measure the CLS?
Measuring CLS is possible in several ways, but it is most convenient to do it directly in the Google Chrome browser This browser has developer tools that allow you to analyze site performance in real time. To measure CLS:
Open the developer tools in Google Chrome (Ctrl+Shift+I or F12)
Go to the “Performance” tab
Perform “Profiling and reload page” (Ctrl+Shift+E).
After loading the page, analyze the saved profile. There you will find the “Layout Shift” line, which shows where on the page there are shifts of elements.
With this information, you can quickly locate problem areas on the page and take action to improve the CLS index
The most common causes of high CLS
High CLS can result from a variety of problems related to page loading and rendering. Here are some of the most common causes:
Loading images without predefined dimensions. When images on a page do not have predefined dimensions (i.e. width and height), the browser has to adjust the layout of the page as the images are loaded, leading to shifting elements.
Injecting dynamic elements. Elements such as ads, banners or dynamic content added after the page loads can cause sudden changes in the page layout.
Loading fonts. Using fonts that are not properly optimized can cause text to shift during page loading, when the browser changes the default font to a downloaded font.
Loading asynchronous content. Page elements that are loaded after the main part of the page has loaded, can make changes to the layout, causing offsets.
Solving the CLS problem with images as an example
On our website, we encountered a problem related to unexpected content shifting caused by loading images that initially had a defined height of 0, and only after they were fully loaded did they adjust their height to the actual image size. This led to sudden shifts of elements on the page, which negatively affected the CLS indicator.
To solve this problem, we had to find a way to reserve enough space for the images before they were fully loaded, while making sure that the images maintained their aspect ratio, regardless of the screen size. To do this, we used the so-called padding-top hack.
Padding-Top Hack - How does it work?
Padding-top hack is a technique to set the height-to-width ratio of an image using the CSS padding-top property. This allows the browser to reserve space for the image from the very beginning, based on its aspect ratio, which prevents elements from shifting during loading.
An example implementation might look like the following:
<div class="cls-box">
<child-element class="cls-box-inside">
</div>
In the above example, we created a container for the image (cls-box), where we defined the aspect ratio of the image and style it so that it maintains its aspect ratio, regardless of the screen size:
CSS (Example)
.cls-box {
height: 0;
padding-top: calc(3/10 * 100%);
position: relative;
}
.cls-box-inside {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
In the code above, 3/10 is the aspect ratio (height/width) of the image, which we calculated based on the original dimensions of the image.
An example of using this approach in real life:
If we want to use this with the SCSS preprocessor then padding can be written differently using the value in pixels to calculate the ratio. It is then useful to specify the original size of the height and width, for example: padding-top: 3px/10px * 100%;
Other techniques for improving CLS
In addition to image-related techniques, there are several other ways to improve CLS:
Using local fonts
Instead of relying on fonts downloaded from external servers, which can cause delays in text rendering, local fonts can be used, which minimizes the risk of text shifting.
Set font-display: swap
The CSS font-display: swap property allows the browser to immediately display text using the default font, and then swap to the target font when it is downloaded. This prevents display and text offset issues.
Optimized content loading
Avoid dynamic content injection, which can cause sudden layout changes. Instead, loading asynchronous elements can be optimized so that they don't affect the main page layout.
Summary
Cumulative Layout Shift (CLS) measures those little jumps on a webpage when content unexpectedly shifts, causing you to click the wrong thing or lose your place. Keeping CLS low makes for a smoother browsing experience. Tools like padding-top hacks, local fonts, and optimized content loading help lock things into place, so elements stay where they should. Taming CLS not only makes a site feel polished and user-friendly, but it also keeps visitors engaged and happy, giving your site a boost in quality.
Listen to our podcast on this subject
