Cumulative Layout Shift: What It Is & How to Improve Your Score

What Is Cumulative Layout Shift (CLS)?

Cumulative Layout Shift (CLS) measures the ocular stableness of your webpage’s contented arsenic a idiosyncratic views it. This metric takes into relationship unexpected question of elements successful the viewport arsenic the leafage loads.

These kinds of layout shifts tin frustrate users due to the fact that they hap without warning. Making for a mediocre idiosyncratic experience. 

For example, ideate you’re looking to bargain caller shoes, truthful you sojourn a merchandise leafage for a brace you like. The leafage begins to load, and you cognize you privation the brace truthful you spell to click oregon pat the bargain button. 

But past an advertisement loads astatine the apical of the screen, and the bargain fastener shifts down. Just arsenic you were astir to click it. So you extremity up clicking connected the advertisement instead.

That's an unexpected layout shift.

CLS is lone acrophobic with unexpected layout shifts supra the fold. Layout shifts that hap extracurricular of the viewport are not factored into your CLS score.

Cumulative Layout Shift is 1 of Google’s Core Web Vitals (CWVs). These are metrics Google uses to measurement your website’s idiosyncratic experience. 

Besides CLS, determination are 2 different Core Web Vitals:

• Largest Contentful Paint (LCP): Measures your page’s perceived load speed
• Interaction to Next Paint (INP): Assesses however responsive your leafage is

Core Web Vitals are leafage acquisition signals that tin impact your rankings. So, adhering to Google’s recommendations successful enactment with bully CWV scores tin pb to amended show successful hunt results.

For CLS specifically, that mostly involves limiting the fig and grade of shifts of antithetic elements connected the page.

How to Measure Cumulative Layout Shift

There are a fewer ways to measurement your Cumulative Layout Shift score:

Google’s PageSpeed Insights

PageSpeed Insights analyzes your website’s CLS connected some mobile and desktop.

To find your score, simply input your website’s URL (or a circumstantial leafage you privation to test) successful the instrumentality and click the “Analyze” button.

You’ll spot a study of your CLS show and different Core Web Vitals.

Scroll down to the “Diagnostics” conception and prime the “CLS” filter to spot recommendations specifically regarding Cumulative Layout Shift.

Note that PageSpeed Insights tin lone analyse one leafage astatine a time.

You tin besides usage Lighthouse wrong Chrome’s DevTools. Bear successful caput that this information whitethorn supply somewhat antithetic results. But you tin entree it without leaving the leafage you’re looking to analyze.

Just close click anyplace connected the leafage and prime “Inspect” (or usage Ctrl+Shift+I connected Windows, oregon Cmd+Option+I connected Mac). 

In the model that appears, click the “Lighthouse” tab. Change immoderate applicable settings and click “Analyze leafage load.”

You’ll past spot a akin acceptable of results arsenic you would successful PageSpeed Insights. 

As with the PageSpeed Insights tool, you tin lone usage Lighthouse to analyse 1 leafage astatine a time.

Semrush’s Site Audit Tool

Semrush’s Site Audit instrumentality lets you cheque your Cumulative Layout Shift people for aggregate website pages astatine once.

Simply participate your domain name, and click the “Start Audit” button.

Then, configure the tool’s settings according to your preferences. And click connected “Start Site Audit” to make your report.

In the “Thematic Reports” widget, click “View details” nether “Core Web Vitals.”

Scroll down to spot an overview of your Cumulative Layout Shift scores.

Click connected an contented nether the “Top Improvements” country to get much accusation and recommendations. The instrumentality besides shows the fig of pages each contented affects.

Scroll down to the “Analyzed Pages” array to spot which pages Site Audit analyzed for your Core Web Vitals. Click “Edit list” and adhd up to 10 pages you privation to analyze. 

The changes volition travel into effect erstwhile you tally the audit again.

What Is a Good CLS Score?

A bully CLS people is 0.1 oregon lower. This means your layout remains unchangeable arsenic it loads. So, visitors tin easy read, click, and interact with your contented without unexpected shifts disrupting their experience.

Here’s the show scale:

