Web Vitals: What is Cumulative Layout Shift?

It measures page visual stability

Cumulative Layout Shift, or 'CLS', measures visual stability of a page.

CLS is a metric which combines the sum total of every unexpected layout shift during the life span of the page.

A layout shift occurs any time a visible element changes it position from one rendered from to the next.

If you've ever been reading a news article only for the section you're reading to suddenly be pushed down the page, this is a layout shift. Often caused by poorly handled ads or page elements which are resized later in the page lifecycle. Its an extremely frustrating issue and this is why Google uses this user-centric metric and visual stability as a Core Web Vital metric.

How is Cumulative Layout Shift calculated?

CLS is a combination of all individual layout shift scores. To calculate the layout shift score, the browser looks at the viewport size and the position change of unstable elements within the viewport, between rendered frames. Using two measures of that movement: the impact fraction and the distance fraction.

layout shift score = impact fraction * distance fraction

This example from web.dev shows how frustrating + dangerous CLS can be:

Screencast from web.dev/cls illustrating how layout instability can negatively affect users.

What is cumulative layout shift target?

To provide users a good experience, you should aim for a cumulative layout shift score of 0.1 or less.

Cumulative Layout Shift: Google Scoring Ranges

My cumulative layout shift score is above 0.1 is this OK?

If your CLS score is above 0.1 then Google will label the scoring as Needs improvement and if its above 0.25 then it will be labeled Poor. You should try and ensure the score is below 0.1 in order to pass the Core Web Metrics scoring. Google suggests the 75th percentile of page loads, segmented across all devices as a good threshold.

If you're worried about how your cumulative layout shift (CLS) scores will impact your search rankings, then use our speed comparison tool to check how other websites ranking for your target keywords / vertical measure up.

How can I optimize cumulative layout shift score?

Cumulative layout shift can be difficult to optimize and requires technical work (a developer) to fix.

Reserve space for third-party advertisements

If you're using an ad tool like Google AdSense, its likely this will be having an impact on your CLS score. Because they are loaded with JavaScript they are one of the biggest contributors to cumulative layout shift.

You can resolve this issue by ensuring ad elements are wrapped in a containing element which is set to the height/width at which the ad is shown.

For example if you're using a medium rectangle ad which is 300px x 250px, wrap this ad in a <div> with its width and height set to these values using CSS. Now rather than suddenly pushing content down, the user will instead see an empty white space where the ad will load. This removes the layout shift caused when the ad is loaded into the page.

Set image dimensions

Images without their width and height site can cause layout shifts because the browser doesn't know at what size they need to be. With responsive web design many developers stopped using the old width="xpx" height="Ypx" method and started using pure CSS to size images, but this can cause massive layout shifts - especially with large images.

You can resolve this by specifically adding width and height attributes to images. and if you're thinking well my image is 1000px on desktop and varies greatly on mobile devices, how to I provide dynamic sizing??? You don't need to worry, so long as the browser knows the width + height it can calculate the image aspect ratio and CLS is resolved.

Optimize font loading strategy

If you're using custom web fonts (like those found on Google Fonts) the browser will need to load the font and then based on the page's CSS apply the font to various content, this can cause 'flash of invisible text' (FOIT) and 'flash of unstyled text' (FOUT), theres a few things you can do to optimize your font loading strategy:

  1. Preload critical font - preloading will ensure the font is available as quickly as possible which eliminates chances of FIOT/FOUT. You must be careful with preloading as if you preload too many files you can slow the overall load time of your site
<link rel="preload" as="font" href="https://example.com/fonts/my-font.woff2">
  1. Use modern font formats

There is lots of different formats which web fonts can be loaded, the most common being:

  • OTT: OpenType Font
  • EOT: Embedded Open Type Font
  • TTF: TrueType Font
  • SVG: SVG Font
  • WOFF / WOFF2: Web Open Font Format Font

Most sites will already be using WOFF format which is better compressed than OTT, EOT, TTF and SVG formats and results in smaller font file sizes.

But the latest format; WOFF2 has even higher compression than original WOFF format, resulting in an average of around 30% small files, and should always be used where possible.

Most modern sites (unless supporting very old browsers) only require fonts in WOFF + WOFF2 format which covers all modern browsers and down to IE9.

@font-face {
  font-family: 'MyFont';
  src: url('path/filename.woff2') format('woff2'), 
    url('path/filename.woff') format('woff');
}
  1. Self-host fonts

If you're using a service such as Google Fonts, then you are not hosting your fonts locally, this means the browser needs to download fonts from a third-party server, and requires additional time for things like DNS handover.

By downloading fonts from Google Fonts, and hosting them on your server you remove the need for this and this often leads to faster font downloads.

Category: Web Vitals
Published:
Nick McBurney - Founder of SERPFast.com
Author: Nick McBurney

Founder of SERPFast.com and Lead Frontend Developer with a passion for site speed.