Cumulative Layout Shift

Have you ever experience a shift in a website elements (a button position or a link position or an image position) when the website is loading, that’s Cumulative Layout Shift (CLS) which Google is referring to as one of the three elements in the core web vitals.

This video will be more vivid representation than any textual explanation.

You can see the visitor has 56 items in his cart are already present and for some reason

he/she wanted to “Go back” instead of placing his order.

But as soon as he was about to click “No, go back” button, the layout shift happens and all the buttons moves down and the visitor ends up clicking “Yes, place my order” button (instead of going back).

That makes him mad, as you can see the traces of his screen taps, he tries clicking “No, go back” button many times out of frustration but the order gets executed and the visitor ends up ordering those items.

Causes of Cumulative Layout shift

  • Resources are loaded Asynchronously
  • DOM elements get dynamically added to the page above existing content
  • Due to image or video with unknown dimensions
  • Third-party widget that dynamically resizes itself

Why Cumulative Layout shift (CLS) is bad?

Lets get this straight CLS will occur no matter what, why? because websites load and it is not possible for all the elements to load at the same time. Thus, Cumulative layout shifting will happen as some of the page element will load one after another.

So when is CLS bad? CLS is bad when the page elements are loading asynchronously or when the DOM elements interferes with the page’s existing elements. So, when the page is loading slow, this CLS thing happens slow, it does the following to disrupt the UI/UX of the page.

  1. Moves the layout, you search for the element which goes in the bottom of the page all of a sudden
  2. Movement of the text causing difficulty in reading
  3. Moves the links/button when it starts loading
  4. When you go to click, while its loading, CLS makes you click on the wrong link or button.

Thus, Google wants this CLS to executed as fast as possible and so it penalizes CLS beyond a particular time frame. Google has given this in its scoring guidelines. If your CLS score is

cls-cumulative-layout-shift

  • Less than 0.1 sec its Good
  • Between 0.1 to 0.25 sec it needs improvement
  • Beyond 0.25> it is poor

Google penalizes the sites with poor CLS score.

As discussed this layout shifting seems worst and lets you makes more errors when the process is slow (CLS i.e. while loading)

Improving your CLS score is the key to pass the core web vitals. The following techniques can be used to reduce CLS score below 0.1 sec.

Identify elements creating Cumulative Layout Shift using Chrome Developer tools for FREE

Step 1: Enter Chrome window and open a website.

Step 2: Press F12, a window will emerge with codes in the right hand side of the screen.

Step 3: Open performance tab as shown in the image below

chrome-developer-tool-cls-optimization

Step 4: Click on Web vital

web-vitals-cls-check

Step 5: Click on reload button as shown below

cls-reload-core-webvital-optimization-techniques

Let the test run and when it is over you will see something like this. (refer below screenshot where the cursor is). The red bar are the elements creating CLS

layout-shift-cls

When you put your cursor the element with the get highlighted (as shown below) you will get to know the element creating the layout shift.

cls-element-highlight

In the above case you can observe 3 CLS bars, which means 3 elements are creating the cumulative layout shift, so if you manage to fix the position of these 3 elements then your layout score will naturally cum down (below 0.25)

Cumulative Layout Shift (CLS) score Optimizing Techniques

Fixing the above detected elements to improve CLS

There are 3 types elements creates CLS issue

  1. Images
  2. Embedded elements: Youtube videos, Social Media widgets, Ad blocks etc.
  3. Text (Font)

Lets find these issues and rectify them in the same order

Rectifying CLS issue created by Images

Images of various sizes downloads in improper order and creates Cumulative Layout Shift (CLS). Some images are heavy, so they get downloaded after the text and thus creates layout shift.

Following are the ways to rectify CLS created by Fonts

Keep Image size optimum

Keep your image size small. H0w to do it?

  • Use jpg format with medium quality.
  • Use png only when required  transparent background
  • Use Free Plugin plugins to optimize images

Convert Images to WebP format

WebP is an image format developed by Google. The best thing about this format is that it takes minimum disc space without compromising the quality of the image.

  • The raw image on DSLR with image size 100MB will weigh 100kb (say) when converted to WebP &
  • The same raw image optimized to 500kb in jpeg format will also weigh 100kb in WebP.

WebP offers 25 – 35% smaller file sizes compared to jpg. That’s a significant reduction in size.

There are several plugins capable of converting the existing jpeg/png file to WebP and reuploading it on the server.

Pro tip: You can get even better result if you optimize jpg file before converting it to WebP format.

Smaller the image size, it will download quickly alongside the fonts and so the chances of Layout Shift would me meagre.

Standardize the Image size across webpages

Another thing can be done to improve CLS is to have Standard Image size across the webpages. Example standard image size for the blog post, standard image size for sliders etc.

When you standardize the image size on the website, your browser, when you standardize the image size, will always spare the space for the images (same standardized size) and the layout shift will be avoided.

It is quiet Obvious, for  keeping the image responsive, you cannot keep both height and width fixed. You can analyze and keep either height or width fixed, so that your image can still be responsive even when you fix one dimension (either height or width) and leave the other to the aspect ratio.

Rectifying CLS created due to IFrames or Embedded Elements

The logic of images also applies to iframes or Embedded elements. Browser doesn’t have prior knowledge of what size they will occupy after being downloaded. So standardizing the IFrames and other elements will help browser sparing known space for these elements.

Standardize the height or width of the embedded element or iframe and leaving other one to the aspect ratio will solve your problem.

Rectifying CLS created due to Ads

Ads are the biggest reason of Cumulative layout shift (CLS). In some cases Layout shifts are being purposely created to make the viewer or reader accidently click the link or Ads.

The bad thing about the ads are many things about the ads are out of tour reach or control. The reasons being

  • They can only be loaded through JavaScript and so they are displayed when all the JS request are met(which takes time), thus creating a layout shift.
  • You cannot optimize text/image of the Ads
  • Ads are loaded from different servers, thus loading speed differs creating layout shift.

So, Cumulative layout shift (CLS) created by ads cannot be completely rectified, but can be minimized using following techniques.

Allot space for the ads, fix the ads space on the website. Browser will reserve space for these ads.

Set fallback images in case ads spots doesn’t get filled. This is to compensate or cover for the empty space created by ad images of multiple sizes or in case of absence of ads. This can be done using simple JavaScript or using plugins.

Note: When Google prepares Cumulative Layout Shit score, it discounts the CLS causing due to user input. Thus, a website is not penalized for the CLS caused due to user input, there is a condition for that. Google has given a time frame for it. Layout shift that occurs within 0.5 sec of user input are not counted towards CLS score.

Make sure that your ads loads within 0.5 sec of the user input.

Rectifying CLS issue created due to Fonts

Before we tell you the ways to rectify the CLS cr3eated by font, you should know something called Font display swap and its how it is related to CLS.

Relation between the use of Font display swap & CLS

Font display swap is a technique to quickly load the fonts to optimize for LCP score and load the page quickly.

Font display swap make website content visible using the system fonts i.e. fonts present in the user’s phone (or PC) until your own unique custom font is downloaded. Once, that’s done the Font display swapping code will replace the font present inside the phone with your own unique font. To know more about the steps and codes to be inserted on font display swap refer this link

This Font display swap optimizes Longest Contentful Paint(LCP) but hampers CLS. Now that you know what is Font  display swap lets move to the core topic

There are 3 ways to optimized CLS created by Fonts

1. Not to use outrageous fonts

This means use Custom fonts similar to system font, this way the layout shift during the Font swap would be relatively less. The size of the custom fonts should also be more or less equal to system fonts

2. Use the system Fonts

This essentially means not to use custom fonts. This is not the solution, to have your own fonts, but it is a bypass. Majority of the websites uses System fonts, thus preventing Font Display swap and so prevents CLS. Besides, there are so many good font present within the system font so unless your branding is aligned to the font you use, try avoiding the usage of custom fonts.

3. Separate font hosting

Download the fonts and host it on your website. This way you’ll be able to use custom fonts and you don’t require font swapping, so no more CLS issue and also excessive external request issue will no more bother you.

 

References

CLS Google doc: https://web.dev/cls/