Your Cumulative Layout Shift people is simply a measurement of the largest burst of layout displacement scores for unexpected layout shifts arsenic your leafage loads. And layout displacement shift scores are made up of 2 components:

1. Impact fraction
2. Distance fraction

Where:

Layout shift score = impact fraction x distance fraction

This means that the larger the elements that displacement and the further they shift, the higher your CLS people volition be. Likewise, tons of layout shifts of immoderate magnitude that hap successful speedy succession volition pb to higher CLS scores.

Common Issues That Cause a Poor CLS Score

Images Without Dimensions

When you adhd images to your webpage without specifying their width and height, the browser doesn't cognize however overmuch abstraction to allocate until they decorativeness loading. This tin origin different elements connected the leafage to displacement unexpectedly.

Imagine you click connected a nexus to a blog post. The rubric and substance load in, and conscionable arsenic you commencement reading, each the substance shifts down due to the fact that a ample representation loads beneath the rubric but supra the assemblage text. This is an unexpected layout displacement owed to the creator not specifying representation dimensions.

Ads, Embeds, and iFrames Without Dimensions

Ads, embeds, and iframes without acceptable dimensions tin besides origin layout shifts. These elements tin propulsion contented astir arsenic they load, starring to a mediocre idiosyncratic experience.

This is communal with third-party ads successful particular. As you whitethorn person constricted power implicit the sizes of ads your web inserts into your content.

Dynamically Injected Content

When you dynamically adhd contented (like a banner of related posts oregon a signifier widget) to a leafage without archetypal relying connected idiosyncratic interaction, you tin origin unexpected layout shifts.

Dynamically added contented tin include:

• Images oregon videos that load successful effect to idiosyncratic actions
• Banners that look aft a definite magnitude of clip connected the page
• Ads that look arsenic you scroll
• Social media feeds that load much posts automatically
• Comment sections that expand

When dynamically injected contented appears successful a mode that pushes different elements astir connected the page, it results successful unexpected layout shifts. Affecting your CLS score.

Web Fonts Causing FOIT/FOUT

Flash of Invisible Text (FOIT) and Flash of Unstyled Text (FOUT) tin hap erstwhile customized web fonts load. With FOIT, the substance is invisible until the main font loads. But the abstraction taken up is based connected the fallback font (which whitethorn beryllium styled otherwise to the font you privation to show), meaning the layout tin shift.

While FOUT shows substance successful a fallback font and past switches to the web font erstwhile it loads. If the 2 fonts are sufficiently antithetic successful style, it tin impact the layout of different elements.

Improperly Implemented Animations

Certain CSS properties tin pb to unexpected layout shifts if you don’t usage them correctly. Typically, these are properties similar “box-shadow” and “box-sizing,” on with “top” and “left.”

Some properties tin trigger a re-layout of a page. While others tin pb to layout shifts adjacent if the constituent that shifts is connected its ain layer.

How to Improve Your Cumulative Layout Shift Score

Improving your CLS people tin supply users with a amended experience. And it could power your rankings too. Here are a fewer ways to bash this:

Specify Image Dimensions

Always acceptable width and tallness attributes for your images, video embeds, and different media. This tells the browser however overmuch abstraction to reserve for these elements.

Defining these dimensions lets the browser allocate abstraction successful the papers layout before the representation oregon video afloat loads. Minimizing unexpected layout shifts. 

Let’s accidental you adhd a website banner for desktop users. If the banner’s representation dimensions are 1200 x 400 pixels, adhd the codification beneath to your website HTML code:

<img src="banner.jpg" width="1200" height="400" alt="Example banner image.">

Use CSS Aspect Ratio Boxes

Implement facet ratio boxes successful your CSS to support the aforesaid width-to-height ratio careless of surface size. This ensures your contented scales without layout shifts. Ideal for mobile responsiveness.

Aspect ratio boxes enactment by creating a instrumentality with a predefined size ratio. This prevents the contented from expanding oregon contracting successful a mode that could displacement different leafage elements.

To make a responsive facet ratio container for a video, you could usage thing similar this:

.video-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

The supra codification keeps your video successful a designated country of your webpage and maintains its due shape. It won't displacement oregon origin layout changes arsenic your leafage loads. 

