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.
These are ways to fix and optimise your CLS issues:
1. Make sure to set the ‘width’ and the ‘height’ attributes for all your images. If you do not use them then the image may cause a shift in the content to make way for it after it downloads. Adding these attributes can help to reduce the CLS.
Use Chrome DevTool to get the dimensions of an image. Use the intrinsic size that is the actual size of the image.
If you use responsive images and use CSS to change the image dimensions then you can use these attributes to calculate the height.
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.
6. Biggest cause of the layout shifts are the ads. Ads can push the visible content that you are viewing and cause a poor user experience. To fix this you can reserve space statically for the ads. You should style the item before you load the ad tag library.
When you put ads in the content flow you should allocate the slot size to avoid layout shifts. If they are loaded off-screen then they will not cause any shift.
If a placeholder does not show any ad even when the ad slot is available do not collapse the allocated space.
Reserve the ad slots for the widest possible duration to avoid layout shifts. You should use historical data while selecting the most likely size for an ad slot.
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.