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

1 week ago

What Is Cumulative Layout Shift (CLS)?

Cumulative Layout Shift (CLS) measures nan ocular stableness of your webpage’s contented arsenic a personification views it. This metric takes into relationship unexpected activity of elements successful nan viewport arsenic nan page loads.

These kinds of layout shifts tin frustrate users because they hap without warning. Making for a mediocre personification experience.

For example, ideate you’re looking to bargain caller shoes, truthful you sojourn a merchandise page for a brace you like. The page originates to load, and you cognize you want nan brace truthful you spell to click aliases pat nan bargain button.

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

That's an unexpected layout shift.

CLS is only concerned pinch unexpected layout shifts supra nan fold. Layout shifts that hap extracurricular of nan 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 personification experience.

Besides CLS, location are 2 different Core Web Vitals:

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

Core Web Vitals are page acquisition signals that tin impact your rankings. So, adhering to Google’s recommendations successful statement pinch bully CWV scores tin lead to amended capacity successful hunt results.

For CLS specifically, that mostly involves limiting nan number and grade of shifts of different elements connected nan 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 page you want to test) successful nan instrumentality and click nan “Analyze” button.

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

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

Note that PageSpeed Insights tin only analyse one page astatine a time.

You tin besides usage Lighthouse wrong Chrome’s DevTools. Bear successful mind that this information whitethorn supply somewhat different results. But you tin entree it without leaving nan page you’re looking to analyze.

Just correct click anyplace connected nan page and prime “Inspect” (or usage Ctrl+Shift+I connected Windows, aliases Cmd+Option+I connected Mac).

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

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

As pinch nan PageSpeed Insights tool, you tin only usage Lighthouse to analyse 1 page 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 nan “Start Audit” button.

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

In nan “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 rumor nether nan “Top Improvements” area to get much accusation and recommendations. The instrumentality besides shows nan number of pages each rumor affects.

Scroll down to nan “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 want to analyze.

The changes will travel into effect erstwhile you tally nan audit again.

What Is a Good CLS Score?

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

Here’s nan capacity scale:

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

Impact fraction
Distance fraction

Where:

Layout shift score = impact fraction x distance fraction

This intends that nan larger nan elements that displacement and nan further they shift, nan higher your CLS people will be. Likewise, tons of layout shifts of immoderate magnitude that hap successful speedy succession will lead 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, nan browser doesn't cognize really overmuch abstraction to allocate until they decorativeness loading. This tin origin different elements connected nan page to displacement unexpectedly.

Imagine you click connected a nexus to a blog post. The title and matter load in, and conscionable arsenic you commencement reading, each nan matter shifts down because a ample image loads beneath nan title but supra nan assemblage text. This is an unexpected layout displacement owed to nan creator not specifying image dimensions.

Ads, Embeds, and iFrames Without Dimensions

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

This is communal pinch third-party ads successful particular. As you whitethorn person constricted power complete nan sizes of ads your web inserts into your content.

Dynamically Injected Content

When you dynamically adhd contented (like a banner of related posts aliases a shape widget) to a page without first relying connected personification interaction, you tin origin unexpected layout shifts.

Dynamically added contented tin include:

Images aliases videos that load successful consequence to personification actions
Banners that look aft a definite magnitude of clip connected nan 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 measurement that pushes different elements astir connected nan 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 civilization web fonts load. With FOIT, nan matter is invisible until nan main font loads. But nan abstraction taken up is based connected nan fallback font (which whitethorn beryllium styled otherwise to nan font you want to show), meaning nan layout tin shift.

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

Improperly Implemented Animations

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

Some properties tin trigger a re-layout of a page. While others tin lead to layout shifts moreover if nan constituent that shifts is connected its ain layer.

How to Improve Your Cumulative Layout Shift Score

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

Specify Image Dimensions

Always group width and tallness attributes for your images, video embeds, and different media. This tells nan browser really overmuch abstraction to reserve for these elements.

Defining these dimensions lets nan browser allocate abstraction successful nan archive layout before nan image aliases video afloat loads. Minimizing unexpected layout shifts.

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

Use CSS Aspect Ratio Boxes

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

Aspect ratio boxes activity by creating a instrumentality pinch a predefined size ratio. This prevents nan contented from expanding aliases contracting successful a measurement that could displacement different page elements.

To create a responsive facet ratio container for a video, you could usage thing for illustration 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 area of your webpage and maintains its due shape. It won't displacement aliases origin layout changes arsenic your page loads.

A much modern attack (on modern browsers that support it) would beryllium thing for illustration 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 move contented for illustration ads to forestall them from pushing contented astir erstwhile they load. When nan move contented loads, it fits into nan allocated abstraction without affecting nan layout of different page elements.

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

Add a div constituent wherever you want nan advertisement to look successful your article. Give this div an ID aliases people you tin mention to successful your CSS. Like this:

Place this div astatine nan apical of your article wherever nan advertisement will load.

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

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

The supra CSS codification will make nan placeholder div inhabit nan magnitude of abstraction intended for nan advertisement earlier it loads. The inheritance colour is simply a ocular cue to notify nan personification that thing will look there.

To make it responsive, usage percentages for width and support nan facet ratio pinch padding. Typically, ads person fixed sizes depending connected nan device.

Use media queries to set nan placeholder's size based connected nan surface size. This way, your placeholder adapts to various surface sizes but remains fresh 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 nan surface tin push everything down, disrupting nan user's reference aliases browsing flow.

Instead of dynamically inserting a promotional banner astatine nan apical of a page nan personification is viewing, see adding it to a conception nan personification hasn't scrolled to yet. Or, insert it aft a personification action, for illustration clicking a button.

Handle Fonts Properly to Prevent FOIT/FOUT

Minimize nan effect of web fonts by preloading basal fonts and utilizing nan font-display CSS characteristic to power really and erstwhile fonts display.

Preload fonts and group font-display to "optional" to trim nan likelihood of matter being invisible (FOIT) aliases abruptly changing style (FOUT). The “optional” show property lets nan browser take to usage a fallback font if your main font takes excessively agelong to load.

To preload captious web fonts, usage a statement of codification for illustration this:

Use nan pursuing successful your CSS to guarantee nan matter remains visible during font loading and forestall layout shifts:

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

Use nan Transform CSS Property for Animations

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

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

And you tin move elements astir pinch “transform: translate(). Rather than changing nan top, right, bottom, aliases near properties.

Improve Your CLS Score pinch 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 nan aforesaid for different Core Web Vitals too.

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

Try Site Audit coming to entree a broad capacity study pinch complete 140 on-page and method SEO checks.

This station was updated successful 2024. Excerpts from nan original article by Luke Harsel whitethorn remain.