What is Cumulative Layout Shift? Why it happens?

Cumulative Layout Shift (CLS) is a Google metric that measures a user experience event. It will soon become an important ranking factor for websites.


What is Cumulative Layout Shift?

The process of unexpected shifting of web page elements which affects the user experience within the viewport is known as Cumulative Layout Shift.


When you are reading an article and when the page suddenly shifts itself to the top or bottom of the page will affect your experience in understanding and reading an article. These issues are known as Layout Shift.

Optimizing for quality of user experience is key to the long-term success of any site on the web. The negative user experience will only cause your site to drop down lower in search engine rankings.

To provide better user experience pages should maintain a CLS of less than 0.1.


All the above details refer only to the shifts occurs without the users' knowledge. If the user has initiated the layout shift then Google considers it as good.


Why CLS Happens?

  1. Images without dimensions
  2. Ads, embeds, and iframes without dimensions
  3. Dynamically injected content
  4. Web Fonts causing FOIT/FOUT
  5. Actions waiting for a network response before updating DOM


Images without dimensions:

Always specify the width and height of an image. If you do not specify the width and height of an image when the page loads the browser will not allocate any space the image. 

Because the browser has not allocated any space, the size of the image is larger than the CSS and HTML. This makes it to load slowly and it pushes the content up and down till it loads completely.


Ads, embeds, and iframes without dimensions:

Dynamic ads will change their dimensions unless you force them to maintain a standard form. Therefore always specify the width and height for Ads, embeds and iframes.


Web Fonts causing FOIT/FOUT:

Flashes of invisible text and flashes of unusable text both cause layout shifts. A way to prevent this is to add rel="preload" in that link for downloading the web font.

Google speed insight will help to find out what is causing the Cumulative Layout Shift (CLS).


Layout Shift Score:

The Layout shift score is calculated using two main metrics they are;

1. Impact Fraction

2. Distance Fraction


Impact Fraction:

The impact fraction measures how unstable elements impact the viewport area between two frames.


Distance Fraction:

This layout shift measures the distance that the unstable elements have moved from one place to another, relative to the viewport. The amount of distance any unstable element has moved in the frame either horizontally or vertically in the viewport is known as distance fraction.















Comments

Post a Comment

Popular posts from this blog

What is Barnacle SEO? How to implement it?

Day by Day the internet is becoming more and more crowded, a lot of new websites been launched frequently. Given the competitive nature, it is difficult for a new business to make its presence felt online. Ranking for top competitive keywords is almost impossible if you are a starter or you don't have funds to hire experts. Because already there is a lot of big businesses targeting the same keywords you are targeting. This is where Barnacle SEO comes in handy. What is Barnacle SEO? Barnacle SEO is a strategy that leverages the authority of top-ranking websites for highly competitive keywords to boost your brand. The word Barnacle was first coined by Will Scott of Search Influence. The basic concept of Barnacle SEO is to focus on the success of other websites that rank for the particular keywords you tried to rank for. In simple words, if you can't beat them, join them. If you wondering how can to join them, we will see below; The following ways you can make su...
Read more

What is Skyscraper technique? How does it work?

The Skyscraper technique was revealed by Brian Dean founder of Backlinko in 2015. This technique increased his traffic by 11% in 14 days. When he revealed the technique it took the SEO world like a storm. After hearing about this technique the question that will arise in your mind is will it work for me. The answer will be maybe or maybe not. A lot of people have tried this skyscraper technique and reaped results and some have failed too. So, what is the main concept of the Skyscraper Technique; The link building strategy where you improve existing popular content and replicate the backlinks is known as Skyscraper technique. How does it work? 1)  Select a popular article:   The most important first step would be to find a competitive keyword or a keyphrase and enter it into any tool like ahrefs or SEMrush to retrieve the most popular content for that particular keyphrase and select the one with a lot of backlinks. 2)  Improve the article:   Once you have selected the...
Read more