What Is Cumulative Layout Shift?

• Preload and Reserve Space

Identify the resources, such as images, videos, or scripts, that are causing layout shifts. Use browser developer tools or performance monitoring tools to identify the elements causing the CLS. Then, preload and reserve space for such resources as explained below.

Preload

Preloading allows you to fetch resources in advance, reducing the delay when needed. Add the preload attribute to the HTML tag to instruct the browser to fetch the resource early

e.g. <link rel=”preload” href=”path/to/resource” as=”type”>

Where type is the appropriate resource type, such as “image,” “video,” or “script,” and the path is the actual path to the resource.

Reserve Space

One common cause of layout shifts is the delayed rendering of content. To prevent this, reserve space for content elements before they are loaded. Use CSS to set explicit dimensions (width and height) or aspect ratios for images and videos. This ensures that the space required for these elements is allocated before loading them.

• Optimize Web Fonts

Web fonts can sometimes contribute to Cumulative Layout Shift (CLS) as they cause text to reflow when loaded. 

The font-display property allows you to control how web fonts are displayed during the loading process. By default, most browsers use a behavior called “auto,” which can result in text reflow and CLS. To improve CLS, set the font-display property to a value that ensures the text is visible while the web font is loading. The recommended value for CLS optimization is “swap”, which displays the fallback font until the web font is loaded.

e.g.

@font-face {

  font-family: ‘MyFont’;

  src: url(‘path/to/font.woff2’) format(‘woff2’);

  font-display: swap;

}

where “MyFont” is the actual font name and path is the directory path to the web font file.

When using web fonts, setting font sizes explicitly to avoid layout shifts caused by late font loading is essential. Specify font sizes in CSS using pixels (px) or another fixed unit instead of relying on relative units like percentages or ems, which can result in changes when the font is loaded.

For example, add the following CSS code to set a font size of 24 pixels for your H1s: 

h1 {

  font-size: 24px;

}

Optimize your font files by reducing their size without compromising quality. Tools like Font Squirrel, Transfonter, or FontForge can help you optimize font files by removing unnecessary data or converting them to more efficient formats like WOFF or WOFF2.

System fonts installed on users’ devices can render instantly, eliminating the need for loading web fonts. By specifying system fonts as the fallback option, you ensure that text is immediately visible while the web font is still loading. Use CSS to define a font stack with system fonts as the first option.

• Optimize Loading Order and Lazy Loading

Prioritize critical resource loading and load them before non-critical resources. Consider lazy loading of non-critical resources that are not immediately visible in the viewport.

• Delay Non-critical JavaScript Loading

Ordering the resource loading in your HTML or dynamically loading resources using JavaScript can be used to delay non-critical JavaScript loading

• Specify Image Dimensions

Specifying the image dimension can avoid layout shifts, thus providing you with better CLS values.

• Monitor Regularly

As CLS is for the lifespan of a webpage, you need to monitor it regularly and take necessary corrective action as and when required.