Loading...

Blog

Latest blog posts
What Is CLS and Why Is It Important?

What Is CLS and Why Is It Important?

Cumulative Layout Shift measures the total amount of layout shifts that occur on a web page as it loads and is interacted with. 

Google measures CLS in order to judge the overall page experience alongside the other two core web vitals, First Input Delay (FID) and Largest Contentful Paint (LCP).

China seo 5

Having multiple content shifts on one page will add up to a worse CLS score. An ideal page experience is a page with minimal CLS.

A layout shift, or content shift, is any time something on the page visibly changes position within the frame.

This can be anything from text font changing, images loading slowly, and pop-ups that shift the page around as it loads.

Here’s an example of what a poor amount of CLS looks like:

Professional seo company 5

In Summer 2021, Google confirmed that the three core web vitals are now part of the Page Experience ranking factor. 

So it’s important to make sure that your pages’ core web vitals all fall within the following ranges that Google deems “good.”

 

Good

Needs improvement

Poor

LCP

≤2.5s

≤4s

>4s

FID

≤100ms

≤300ms

>300ms

CLS

≤0.1

≤0.25

>0.25

If your vitals measure in the needs improvement or poor range, your rankings could suffer and it’s recommended that you address the issue.

How to Check Cumulative Layout Shift

There are many ways to check your page’s Cumulative Layout Shift CLS. You can use Google’s tools like Lighthouse or the Core Web Vitals report in Google Search Console, or you could check on Semrush using Site Audit. 

Defining Good or Poor CLS

Google officially defines CLS scores into the following ranges:

Good CLS: Below 0.10 Needs improvement CLS: Between 0.10 and 0.25 Poor CLS: Above 0.25

What Causes Poor CLS?

As stated above, layout shifts can be caused by a lot of things. The most common culprits are:

Images without dimensions  Ads, embeds and iFrames without dimensions Dynamically injected content  Web fonts causing FOIT/FOUT (flash of invisible text and flash of unstyled text)Link building company 5

All of these causes live in your page’s code and can be identified in only a few minutes of inspection.

For images and embeds without dimensions, simply identifying those images and then adding the known dimensions to your code will help avoid layout shifts. If you don’t know 

How to Fix and Avoid Layout Shifts

To fix your cumulative layout shifts, you first need to identify the elements causing the shifts. 

Then, your developer can take a number of actions to address the issue and optimize the page speed. 

Seo advertising 5

Lighthouse has some recommendations that could help you and/or your development team to deal with shifts, such as:

Avoid non-composited animations Ensure text remains visible during webfont load Fix image elements that don’t have explicit width and height

How to Inspect Shifts 

To optimize the CLS, you need to understand what is causing shifts. 

There are two ways to see the exact shifts:

Using special recommendation in Performance Audit of Lighthouse called “Avoid large layout shifts “ Using trace

In both variants, it will be easy if you launch a Performance audit via Lighthouse. 

To open Lighthouse, right-click anywhere on the webpage and select Inspect. 

Seo analyst 5

Avoid Large Layout Shifts

Find and open the recommendation “Avoid large layout shifts.” It’s available in the Lighthouse Performance audit if there was at least one task shift during loading. Just scroll down to find it.

Seo business 5

If you expand the item you can check each element’s “CLS Contribution.” 

Colorado springs seo 5

Don’t worry if you see an element with a CLS contribution of 0.001, for example, because it wouldn’t really hurt the user experience. 

We know that Google marks pages that have anything up to 0.010 shifts in total as “good” pages.

Viewing Original Trace

To find out what part of a page made shifts in a timeline, you can view the original trace in Lighthouse.

First, click on click View Original Trace in the Lighthouse report. This will open the Performance tab.

Seo san diego companies 5

Look through the Experience track or the Web Vitals track to find when those shifts happened. 

Zoom in and look for Layout shifts (LS) to see what part of the page made these shifts during loading.

Semrush seo 5

Measuring CLS in Semrush

Semrush’s Site Audit allows you to track cumulative layout shifts, along with the other core web vitals when you audit your website. 

The great benefit of using Semrush here is that it will save your historical data in the special Core Web Vitals report. 

This allows you to first inspect your core web vitals, then make changes, and then re-run the audit and see how your scores improved. 

Plumber seo 5

You’ll also find a whole Performance report with more information about how to improve the overall page load speed of your website, along with other optimization tips.

Try it out today and get your page experience optimized! 

Innovative SEO services

SEO is a patience game; no secret there. We`ll work with you to develop a Search strategy focused on producing increased traffic rankings in as early as 3-months.

A proven Allinclusive. SEO services for measuring, executing, and optimizing for Search Engine success. We say what we do and do what we say.

Our company as Semrush Agency Partner has designed a search engine optimization service that is both ethical and result-driven. We use the latest tools, strategies, and trends to help you move up in the search engines for the right keywords to get noticed by the right audience.

Today, you can schedule a Discovery call with us about your company needs.



Source: