4 min
September 17, 2024
CLS optimization in practice
What is CLS?
Cumulative Layout Shift (CLS) is an indicator that has become extremely important in the context of evaluating website performance. CLS is one of three Core Web Vitals indicators introduced by Google as part of an initiative to improve the 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, which means how often elements on a page move unexpectedly while loading. This is extremely important because sudden shifts in the layout of elements can lead to user frustration and, in extreme cases, abandonment of further use of the site.
Listen to the audio version of this article.
Why is CLS important?
Imagine browsing a website, wanting to click on a button, and suddenly that button moves to the bottom of the page because an ad or image is loading. This type of situation is not only annoying, but can lead to users accidentally clicking on something they didn't intend to click on. This can affect conversions, user satisfaction and the perception of site quality in general.
CLS is therefore a key indicator to measure 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 (e.g., 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 asynchronously (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 create a container for the image (cls-box), where we define 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 calculate 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 is an indicator that can have a significant impact on the quality of a user's experience on a website. Understanding how CLS works, how to measure it and how to minimize its impact is crucial for anyone involved in web development. Through the right techniques, such as padding-top hacks, local fonts or optimized content loading, you can significantly improve the CLS indicator and ultimately increase user satisfaction and site effectiveness.
