Have you ever visited a webpage and tried clicking on a button or a link and suddenly it changes its shape or moves away and you end up clicking somewhere else, most probably on an advertisement!
That is called the layout shift and I am going to talk about it and how you can improve your CLS score.
In 2021, Google is going to roll out a new ranking signal which will be called a page experience signal.
The page experience signal will consist of core web Vitals. That is why it has become important to work on Core Web Vitals for your website.
Core web vitals are designed to measure the page load speed, web page responsiveness and visual stability of a webpage.
The three core web Vitals are,
- Largest Contentful Paint (LCP):
LCP means the time a webpage takes to show its largest visible elements in a viewport (Browser window). The ideal LCP score is 2.5 Seconds.
- First Input Delay (FID):
FID measures the time your webpage takes to respond to the user interaction like “button click”. The Ideal FID score is 2.5 Seconds.
- CLS (Cumulative Layout Shifts):
It is the sum (union to be actual) of all the layout shifts of a webpage. The Ideal CLS score is 0.1
In this article we are going to see CLS in much detail.
Alright let’s get started!
What does CLS mean
As we know CLS measures the visual stability of a webpage.
Cumulative means increase in size, Layout means the frame of the element, and shift means changing the position.
Above Image source is web.dev
Layout shift means when the elements on the page change and or not stable. CLS represents and measures the visual stability of a webpage and insignificant layout shifts.
Page elements mean the buttons, links, or any text on your web pages. Elements on the page need to be visually stable to provide a good user experience.
Google prioritizes user experience above everything else.
For a good user experience aim to have a CLS score of 0.1 or less. The CLS score anywhere between 0.1 to 0.25 needs improvement and if the score is below 0.25 you really need to work on your web pages.
CLS score is a signal for you to work towards the stability of the elements on your webpage.
Why CLS score is important
As I mentioned above user experience is important for Google. It is said that if Google finds two websites with the same quality content it will give priority to the one which is having a better CLS score or UX.
Let’s be honest, most of us prepare sites with good UX along with relevant content.
CLS score helps you optimize your web pages for a better user experience. Good UX = more time on page and better engagement.
What causes the Cumulative Layout Shift (CLS)
There might be various reasons for CLS, here are the common,
- Poorly written CSS styles.
- Improper use of image or video dimensions and their sizes:
- Embedded ads with wrong dimensions
- Other embeds and frames without proper layouts and dimensions.
- FOIT/FOUT (Flash of Invisible Text and Flash of Unstyled Text) of web fonts
- Dynamically injected Content
How CLS Score is Calculated
Browsers take two things into consideration while calculating the CLS.
First, it checks the viewport size, and second the moment of the unstable element between two rendered frames.
Formula to calculate CLS score
Google calculates CLS score based on the following formula,
CLS score = impact fraction * Distance fraction
It is the product of impact fraction and distance fraction
What is Impact fraction
Impact fraction means how the viewport area is impacted because of unstable elements between two frames.
This Image is from web.dev
You can see in the above image the text block has impacted the viewport area between two frames.
Impact score is nothing but the union of the visible area of an element on both the previous and current frame as a fraction of the total area of viewport.
How impact fraction is calculated
As you can see in the above example image the element (paragraph) in the first frame takes up to 50% to the total size of the viewport. But in the second frame, it moves down by 25 % taking the total 75% size of the viewport. So the impact fraction here is 0.75
What is Distance fraction
Distance fraction is nothing but the maximum distance (horizontally or vertically whichever is greatest.) the unstable element has moved in the frame divided by the total size of the viewport.
Image sources: web.dev
As shown in the above image the largest viewport area is its height. We have seen the insatiable element (paragraph) has moved 25% down. That means the distance fraction of 0.25
So taking the product of impact fraction and distance fraction we will get the CLS score.
CLS score = 0.75 * 0.25
CLS Score = 0.1875
What is good CLS score
As per Google 0.1 is an ideal CLS score however the score between 0.1 to 0.25 is considered as an average CLS score.
How do you check your CLS score
There are plenty of ways you can check your CLS score. Here are few.
- Search Console: You can check your web vitals report in your search console dashboard.
- PageSpeed Insights: You can find the page speed insight from Google. Click here to check.
- Lighthouse: Lighthouse is a website auditing tool that also helps webmasters to understand and improve their user experience.
- Chrome DevTools: This is Google Chrome’s built-in web developer tools.
- Chrome UX report: The Chrome User Experience Report provides user experience metrics for how real-world Chrome users experience popular destinations on the web.
Why and how does CLS affects the SEO
CLS along with FID and LCP are the main indicators of how users are interacting and experiencing your website.
User experience is important for Google.
If visitors are getting bad user experience on your website then they will click the back button.
Poor core web vitals also results in Increased bounce rate.
Latest CLS updates from Google
Google observed that the current CLS metric was inadequate to measure the pages that are open for a longer time.
Google has decided to go with Session Windows approach for measuring CLS.
According to Google:
“A session window starts with the first layout shift and continues to expand until there is a gap with no layout shifts.
When the next layout shift occurs, a new session window starts. …Similar to the current definition of CLS, the scores of each shift are added up so that each window’s score is the sum of its individual layout shifts.”
Google also said that many sites’ CLS scores may experience the change. However many sites will also see an improvement in their CLS score and the CLS score will be more accurate.
Citation:
How do you improve or optimize the CLS score
Most of the time you can avoide the CLS issuee by sticking to few guidelines.
- Don’t forget to include the size attribute to your images and videos. Also, you can reserve the size for these elements with the help of CSS aspect ratio boxes. This will ensure that the browser will allow the correct size to the element and it will not shift its layouts during page load.
- Avoide inserting content above existing content, except in a case where the response is required to user interaction.
- Statically reserve space for the ad slot. In other words, style the element before the ad tag library loads.
- Ensure the non-sticky ads don’t cover the viewport.
- When there is no ad returned from your ad sources even though the ad slot is visible then at that point avoide collapsing the reserved space.
- Minimize CLS by precomputing sufficient space for embeds with a placeholder or fallback.
- The Font Loading API can reduce the time it takes to get the necessary fonts.
- Prefer transform animations to animations of properties that trigger layout changes.
Conclusion
As Google has stated in a recent update page experience will be the ranking factor in 2021.
It has become vital to keep your eyes on the core web vitals of your website. Because core web vitals are responsible metrics that measure the page experience of your website.
To provide the visual stability of your webpage and give a good user experience you need to keep an eye on your CLS score from time to time.
It is for sure that CLS will have an effect on Google organic search results in 2021 and beyond.