CLS: what is it and why does it matter?
February 17, 2021
written by
Chantel Keith
what is CLS?
CLS stands for Cumulative Layout Shift and is defined by Google as “an important, user-centric metric for measuring visual stability because it helps quantify how often users experience unexpected layout shifts—a low CLS helps ensure that the page is delightful.”
If you’ve ever visited a website before and noticed the font changing within the first few milliseconds of it loading, this is a good example of CLS. Even worse, sometimes images can shift in size or entire sections of content will get pushed down or up on the page while it’s loading. This can produce unexpected results if the user is trying to click on a link or a button while the layout is shifting which is why the CLS metric is now used to quantify the user experience.
A screencast from web.dev showing how problematic CLS issues can be for users
why does a good CLS score matter?
CLS is one of three Core Web Vitals used to measure the quality of a web page’s experience along with LCP (Largest Contentful Paint) and FID (First Input Delay). Back in May of 2020, Google introduced these Core Web Vitals, which will soon become a search engine ranking factor in May of 2021. If Google can determine that your website is optimized to provide a good user experience, you’ll improve the likelihood of your website ranking higher up in search results.
CLS specifically focuses on the visual stability of a web page. This metric calculates how many elements unexpectedly change position during the user’s experience and how dramatic these shifts are which then results in a score ranging from 0.0 to 1.0 or more. A good CLS score is 0.1 or lower, which doesn’t leave much room for error. Additionally, CLS makes up 5% of your overall Lighthouse or PageSpeed Insights performance score so it could be the determining factor between whether your site scores a B or an A.
Fortunately, there are several techniques available to help lower your CLS score to keep your pages ranking high.
how to improve a website’s CLS score
images and SVGs
Images often get flagged in Lighthouse reports for causing large layout shifts if they do not have a set height of width and are dimensionless. This is a quick fix by adding a value in the image or SVG’s height and width attributes. For responsive images, simply utilize the srcset attribute instead or the CSS aspect ratio property.
fonts
Fonts also tend to cause problematic layout shifts when the fallback font is replaced with a new custom web font after its downloaded. To address this issue, you could find a web safe font whose size closely matches your custom font and adjust your CSS accordingly to ensure your fallback font takes up the exact same height as your custom font, although this is the most tedious solution. Alternatively, you can utilize <link rel=”preload’> to ensure your font files are prioritized during page rendering and things can be further improved by hosting the files locally and caching with a CDN.
animations
Certain animations can also cause your CLS score to increase. You can review this handy list of CSS triggers which explains how expensive each CSS property is in terms of performance and what operation requirements each property has. You’ll want to steer clear of any animations that cause the browser to perform layout operations as these can result in layout shifts and opt for animations like transform or opacity.
Before focusing on improving CLS, it may be helpful to address any other performance issues i.e. the Largest Contentful Paint or the First Input Delay indicators. It’s much easier to improve your CLS score if the other metrics of your website’s performance are also optimized. If font resources and other above the fold resources are able to be loaded during the first paint, no layout shifting will occur.