Ways to fix Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) is one of the Core Web Vital factors. It is used to measure the shifts in a page as the new content (images, ads & more) is shown later than the rest of the page. These shifts can move the content that you may be reading or you may click on a wrong link. CLS is all about measuring the unexpected shifts in a page. Shifts caused by user interactions are not considered.

CLS is measured throughout the lifetime of a page and is a unitless output. A CLS score of below 0.1 is required to pass and a score of above 0.25 is considered poor. Use tools like Lighthouse to measure CLS.

2. Use the new CSS property ‘aspect-ratio’ to calculate the height for the responsive images. This is supported by Chromium based browsers and FireFox. If you do not use ‘aspect-ratio’ then the browser will use the default aspect-ratio of 2:1. Using this property you can avoid a layout shift.

3. For those elements that need a fixed height you can use the ‘min-height’. For example, you can use it for fixed headers. As the height usually causes the shift issues.

5. Web fonts can cause CLS issues. The browser first calculates the space needed based on the fallback font and then recalculates it when the web font is downloaded. You should use a similar sized fallback font to avoid any CLS issues. To avoid such issues you need not use web fonts at all and use system fonts instead.

You can use ‘font-display: optional’ to not use them if not downloaded in time for the initial render.

Another option is to make sure the sections are appropriately sized by using ‘min-height’. This way only the text in them may shift but the content below will not be pushed down. The content will not shift down even if slightly larger fonts are loaded (different fonts cannot cause a different number of lines). This will help to reduce CLS.

This issue can also be solved by using the new CSS font descriptors. They allow you to adjust the fallback fonts easily in CSS.

7. You should improve your HTTP response as it can also cause issues with content layout. If you use a CDN then it can take some milliseconds to load the elements. This can cause the content to jump. This can be fixed by building a space in DOM or by synchronising the loading with the other elements.

8. While displaying UI at the top or the bottom of the page to avoid layout shift you should reserve space in the viewport for it in advance. You can also try using skeleton UI so that once it loads it does not move the page content.