As 2021 approaches, you can see a lot of metrics that have come forward with the assurance that they are the best choice to rank your website in search engine results in 2021.
One of those metrics is Cumulative Layout Shift (CLS), a Google metric that measures a user experience event. This is probably one of the reliable Google search ranking factors for your website in 2021.
So, let us figure it out first and then unlock ways to use it to optimize websites.
What is CLS?
It certainly makes sense to understand what CLS is first in order to understand the rest of things better.
It’s the unexpected crap of webpage elements during the download phase of webpages. Usually the things that cause a change are fonts, images, videos, contact forms, buttons, etc.
It would help to minimize CLS as pages that move around can lead to poor user experience.
Factors behind CLS
Poor CLS mainly occurs for five reasons, according to Google. And the factors are:
- Dimensionless images
- Dimensionless ads, integrations and iframes
- Dynamically injected content
- Web fonts causing FOIT / FOUT
- Actions in the queue for a network response before the DOM update
Now let’s see how we can get rid of the factors causing CLS;
According to Google, the dimensions of images and videos must conform to declarations in HTML. And when it comes to responsive images, you need to make sure that the different image sizes for the different windows use the same aspect ratio. And Google recommends a good resource – AspectRatioCalculator.com – for calculating proportions.
Dealing with the ads is no easy task. It’s a bit tricky. One of the best ways to manage the ads that cause the CLS is to set the style of the item the ad will appear on. In other words, you can confine the ad inside a div with a specific height and width so that the ad cannot cause a CLS.
– Dynamically injected content
You can link the content of a web page dynamically. For example, you can link a YouTube video or a tweet in WordPress, which will display the video or tweet as embedded objects.
– Web fonts
If you download web fonts it can cause something called Flash of Invisible Text (FOIT) and Flash of Unstyled Text (FOUT). You can prevent this by using rel = « preload » in the link to download this web font. Also, you can find out the factors that cause CLS by using Lighthouse.
– CLS can slip during development
There may also be times when CLS can sneak around during the development phase itself, as many of the assets that provide the page are loaded into the browser cache. When a developer visits this page, which is under development, they won’t notice that there is a layout change because the page elements are already downloaded.
How to calculate CLS?
This will be useful if you put some effort into calculating CLS. When you calculate, you will find the implication of two metrics or events. While the first is called Impact Fraction, the second is called Distance Fraction.
– Impact fraction
Essentially, the impact fraction is a measure of how much space an unstable item takes up in the window, which you see on the mobile screen.
While an item is downloaded and subsequently moved, the total space that the item occupies in the window is called the impact fraction.
For example, if an item occupies 50% of the window, then shrinks by 25%. When you add these values, you get 75%, which is called the impact fraction, and it is expressed as a score of 0.75.
– Distance fraction
The distance fraction is the second measurement that indicates how much space the element has moved from the original position to the final position.
When you refer to the example in the Impact Fraction section, you will find that the page element has moved 25%.
You can now easily calculate the CLS – by multiplying the impact fraction by the distance fraction:
0.75 x 0.25 = 0.1875
CLS measurement methodology
You can measure performance metrics in two ways: “In the lab” and “In the field”.
– In the laboratory
When you are developing new features, you can use this method. You cannot measure the impact of new features on real users during the development phase. As such, you should test the functionality in the lab to avoid performance regressions.
# Laboratory tools
– In the field
Once development is complete, you need to test on real users who will load and interact with the page. Site performance depends on the capabilities of the user’s device and network conditions in addition to how the user interacts with the page. Therefore, you need to field test your site to find out how it performs on real users.
# Field tools
You need to optimize your website to appear in the top Google search results. Although the existing factors like the loading speed of the website pages, etc. will play a decisive role, CLS is expected to play a new role that you shouldn’t miss in 2021. It will help you if you spend time figuring it out.