Following the announcement in June 2021 of the Core Web Vitals update, loading speed and UX were given a place at the forefront of SEO concerns.
The speed of loading websites has become a point controlled by everyone… But speed is not the only UX lever taken into account by the Core Web Vitals. The visual stability of the page is also part of it. And it is this last point that most directly impacts the user experience.
The CLS is the indicator dedicated to the calculation of visual stability: in this article, we will discuss the concrete ways that will allow you to improve it.
The place of CLS in the context of the Core Web Vitals update
Before we focus on the CLS, let’s put this indicator in context.
As a search engine, Google is relying more and more on the user experience to offer Internet users qualitative results. It is in this context that Google launched its Core Web Vitals update in June 2021.
Its goal? Offer webmasters and SEO professionals precise indicators that measure different elements related to user experience (or UX for User experience).
As a reminder, these three indicators are:
- The FID (1), for First Input Delay. It calculates the time it takes for the web page to accept user input (such as button clicks);
- The LCP, for Largest Concertful Paint. It indicates the time it takes for the largest element to appear on the screen;
- The CLS, for Cumulative Layout Shift. It calculates the displacement of the elements during the loading phase of the page.
It is on this last indicator that we will focus.
CLS: what is it and how is it calculated?
The CLS is therefore an indicator that calculates the movement of elements during the page loading phase.
The CLS as presented by Google. The numerical data is an index: from 0.25, it is considered harmful for your UX.
When a user arrives on a web page, it must load in order to be displayed on the user’s screen. During this phase, the different elements that make up the page (buttons, menus, images, etc.) each load at their own speed and are displayed as soon as they are completely loaded.
Sometimes, it is therefore possible that one element is displayed above another. As a result, all the elements below are pushed further down the page: they move. This is called a Layout Shift.
In order to measure the movement of elements due to this phenomenon, Google has developed the “CLS” metric. The calculation of the CLS is based on two measurements:
- fractional impact,
- And distance impact.
1 | Fraction Impact
Fractional impact measures the total screen space an element takes up before, during, and after its cumulative move.
Concretely, if an element (an image for example) occupies half of the screen then drops by 25%, then it will have occupied 75% of the space of the screen in total.
In this case, the fractional impact index is 0.75.
On this representation, the image is shifted by 25% downwards while it occupies 50% of the screen (called viewport).
In total, the image will therefore have occupied 75% of the cumulative viewport.
2 | the distance fraction
The distance fraction is the second component of the CLS calculation. It measures the maximum displacement made during the loading of the page in the direction of the width or the height of the screen, whichever is greater.
Thus, the CLS takes into account the size and orientation of the user’s screen.
For example, on a mobile held in portrait position, it is the movements in height that will be counted by the Distance Fraction.
In our previous example, the unstable element has moved down 25%, so the distance fraction is 0.25.
The CLS is calculated with the Impact Fraction and the Distance Fraction, just multiply one by the other.
Still taking our example, this gives us: CLS = 0.75 x 0.25 = 0.1875
Google considers a good CLS to be less than 0.1. The situation is more serious if the CLS exceeds 0.25: it is then considered bad by Google.
Of course, many tools present this index to you automatically.
First, you can turn to Google Page Speed Insights, which gives you the choice of analyzing your page using field data or in a test environment, in its mobile or desktop version.
You will also have access to detailed calculations for the three Core Web Vitals indicators.
To the three indicators counted the best SEO for photographers by Google, the FCP is added here. It tells you how fast the largest element on your page is loading. This is a useful metric, although very dependent on the user’s connection speed to field data. This is why this indicator is not taken into account at all by Google for your SEO.
CLS: what impact in SEO?
As said above, Google’s desire is to increasingly include user satisfaction. And therefore the user experience within its algorithm!
Thus, the June 2021 Core Web Vitals update relies on specific indicators to indicate concrete possibilities for improving the UX. But it also allows Google to rely on these same indicators for its own relevance calculations.
In reality, the Core Web Vitals do not represent a very important criterion for your SEO: since their arrival, the changes on the SERPs have been very few.
However, we still advise you to work on improving the Core Web Vitals and therefore your CLS score, in particular because they are very important for the User experience.
CLS: what impact on the User experience?
Unlike SEO, the field of user experience is very strongly impacted by phenomena such as the movement of elements.
Recurring problems with CLS are, for example, erroneous clicks caused by the unexpected movement of elements.
This type of error is very confusing to the user, especially on mobile. The result is a feeling of frustration and therefore a rapid increase in the bounce rate.
Fortunately, there are several methods to use in order to improve your CLS score.
The Core Web Vitals tab of SEMrush Site Audit offers you plenty of tips to improve each metric. It is also able to analyze your entire site at once, which saves you a lot of time.
Distinguish between bad layout shift and good layout shift
Previously, we said that indicators like the CLS were little used by Google to determine the quality of a page. One of the reasons for this choice of Google is that these indicators are only what they are: indicators.
In summary, a high CLS does not necessarily mean that it is unpleasant to navigate on your site.
A distinction must be made between positive and negative layout shifts. Here, it is above all the expectation of the Internet user that must be taken into account. Indeed, in itself, a shift is only negative if it surprises the user.
For example, if a user clicks on a button to drop down a menu, and it displays a loading icon while the menu is loading, then there is a lag due to the appearance of the icon.
However, as the user expected to see the icon displayed, the offset from the rest of the page is not a problem for him. Moreover, it only intervenes following its request (it is indeed the user who clicked) and therefore, this shift cannot be harmful.
Do not focus only on the figure given by the CLS and take the reflex to always compare this data with a precise analysis of your web page!
In the same way, if a feature of your web page necessarily requires the elements located under this one to be moved, the best choice is to bet on the user’s understanding by making the elements move gradually, as in an animation. .
To do this, use the “transform” property in your CSS files to force elements to move more slowly.
Plan in advance the space occupied by the elements
Unexpected and unpleasant movements of the elements of your web page are caused by the appearance of other elements, located above them. Thus, one of the simplest ways to avoid this inconvenience is to provide space in advance, which will serve as a reservoir to place any element that would load after the others.
In this way, the user’s browser is able to calculate the space that the element will take up when it has loaded: it can therefore continue to place the other elements further down the page, in the right places.
Generally, this is a practice widely used by sites that display advertisements on their site.
Above, a concrete example with Cuisine Actually. In order to avoid any shift in the content of the site following the appearance of an advertisement at the top of the page, the site has decided to plan the future placement of the advertisement by first displaying a white rectangle, which is replaced by the advertisement once it has loaded. By doing so, Cuisine Actually avoids inflating its CLS.
Also, to avoid leaving blank space after the ad appears, feel free to rely on historical data to determine ad size. If you have the slightest doubt, choose a relatively large size.
A small empty space under your advertisement causes less problems than an advertisement which does not display, for lack of space.
Giving dimensions to images
In our previous example, it was mostly about giving the user’s browser a way to predict the future placement of an element that would be loaded later.
Let’s continue this logic by giving the browser a clear indication of the size of the elements it should display.
Indeed, it is common to see images whose dimensions are not specified.
In itself, this is not a problem! It is a technique often practiced since the advent of responsive design. This leaves it to the CSS to resize the images according to the size of the user’s screen.
However, this technique forces the browser to fully load the image before knowing its dimensions. Because it’s only when the image is fully loaded that the CSS files can rework and resize it.
Therefore, when an image is displayed above other content, the browser has no choice but to push this content further down to give the image the space necessary for its display, increasing thus the layout shift.
Little advice! So take the reflex to fill in the dimensions of your images:
- in absolute value (number of pixels);
- Or relative (in percentage).
The browser will then be able to immediately allocate the right area to the image even before it is displayed.
Simple settings for pop-ups and dynamic content
Other types of content that often because visual shifts are those injected dynamically or even pop-ups. This is particularly the case with GDPR banners, for example.
To avoid the problem, favor the display of these elements in “overlay” mode in the settings of the plugin in question. Thus, these elements will be displayed superimposed on the content of the page and will not cause movement.
Provide the space needed to display the on-board elements
Many plugins allow you to display embedded elements such as:
- videos hosted on YouTube;
- Or posts from social networks.
- Best SEO Company for boost your business.
The latter in particular often cause discrepancies in the layout. For what? Because posts on social networks do not have a predefined and fixed size. Images, video or simply the size of the text are all elements that vary the size of the post.
To improve your CLS score, you can recalculate the space needed for the correct display of the embedded element. In order to allocate enough space to it and thus avoid any displacement of the other elements.
Examine your element with your developer console, integrated in all browsers and analyze the element in question in order to find its dimensions.
Then create a space large enough to hold the item as a whole..
By following these simple tips, you should be able to improve your CLS score. But remember that CLS is just one metric among many. And that even if the Core Web Vitals are of relatively little importance for SEO, they nevertheless remain very impactful for the user experience.