What is Cumulative Layout Shift (CLS) and how can it be minimized?

Story Based Question

You’re working on a local news website where users are reading articles on their smartphones. Many of them complain about the page jumping around as the page loads, especially when they try to tap on a link or read a headline. This movement is frustrating, and they end up leaving the site early. After checking your Core Web Vitals, you notice that Cumulative Layout Shift (CLS) is a big issue. What is CLS, and how can you minimize it to improve user experience and keep visitors on your site longer?

Exact Answer

Cumulative Layout Shift (CLS) measures unexpected layout shifts in a page as it loads. It happens when visible elements move around unexpectedly, making it hard for users to interact with the content. To minimize CLS, ensure that images, ads, and other elements have set dimensions and that fonts are loaded properly before rendering.

Explanation

Cumulative Layout Shift (CLS) is one of the Core Web Vitals that affects user experience. It refers to the visual instability that occurs when elements on a page shift or move while it is loading. This can be frustrating for users, as it often leads to them accidentally clicking on the wrong link or button.

Why CLS is Important:

• A high CLS score (anything above 0.1) signals to Google that the page has unstable content. This can make the website harder to interact with, leading to a poor user experience.
• Google uses CLS as a ranking factor because it directly impacts user satisfaction. Websites with low CLS are rewarded with higher rankings and better visibility in search results.

How to Minimize CLS:

Minimizing CLS involves addressing the elements on your page that might unexpectedly shift or change their position as the page loads. Here’s how you can reduce CLS:

1. Set Dimensions for Images and Videos

• Why: When the dimensions of images or videos aren’t specified in the code, the browser doesn’t know how much space to allocate, causing them to shift the layout when they load.
• What to Do: Always define the width and height attributes for images and videos. If you’re using responsive images, ensure that the aspect ratio is preserved.
• Example: On your news website, if an image in an article is loaded but its dimensions aren’t specified, it may shift the headline and cause unexpected layout movement. By setting the dimensions (e.g., width="600" height="400"), you prevent the page from shifting when the image loads.

2. Avoid Layout Shifts Caused by Fonts

• Why: Fonts can cause CLS when they load after the text has already been rendered. The browser may initially display a fallback font, then swap to the correct font when it’s loaded, causing the text to move.
• What to Do: Use font-display: swap in your CSS to ensure that fallback fonts are used until the custom font is loaded.
• Example: If a headline on your news website jumps when the custom font loads, using font-display: swap ensures the text is rendered with the fallback font first and then smoothly swaps to the correct font without shifting.

3. Use Stable Ad Sizes

• Why: Ads can often load after the main content, shifting everything around when they appear. Ads with varying sizes can cause content to unexpectedly move.
• What to Do: Define stable ad sizes or use ads with fixed dimensions so that they don’t push content down or change the layout when they load.
• Example: If you have a banner ad on your news website, ensure it has a fixed size in your CSS (e.g., width: 728px; height: 90px;). This ensures that when the ad loads, it doesn’t shift the content down or cause other elements to move.

4. Ensure Proper Loading of Fonts and Web Elements

• Why: As elements like fonts or icons load, they can cause content to shift. This happens when web fonts or icons are being loaded late.
• What to Do: Use font loading strategies and make sure web fonts are preloaded properly. Use tools like Web Font Loader to control how fonts load.
• Example: If your news website uses custom icons for navigation or social sharing buttons, make sure they load quickly and don’t push around other elements when they appear.

5. Minimize Dynamic Content Changes

• Why: Dynamic content such as live chat widgets, notifications, or form pop-ups can suddenly appear, causing elements to shift unexpectedly.
• What to Do: Set up space for dynamic content in advance or use CSS animations to smoothly integrate these elements without shifting other content.
• Example: If you have a live chat widget that pops up on your news site, make sure it doesn’t cover text or buttons. You can use CSS to animate the widget so it smoothly slides in from the bottom instead of abruptly appearing.

Example

Let’s go back to your news website and the CLS problem. Here’s how applying these optimizations might help:

1. Setting Image Dimensions:

You have an image in your news article about the latest global events. Without defining its dimensions in the HTML or CSS, the image loads, causing the headline and article text to shift downward once it fully appears. This leads to frustration as users accidentally tap the wrong part of the page.

• Solution: You add the dimensions of the image to your CSS (e.g., width="600" height="400"). Now, when the page loads, the layout stays in place, and the image fits into the designated area without causing any jumps.

2. Preventing Font Shifts:

The headline on your article loads with a fallback font before switching to your custom headline font. The text shifts slightly as it swaps, which disturbs the flow for users.

• Solution: By using font-display: swap in your CSS, the fallback font is displayed immediately, and the custom font appears smoothly once it’s fully loaded, without any noticeable shifts.

3. Stabilizing Ads:

You have a banner ad at the top of the page. Sometimes, when the ad loads, it pushes your content down, causing the layout to shift.

• Solution: You set fixed dimensions for the banner ad (e.g., width: 728px; height: 90px;) so that it doesn’t push other content around when it appears. Now, the ad loads without affecting the layout.

By making these adjustments, you notice that visitors to your site stop complaining about jumping content. As the page loads smoothly, they engage more with the articles, leading to better user experience and higher rankings in search results.

Cumulative Layout Shift (CLS) can seriously hinder user experience and SEO performance. By setting image dimensions, controlling font loading, stabilizing ads, and minimizing dynamic content shifts, you can drastically reduce CLS and improve both user engagement and search rankings. Small fixes lead to big improvements in how users interact with your content.