Optimizing CLS (Cumulative Layout Shift): Best practices for a stable layout

Cumulative Layout Shift (CLS) is one of Google's Core Web Vitals. It measures how stable the visuals are on your webpage. A high CLS score means that parts of your page move around unexpectedly, which can frustrate users. To provide a good user experience (UX), you should aim for a CLS score of 0.1 or less. CLS is crucial because it affects how users experience your page and influence your ranking on Google. A poor CLS score can lead to higher bounce rates and lower user satisfaction, impacting your SEO and overall business performance. In this article, we'll explain what causes layout shifts, how to measure them, and the best ways to minimize CLS for a stable, easy-to-use layout.

Source: web.dev

What is Cumulative Layout Shift?

Cumulative Layout Shift (CLS) is a key metric in web performance optimization. It measures how often and how much visible content moves around in the viewport while a page is loading. It’s a score that combines the size of the content that moves and the distance it moves. Layout shifts happen when things on your page change their position between frames. Layout shifts can be unexpected or expected. Unexpected shifts are bad for your CLS score because they make the page feel unstable. Expected shifts happen when users interact with the page, like clicking a button, and do not harm your CLS score. For example, if a user is reading an article and an ad suddenly loads at the top of the page, pushing all the content down, that’s an unexpected shift. This kind of instability frustrates users and leads to a poor user experience (UX). To provide a good experience, you should keep your CLS score below 0.1. If your score is above this value, you need to make changes to improve stability.

Why is CLS important?

CLS is directly related to user satisfaction. Unexpected shifts in content can be confusing and annoying, especially if users are trying to read or interact with a page. High CLS scores can lead to higher bounce rates, as users may leave your site in frustration. It can also hurt conversion rates if key elements like buttons or forms shift around, making it hard for users to complete their tasks. In addition to user experience (UX), CLS also plays a role in SEO strategy. Google uses CLS as part of its ranking algorithm, meaning that websites with better visual stability are more likely to rank higher in search results. This means that optimizing CLS can not only improve user satisfaction but also increase your visibility and organic traffic.

Best practices for CLS optimization:

To reduce CLS and make your layout stable, follow these best practices for optimizing website layout and achieving a stable layout design:

1. Defining Dimensions for Assets

a. Always Specify Dimensions for Media Elements

Set width and height for images, videos, and iframes. This way, the browser can leave enough space before these elements load, which prevents unexpected shifts.

b. Use the CSS aspect-ratio Property

The aspect-ratio property helps the browser keep the right amount of space for images and other media. This keeps content stable while it loads.

2. Dynamic Content Loading

a. Reserve Space for Dynamically Injected Content

For ads or other content that loads later, use placeholders or set a min-height to reserve space ahead of time. This keeps other elements from moving when new content appears.

b. Lazy Loading and Its Correct Application

Lazy loading is great for speeding up page load times, but it needs to be used correctly to avoid layout shifts. Always define dimensions for lazy-loaded images and videos to prevent unexpected movements when they load.

3. Managing Fonts properly

a. Optimize Font Loading

Web fonts can make text change size or shape, causing shifts. To avoid this:

i. Include important font CSS early so fonts load sooner.

ii. Use font-display: swap or font-display: optional to show fallback fonts until the main font is ready.

iii. Preload fonts using <link rel=preload>, so the browser can download them immediately.

b. Host Fonts Locally Hosting fonts on your server allows the browser to cache them better, reducing load time and the chance of layout shifts.

4. Avoiding Unexpected Layout Changes

a. Use CSS transform for Animations

Avoid animating properties like top, left, box-shadow, and box-sizing, as they can trigger re-layouts and cause layout shifts. Instead, use transform to translate, scale, rotate, or skew elements smoothly without affecting the overall layout. This keeps animations stable and prevents unnecessary shifts.

b. Ensure Pages Are Eligible for Back/Forward Cache (bfcache)

The back/forward cache allows pages to load instantly when users navigate back, which stops layout shifts from happening. Make sure your pages are compatible with this cache to keep the layout stable.

c. Use Placeholder Elements for Loading Content

Always use placeholder elements or skeleton screens for content that loads asynchronously. This helps reserve space in the layout and avoids shifting other elements when the actual content appears. This is especially important for banners, promotions, and notifications. d. Avoid Injecting New Elements Above Existing Content When dynamically adding new elements, avoid inserting them above existing content. Instead, add new elements below existing sections to avoid pushing content down and causing layout shifts.

Source: web.dev

Case Study: CLS Improvement in 6 Months

Challenge: An ecommerce client DeeZee struggled with a high CLS score of 0.46, causing layout instability, increased bounce rates, and poor SEO performance.

Hatimeria improved CLS by up to 96%.

Read the full case study on how Hatimeria boosted DeeZee's performance: here

Summary and key findings

Optimizing CLS is crucial for providing a stable layout design and enjoyable user experience (UX). In the Core Web Vitals strategy, CLS plays a key role in page stability metrics. Since Google uses Core Web Vitals as ranking factors, reducing CLS can lead to better search rankings and increased organic traffic. By setting dimensions for media, optimizing fonts, reserving space for dynamic content, and following these CLS best practices, you can reduce CLS and create a smooth browsing experience for your users. Aim for a CLS score of 0.1 or less, and keep making regular audits to ensure long-term stability and performance.

Improve your website’s stability, attract more traffic, enhance user satisfaction, and drive higher revenue - contact Hatimeria and see the results.