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).
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
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.
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.
Google officially defines CLS scores into the following ranges:
As stated above, layout shifts can be caused by a lot of things. The most common culprits are:
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
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.
Lighthouse has some recommendations that could help you and/or your development team to deal with shifts, such as:
To optimize the CLS, you need to understand what is causing shifts.
There are two ways to see the exact shifts:
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.
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.
If you expand the item you can check each element’s “CLS Contribution.”
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.
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.
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’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.
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!
Here, there are options to: Spruce up the styling with fonts and colorsControl how and…
Here is a recap of what happened in the search forums today, through the eyes…
Google indicated that manual actions were coming to webpages that host third party webpages and…
What Is a Content Outline?A content outline is a document that details what an article…
HTML tags are pieces of code you add to webpages to provide context to search…
Focus is mission-critical, but most companies don’t lower the gravitational forces pulling on attention. As…
This website uses cookies.
Leave a Comment