What Is Cumulative Layout Shift and Why Is It Important?7 Minute Reading Time

What Is Cumulative Layout Shift and Why Is It Important?  Use this technique to help rank your content higher!

Guest Post By Shiv Gupta

What Is Cumulative Layout Shift and Why Is It Important.

Author BIO – Shiv Gupta started his journey in the digital marketing world at the age of 17. He grabbed deep knowledge of the industry and earned multiple awards. Incrementors was founded by him to provide the best marketing solution to struggling businesses with a goal to help them achieve higher sales and conversions. Incrementors don’t give fluff or ā€œhigh-levelā€ advice. They just give an insanely actionable plan that works.


What Is Cumulative Layout Shift? (TOC)


Cumulative layout shift is a core tool that allows shifting of web page elements, while the webpage is still downloading. It is calculated by summoning all the layout shifts that are not caused by the user’s interaction.

The layout shift occurs any time the visible element changes its position.

Web Design Company can help you to get a better grip over these topics for that you will have to spend quality time with the company and learn from them.

It has become an important variable to measure the experience of the user and therefore it is an important factor to rank pages.

The various kinds of elements that constitute a page shift include fonts, videos, buttons, and other content. It has been very important to minimize the CLS as it is an important element in the CLS experience.  A poor CLS indicates more page shifts, font shifts show that a person is having a bad experience.

Let’s understand what is a Gold CLS Score


A Cumulative Layout Shift (CLS) score varies from 0-1 depending upon the page shift. 

It can be a 0 if the page is fully still and static but if the Shift gets higher it moves toward 1.

A CLS score of 0 shows that the page is more static and stable. 

Let’s see what google uses to bifurcate the CLS performance. 

How Cumulative Layout Shift works

Below 0.1- good,

Between 0.1-0.25- needs improvement, 

Above 0.25- poor.

Google suggests maintaining the CLS below 0.1 for a better experience for the users.

Why Worry About Cumulative Layout Shift (CLS)?


As we discussed earlier, it is an important ranking factor that decides whether users are having a good time or a bad time,  and if they are having bad experiences with the CLS then, one should at the very moment change the course of action.

 We know a high SLM score shows your users a bad experience browsing the web page. Therefore negative SLM for some time affects the purchasing of the users. 

They can eventually end up giving bad reviews about the companies that might disclose the users from buying the website.


Why Cumulative Layout Shift HappensĀ 


There are five reasons according to Google why CLS might happen. 

  • i.)  Using images without dimension

    Generally, images and videos need to have a definite dimension declared in the HTML. While using images one should make sure of using the same ratio for different image sizes for different viewpoints.

  • ii.)  Ads

    Ads causing CLS is considered quite tricky to deal with,  one way to handle ads causing CLS is to place the events where the ad is going to show. Otherwise, there are two solutions if there is a lack of inventory and it doesn’t show up at the place. If the element is not showing the ad then you can fill the space by placing it as an alternative ad barrier.

  • iii.)  Content

    The content that is shown on the web page can be linked to a youtube video or a tweet that will display the video as an embedded object placed. 

  • iv.)  Fonts

    Another way to cause SLM is to download a web font that can cause (FOIA) flash of invisible text. It is a way to prevent using preload in the link.

  • v.)  Wait  for the network response before updating 

Cumulative shifts can sneak in during the development stage as they slip through causing assets needed to render to the page already loaded on the browser. 

This is so smooth that next time if a developer visits the website under development they will not notice the layout shift as the page elements have already been downloaded.

Does CLs score even affect your SEO?


Since Cumulative layout shift is a major ranking factor, which means the CLS score will likely affect your SEO. But the effect would be minor, as the shift score along with other web elements may define the traffic on the web page you get from Google and other search engines.

 Layout shift is related to user behaviour optimized metrics, on the other hand, Google claims that it doesn’t use the metric to assess the web page like bounce rate to rank the web page.  

Many other search engines like bing admit to using those metrics while ranking the web pages.

Therefore by analyzing the above reasons one should optimize the CLS and should take priority in the SEO without neglecting it.

How to fix Cumulative Layout Shift?


1.)  Using fonts downloaded online,  they are the main cause of (FOIT) and (FOUT), unless the browser downloads the above fonts from the server it shows a blank place until the custom font is loaded.

After downloading the font and displaying it,  it starts moving a lot which is called (FOIT)  flashes of the invisible text.

Another situation is when the browser downloads the fonts and displays them until the custom one is downloaded. It is known as (flashes of the unstyled text).To avoid the above situation you can use the font,  display values such as block, swap.

2.)  Include height and width to the images and videos. But now it has become less popular because new developers started using CSS to resize their images.

This allows space to be allocated only after the browser starts downloading the image. It is better to use an aspect ratio to resize the images.

Aspect ratio is the ratio to the height to the width for example (16:9).

 Aspect ratio allows the browser beforehand to calculate the space between the images and in this way it reduces the risk of layout shifts. If one has to deal with the responsive image then one can use the screen behaviour optimized set attribute, as it allows one to set several photo sizes and allow the browser to show the best possible size to the viewers.

3. Another way to fix CLs is to inject dynamic content. Dynamically injected content should never be allowed to appear above the content that has already been downloaded.

 The only possible exception to this rule is when the Change has already been caused as a result of users interaction.

Therefore CLS is a core web vital metric that allows you to diagnose, why your users are unhappy with your website and what you can do to improve their experience.


Conclusion:


To stay up to date with the latest trends you should enrol yourself in the Incrementors web solutions best website marketing agency so that you are always a step ahead of the competition.

Would You Like To Guest Post?


Today’s post is a guest post by Shiv Gupta from Incrementors.com.  If you would also like to share a guest post at ibusinesstoday.com please contact me Alex B. Chivers at chivs86@ibusinesstoday.com or via Skype live:chivs86.2

Also, find out more about Guest Posting on my page here

Many thanks and #ToYourSuccess

Alex B. Chivers
iBusinessToday.com

2 thoughts on “What Is Cumulative Layout Shift and Why Is It Important?”

  1. Hi Alex, I will thank you for this excellent article! I have never understood all the SEO and ranking stuff, but I know my score is not good.
    Now, maybe I need to hire someone to do it for me due to the many hours I have spent improving everything and still having the wrong score. When I check my websites on mobile, I don’t have any problems, but the score is always bad.
    Also, if I check it on my computer, loading my websites, it doesn’t show any issues, only sometimes that the videos upload very slowly. Do you have any idea, what I can do, a plugin or something else? I would appreciate your advice very much! Thank you again!

    1. Hi Sylvia, I am still learning about Site Speed and how to speed up my sites. To be honest with you I think there is a couple of plugins you can try. For mobile speed I would recommend getting set up with AMP and another plugin that you might really benefit from is WP Rocket.

Leave a Comment

Your email address will not be published. Required fields are marked *

I accept the Privacy Policy

Pin It on Pinterest

Share This
Scroll to Top