Improving Cumulative Layout Shift (CLS) for Better Page Experience

CLS revolves around the stability of a webpage and how predictable it is to use. All visible elements on a webpage such as images, text, and videos - form the layout. Whenever page contents alter, say due to ad insertions or image size modifications, existing elements might shift to accommodate the changes. These shifts are known as layout shifts.

CLS is measured as the percentage of the visible parts of a page that experience these layout shifts. For instance, if an image causes text on a page to shift down by 50% of the visible area, the CLS score would be 0.5 (50%).

There are a few important things to note about CLS:

• There can only be one CLS score for a page. If multiple layout shifts occur, they are accumulated into a single value.

• User interactions like tapping, clicking, or typing, are allotted a grace period of 500 milliseconds for potential layout shifts.

• Not all user interactions cause layout shifts; scrolling or mouse movements, for instance, aren't classified as layout shifts.

• CSS animations or transforms don't contribute to CLS as they don't impact other page elements' layout.

• CLS only accounts for visible elements; changes to non-visible elements don't influence the score.

An ideal CLS score is 0, implying no layout shifts. Realistically, achieving this perfect score isn't always feasible due to various constraints. Aiming for 75% or more of page views with a CLS score of 0.1 or below is a commendable target. Below this threshold indicates good performance, while anything above suggests areas for enhancement.

Measuring CLS involves accessing field data from real users. This data can be collected through your own analytics or through the Core Web Vitals report section of the Search Console. While Chrome User Experience Report (CrUX) determines the CLS score, it might take up to a month to collect and update the field data. In the interim, tools like Lighthouse or Chrome DevTools can provide lab data, which provides an estimate of how your page will perform in terms of CLS.

To gauge CLS post-launch, JavaScript and the Performance Observer API can track individual layout shifts and calculate CLS scores per user session. Utilizing resources like WebVitals.js aids in implementing CLS measurements on websites.

Elevating CLS involves addressing common triggers of layout shifts:

One common cause of layout shifts is images that don't have inline dimensions specified. When an image without a width or height attribute is loaded, it can cause the page content to jump once the image's dimensions are determined. It is best to explicitly include the width and height attributes for images to prevent this shift. Modern browsers automatically adjust the size based on aspect ratio, allowing for responsive design while preventing layout shifts.

Similar to images, iframes and embeds (such as ad slots or video players) can cause layout shifts if their dimensions are not explicitly specified. By setting explicit heights and widths for the parent element of iframes and embeds, you can reserve space for them and prevent layout shifts. Additionally, consider using the "overflow: hidden" CSS property to avoid unexpected overflow in the parent container.

If your website includes dynamically loaded content, such as infinite scrolling lists or lazy loaded images, it is essential to reserve space for this content with explicit dimensions. By setting explicit heights and widths, you can prevent layout shifts caused by the delayed loading of content.

Web fonts and icon fonts can also contribute to layout shifts. To mitigate this, consider using SVGs instead of icon fonts, as they provide greater design flexibility and fewer compatibility issues. For web fonts, optimize their loading by preloading essential fonts and using the "font-display: optional" CSS property to prioritize rendering the fallback font if the web font takes too long to load.

CLS stands as a pivotal metric for assessing webpage stability and user predictability. By addressing the causes of layout shift such as images, iframes, dynamic content, and fonts, website owners can enhance CLS scores, providing users with a smoother browsing experience. Aim for a CLS score of 0.1 or less for at least 75% of page views, continually measuring and refining your approach to ensure an optimized user experience.