A much modern attack (on modern browsers that enactment it) would beryllium thing similar this:

.video-container {
aspect-ratio: 16 / 9;
width: 100%;
}
.video-container iframe {
width: 100%;
height: 100%;
}

Reserve Space for Dynamic Content

Anticipate and reserve abstraction for dynamic contented similar ads to forestall them from pushing contented astir erstwhile they load. When the dynamic contented loads, it fits into the allocated abstraction without affecting the layout of different leafage elements.

For example, if you program to show an advertisement astatine the apical of an article, see a placeholder the aforesaid size arsenic the ad.

Add a div constituent wherever you privation the advertisement to look successful your article. Give this div an ID oregon people you tin notation to successful your CSS. Like this:

<div id="ad-placeholder"></div>

Place this div astatine the apical of your nonfiction wherever the advertisement volition load.

Use CSS properties to specify the dimensions of this placeholder. Ensure these dimensions lucifer the advertisement size that volition load successful this space. For example, if the advertisement is 728 x 90 pixels, adhd the pursuing CSS code:

#ad-placeholder {
width: 728px;
height: 90px;
background-color: #f0f0f0;
}

The supra CSS codification volition marque the placeholder div inhabit the magnitude of abstraction intended for the advertisement earlier it loads. The inheritance colour is simply a ocular cue to notify the idiosyncratic that thing volition look there. 

To marque it responsive, usage percentages for width and support the facet ratio with padding. Typically, ads person fixed sizes depending connected the device. 

Use media queries to set the placeholder's size based connected the surface size. This way, your placeholder adapts to assorted surface sizes but remains acceptable for a circumstantial advertisement size erstwhile viewed connected larger screens.

#ad-placeholder {
width: 100%;
height: 0;
padding-bottom: 12.5%;
background-color: #f0f0f0;
}
@media (min-width: 768px) {
#ad-placeholder {
width: 728px;
height: 90px;
padding-bottom: 0;
}
}

Avoid Adding New Content Above Existing Content

Adding contented supra what's presently connected the surface tin propulsion everything down, disrupting the user's speechmaking oregon browsing flow.

Instead of dynamically inserting a promotional banner astatine the apical of a leafage the idiosyncratic is viewing, see adding it to a conception the idiosyncratic hasn't scrolled to yet. Or, insert it aft a idiosyncratic action, similar clicking a button.

Handle Fonts Properly to Prevent FOIT/FOUT

Minimize the interaction of web fonts by preloading indispensable fonts and utilizing the font-display CSS diagnostic to power however and erstwhile fonts display.

Preload fonts and acceptable font-display to "optional" to trim the likelihood of substance being invisible (FOIT) oregon abruptly changing benignant (FOUT). The “optional” show property lets the browser take to usage a fallback font if your main font takes excessively agelong to load.

To preload captious web fonts, usage a enactment of codification similar this:

<link rel="preload" href="https://example.com/fonts/mywebfont.woff2" as="font" type="font/woff2" crossorigin>

Use the pursuing successful your CSS to guarantee the substance remains disposable during font loading and forestall layout shifts:

@font-face {
font-family: 'MyWebFont';
src: url('/mywebfont.woff2') format('woff2');
font-display: optional;
}

Use the Transform CSS Property for Animations

Finally, if you find animations are starring to mediocre CLS scores, see utilizing the “transform” CSS property. This lets you animate elements connected the leafage without starring to unexpected layout shifts. 

As with adding representation dimensions, this is thing your website builder mightiness bash for you. But if not, you tin usage “transform: scale()” alternatively of changing the tallness and width properties. 

And you tin determination elements astir with “transform: translate(). Rather than changing the top, right, bottom, oregon near properties.

Improve Your CLS Score with Semrush

Semrush’s Site Audit instrumentality identifies your website's CLS issues and provides tailored proposal to amended your Cumulative Layout Shift score. And it does the aforesaid for different Core Web Vitals too.

Plus, moving consequent audits astatine regular intervals allows you to show improvements implicit time. 

Try Site Audit contiguous to entree a broad show study with implicit 140 on-page and method SEO checks.

This station was updated successful 2024. Excerpts from the archetypal nonfiction by Luke Harsel whitethorn remain.