Cumulative Layout Shifting

What is Cumulative Layout Shifting? How to Optimize CLS?

Cumulative Layout Shifting (CLS) is one of the Core Web Vitals metrics and user-centric performance metrics that focus on visual-stability during the entire life span of a web page. CLS is an important term for preventing the layout shifts that annoy users. While reading a text or being about to click a link, if the text or the link moves down or up suddenly, it will create annoyment for the user.

Oftentimes, Layout Shifting is stressful, annoying for the user, and lowering the trust in the content publisher. However, in some cases, the CLS may also cause real financial losses. Therefore, a low Cumulative Layout Shifting Score is important for both SEO and UX. Cumulative Layout Shifting (CLS) Issue in Google Search Console’s Core Web Vitals Report is another signal that shows users are experiencing layout shiftings while using the web site.

Cumulative Layout Shifting Google Search Console
Cumulative Layout Shifting and Other Core Web Vitals Issues for a website’s mobile performance report on Google Search Console. This Core Web Vitals report screenshot is from one of the biggest news brands in Turkey.

Because of Google’s Page Experience Algorithm based on Web Page Loading Performance with user-centric metrics such as Core Web Vitals, Cumulative Layout Shifting has become an important User Experience, Conversion Rate Optimization, and Search Engine Optimization term. In this guideline, you will find answers for the definition, measurement, scoring, and improvement methodologies for CLS.

Why Does Cumulative Layout Shifting (CLS) Occur?

Cumulative Layout Shifting can happen because of several reasons as listed below.

  • Uploading Page Resources Asynchronously into the web page.
  • Videos, iframes, images, and ads without Height and Width values
  • Dynamically uploaded content
  • Late Visualization of Web Fonts i.e. FOIT / FOUT
  • Waiting for a Network Approval before DOM Loading

Another reason for Cumulative Layout Shifting is the web page resources loaded and working differently in the Production and Development environment. Mostly in the Development Server and phase, resources are loaded quickly from the local server and the local cache. This situation creates the feeling that there is no problem on the page. However, in the production environment, users may be exposed to much slower loading pages and also Layout Shifting with a different internet connection and device variation possibilities. Because of this situation, an SEO and a Developer should perform Page Speed and User Experience tests with realistic simulations.

Cumulative Layout Shifting
You can use Lighthouse via Chrome Developer Tools for calculating the Cumulative Layout Shift (CLS) for web pages. This is an example CLS Measurement for one of the Holisticseo.digital web pages.

To learn more about Core Web Vitals and user-centered Web Page Performance terms and methodologies, you may read the guidelines below.

What is the Cumulative Layout Shifting Score?

Cumulative Layout Shifting measures the sum of each layout shifting state on a web page throughout the session on the web page. Cumulative Layout Shifting (CLS) occurs whenever a loaded web page element moves to a different location relative to where it was loaded.

For a lower Cumulative Layout Shifting Score, it is important that the uploaded web page components do not move after they are loaded.

What is a Good Cumulative Layout Shifting (CLS) Score?

A good Cumulative Layout Shifting Score is less than 0.1. If more than 75% of users had a session with less than 0.1 CLS Point, this is considered a good CLS Score.

Cumulative Layout Shift Score
According to the Google Chrome Developers, Good Cumulative Layout Shift Score should be under the 0.100.

How to Measure Layout Shifting Score?

Layout Shifts are measured by the Layout Instability API. Layout-shift input occurs when any element changes its visible position on the screen.

Elements that change their position after loading are called Unstable elements. Layout Shift only happens if a loaded web page element changes its position after it is loaded, it does not include any size, style changes, or newly added DOM Elements.

How to Calculate Layout Shift Score?

The browser calculates the layout-shift score by examining the difference between two rendered frames. Layout Shifts occurred if the start position of a web page element changed between two frames. There are two methods the browser uses for Layout Shift measurement.

Layout Shift Score = Impact Fraction * Distance Fraction

What is Impact Fraction in terms of Cumulative Layout Shifting?

Impact Fraction calculates how much unstable elements in the visible part of the screen are displaced between two frames.

The total area occupied by the unstable element that moves in both frames is Impact Fraction. Impact Fraction measures the total area affected by the unstable element.

For example, if an element covers 30% of the visible screen, namely the viewport, in the first frame and shifts 30% down in the second frame, then Impact Fraction is 60%. This means 0.60 Cumulative Layout Shifting Score.

Google Core Web Vitals Chrome Plugin
You may use Google Developer’s Core Web Vitals Chrome Extension for examining every web page you land on. Google’s purpose for giving a full response to the user is under 0.5 seconds. In this example, they are behind their purpose as 0.4 MS.

What is Distance Fraction?

Distance Fraction measures how many percent an unstable element moves relative to the magnitude of the viewport. The big dimension that the viewport has is important in Distance Fraction. For example, for an unstable element that moves 30% downward on a phone screen, the Distance Fraction is 0.30.

Distance Fraction can occur horizontally or vertically.

Sample Cumulative Layout Shifting Calculation Below.

Impact Fraction (0.60) * Distance Fraction (0.30) = Cumulative Layout Shifting (0.180)

In this example, our CLS Score is between Good and Poor.

Why is Distance Fraction Important?

Initially, Cumulative Layout Shifting was calculated only with Impact Fraction, but in the latter process, the Distance Fraction concept has been invented to update the Cumulative Layout Shifting (CLS) formula with a better layout shifting comprehension. Thus, the big web page components that shift didn’t affect the Cumulative Layout Shifting Score so much unless they shift too much.

What is the Difference between Expected and Unexpected Layout Shifts?

Cumulative Layout Shifting caused by Unstable Elements is a user-centric performance metric that only applies to unexpected layout shift events. Also, all layout shifts are not bad, sometimes web page components change their start position as they are being planned in the UI.

Layout Shifting Events That Started by the User

It is good if a layout shifting event is experienced only at the time the user expects it, the way he/she wants. Expected and desired layout shifting events can be triggered by clicking a button, clicking a link, entering data in a search bar, or signing up for a newsletter.

For example, it is better to show a user a load bar or load indicator after a Call to Action (CTA) operation, then show the result when the action is complete. Thus, the user can wait to know that the transaction is taking place. At this point, if no loading indicator is used, the user may click elsewhere thinking that the process has not taken place. The Loading Indicator also prevents components on a web page from changing suddenly. Thus, a smoother user experience (UX) is provided.

Layout Shifting is a situation expected and desired by the user when it can improve the user experience.

Expected Layout Shift
If a user opens a sub-menu items from main menu of the website, this doesn’t increase the Cumulative Layout Shifting Score since it is an expected Layout Shift by the user.

Natural and Smooth Animations and Transitions

Content that changes its start position without any expectation or warning always creates a bad user experience and disturbs the users’ satisfaction. But, animations and transitions that shift the content on the web page gradually and naturally create user satisfaction. Animations and transitions may change the web pages’ components’ initial positions during their playing time, but since the user knows and expects these types of shifts, these types of animations and transitions help users to understand the web page and the process.

What are the Differences Between Bad and Good Layout Shiftings?

The differences between bad and good layout shiftings are below.

  • Bad Layout Shiftings are experienced suddenly without waiting and asking by the user.
  • Poor Layout Shifting damages the user experience and reduces user satisfaction.
  • Good Layout Shifting events can be initiated by users.
  • Good Layout Shifting events can be detected by users.
  • Good Layout Shifting Events make it easy for users to understand the page.
  • Cumulative Layout Shifting (CLS) Score measures only bad layout shifting events.
An unexpected layout shift example can be seen in this image. Image Source: Nitropack.

How to Measure Cumulative Layout Shifting?

Cumulative Layout Shifting can be measured both by examining real user experiences and with web page loading simulators. The following tools can be used for Cumulative Layout Shifting (CLS) Measurement.

  • Chrome User Experience Report
  • PageSpeed Insights
  • Search Console (Core Web Vitals Section)
  • Chrome DevTools
  • Lighthouse
  • Pingdom
  • WebPageTest
  • SpeedCurve
  • Dareboost
  • GTMetrix

Web page loading simulators measure the Cumulative Layout Shifting (CLS) Score only when the web page is loaded, but the CLS is measured during the “lifespan” of a session on a web page. Therefore, Field Data, which contains real user metrics, is more important than Lab Data.

How to Measure Cumulative Layout Shifting Manually?

Google’s Core Web Vitals Javascript Library can be used to measure Cumulative Layout Shifting. With Puppeteer, it is possible to perform CLS measurement for all web pages in a loop with the “getCLS ()” function.

import {getCLS} from 'web-vitals';

getCLS(console.log);

Measuring CLS via Custom Javascript Codes are possible, but using Core Web Vitals Javascript Library is the most efficient methodology.

How to Improve Cumulative Layout Shifting?

For most of the websites, following the methods below is enough to fix the Cumulative Layout Shifting issue.

  • Always give the required height and width values to images, videos, and ads.
  • If the required width and height values cannot be given to the images, give a default size to the web page elements related to “unsized-media feature policy”.
  • Never place another web page component on top of the uploaded content, except if it happens through user interaction.
  • Communicate with the user using meaningful animations that move according to the context, so that the layout shifting process is understandable.

To better understand Cumulative Layout Shifting Optimization, it is necessary to better understand the causes of CLS.

Images without Height and Width Value

The height and width values ​​given to the images allow the browser to know in advance how much space the image will take up. Thus, it can place all the elements on the web page as they should. If the visuals are not given a height and width value, the “CSS Aspect Ratio Box” feature should be used.

Cumulative Layout Shifting
Specifying the height of every web page component in the viewport is one of the key methods for fixing the CLS Issue. Here, we see that the text on the viewport has been shifted in an interrupting way for the users.

Giving a height and width value to an image also reduces the “reflow” and “re-layout” process. Using “width” and “height” attributes for images to reduce Cumulative Layout Shifting is more efficient than using “width” and “height” properties for images in CSS.

If the browser is delayed to load the relevant CSS File, the images may cause other web page elements to shift in the viewport. At the same time, the “reflow” and “re-layout” process is prolonged with the “width” and “height” values ​​appearing later.

CSS Aspect Ratio value becomes important when height and width values are not known for the image. Any visual with Aspect Ratio determination can have with and height values in any way.

  • If the image is 220 pixels wide (16/9), its height will be 391 pixels with aspect ratio.
  • If the image is 391pixel high (16/9), its width will be 220 pixels with an aspect ratio.

Thus, the browser can preset the web page layout by having the required values in default for both width and height.

In modern applications, it is better to use height and width attributes in HTML Document to reduce Cumulative Layout Shifting. At the same time, User-agent Stylesheets that are being used by the browsers are usually educated for the images without dimensions with the aspect ratio.

If you want to keep an image the width of the container, the “width: 100%; height: auto;” You can use the values. Thus, by calculating the height value with “auto”, the CLS can be prevented by reading the CSS Document or the relevant HTML Code line.

Cumulative Layout Shifting
The Javascript Code Block for Measuring the Cumulative Layout Shifting.

How to Prevent CLS Using Responsive Image?

When working with Responsive Images, attributes such as “srcset” or “media” are used to prevent CLS. It uses the “srcset” attribute by downloading the most appropriate image according to the width of the browser viewport, and places it using during the “layout calculation”.

Below is an example of srcset.

<img width="1000" height="1000"
       src="image-1000.jpg"
    srcset="image-1000.jpg 1000w,
            image-2000.jpg 2000w,
            image-3000.jpg 3000w"
           alt="Image descriptive text"/>

In this example, the browser downloads the image-1000.jpg image on a 1000 pixel widescreen. The height value also changes at the rate determined according to the related viewport width.

Below is an example with a media attribute.

<picture>
  <source media="(max-width: 792px)" srcset="car-480w-cropped.jpg">
  <source media="(min-width: 793px)" srcset="car-800w.jpg">
  <img src="car-800w.jpg" alt="Car Modal and Price">
</picture>

In this example, we show a cropped variant of the car image on 792 pixels wide and less wide screens. On screens with a width of 793 pixels and above, we use the normal version of the image.

Cumulative Layout Shifting and Advertisements

Ads often don’t have a height or width value. The reason for this is to generate more revenue by increasing the click-through rate. At the same time, the lack of the size of the ads provides an increase in price by allowing more advertisements to compete during the auction. Therefore, ads are one of the most important factors for Cumulative Layout Shifting.

During the lifecycle of a web page, advertisements can create CLS in many ways.

  • When resizing an advertisement container with a client-side Javascript.
  • When an advertisement container is dynamically injected into the web page.
  • When the Advertisement tag System resets the advertisement container.
  • If an advertisement changes the size of the container div.
Cumulative Layout Shifting Banners
Cumulative Layout Shifting can be caused by banners and ads that are being loaded by late without height and width dimensions.

How to Prevent CLS for Ads Elements on the Web Page?

The methods below can be used for CLS in terms of Ads.

  • Make room with CSS for the ads element to be loaded.
  • When using sticky-ads, try loading them under the relevant elements so that the ads do not push the web page elements down.
  • When the ads are not loaded, don’t let the space reserved for ads crash and disappear in front of the user, try using a placeholder.
  • Calculate the overall size of the ads by collecting historical data and use the best possible container HTML div size.
Making a Static Slot for Ads

In this process, a larger container is set by calculating the sizes of the ads most likely to load. Thus, layout shifting is not experienced because HTML Container Div is larger than the size of the ad, but in this case, if the container HTML Div is too large, the white space ratio increases. For this reason, the layout calculation should be done as best as possible.

You can also consider serving smaller ads, but in this case, there is a higher chance of increasing the white space within the inclusive HTML div.

Keeping Ads Placement Off Top of Page

CLS can be largely avoided by keeping the ads placement off the top of the page. Because Ads loads late and don’t have a specific size, it can push down web page elements loaded before it. To avoid this situation, ads placement should not be at the top. Thus, even with Layout Shifting, fewer web page elements will shift and some of them will not be in the viewport, so the CLS score will decrease.

Buttons and Cumulative Layout Shifting
Buttons also can cause Cumulative Layout Shifting if they are being loaded late and without height, width dimensions.

The Importance of Iframe and Embed for Cumulative Layout Shifting Optimization

Embeds or Embeddable widgets allow users to embed different web page elements such as various images, videos, or maps from different websites on a different web page. With embeddable content, the content of one website can appear on another website. The embeddable widget is divided into types as follows.

  • Embed a specific HTML Div.
  • Transforming and embed a specific Javascript Tag
  • An inline HTML Snippet
  • Iframe Embed

In cases where Social Media Posts or certain news content is embedded, the Cumulative Layout Shifting Score may increase because the size of the visual, video, or container HTML Div included in the embedded content is unknown. Since the area to be covered by the embedded content is unknown, the browser cannot pre-include the required area in the layout calculation and unexpected change of content elements’ place will occur.

How to Prevent Cumulative Layout Shifting for Iframe and Embed?

In order for Iframe and Embedded content not to generate CLS, the size of the Iframe must be known in advance and the relevant space must be left in advance on the web page. For this, the container HTML Div must be given the required height for Iframe and Embed in advance.

Apart from the height that can be given to the container HTML Div, using a placeholder may also be a solution.

The Iframe and Embeddable Content area can be held by a placeholder of the same height until content is loaded. In both inclusive HTML Div and Placeholder solutions, media queries and device-based viewport differences should be calculated.

Cumulative Layout Shift Reasons
From Chrome Web Developers’ 2020 Summit, an image shows the Cumulative Layout Shift (CLS) Reasons.

Dynamic Content Injection and Cumulative Layout Shifting

Unless there is a user interaction involved, do not place other content on top of existing content. Thus, the most important CLS Condition that may occur is prevented. The Cumulative Layout Shifting (CLS) problem experienced due to Dynamic Content Injection is especially valid for banners and forms, there are some examples below.

  • More Related Content Widgets
  • Read That Content Banners
  • Newsletter Sign up Banners
  • Be a member CTAs
  • Install the App
  • GDPR Notice for the users
  • Campaigns and Special Offers

If you have applications of this type that change the User Interface and affect User Experience, calculate the height of the area where the banners, forms, and CTA Elements will be loaded in advance and inform the browser so that when the relevant elements are loaded, the web page components do not change their positions.

Web Fonts, FOUT, FOIT and Cumulative Layout Shifting

During the installation of web fonts, Cumulative Layout Shifting can be experienced in two ways.

  • During the replacement of the font style used by the browser with the font used by the website, FOUT (Flash of Unstyled Text).
  • In case the browser does not display any text until the font of the website is loaded, ie FOIT (Flash of Invisible Text).

Font-display CSS Property, which is important for Page Speed ​​Improvement for such situations, is also gaining importance for Cumulative Layout Shifting (CLS).

FOUT, Flash of Unstyled Text
Flash of Unstyled Text Example within a descriptive image. Changing the style of fonts can create layout shifts without the expectation of the user.

Font-display CSS Property takes CSS Values ​​in the form of auto, swap, block, fallback, optional. All options are other than “Optional” cause the browser to experience Cumulative Layout Shifting (CLS) by repeating the re-layout and reflow process. “Font-display: optional;” In addition to the use of CSS Property and Value, you can use “@import URL (font-url.css);” It is important not to take the form. Importing font files from CSS Files is negative for both page speed and CLS.

Also, it is better to “preload” the font files in HTML Documents with browser hint. Thus, font files load earlier. Font file loaded earlier reduces the probability of FOUT, FOIT and Layout Shifting.

In terms of Font Files and Layout Shifting, the best practice is to use the Font-display: optional and the “preload” attribute together.

Below you will see an example of how the pre-load attribute can be used for font files.

<link rel="preload" href="font-url.css" as="stylesheet" onload=this.rel='stylesheet'"

Loading font files with both preload and font-display optional eliminates the possibility of layout shifting due to font files.

Flash of Invisible Text
An example of Flash of Invisible Text. FOIT can also cause Cumulative Layout Shift while changing the places of the web page components.

Animations and Cumulative Layout Shifting

Animations and Transforms can be costly for the browser to implement. In such a case, it should be known which CSS Triggers are less costly for layout, composite, and painting processes. Using CSS Properties for animations to be produced with @keyframe is beneficial for both web page loading time, performance, and Cumulative Layout Shifting.

Position, Scale, Rotation, Opacity, easy to apply to transform CSS Properties for browser. Each CSS Property will create a different user experience as it creates a different cost.

Below you will see how the “top, left” and “transform: translate” CSS Triggers play the same animation in two different ways.

The differences between Top-Left and Transform:translate() in terms of web page performance.

While “top, left” CSS Triggers change the location of the web page component bit by bit, “transform: translate” changes it much more smoothly and with less performance cost. In order to avoid such situations, transform CSS values ​​should be used as much as possible.

How to Examine Layout Shifting with Chrome DevTools

In the Experience and Summary sections of the Chrome DevTools Performance tab, the areas that create layout shifting appear with a rectangle, while Cumulative Layout Shifting Score is also included.

Below, you can see the CLS result and shifting elements of the relevant web page at the time of writing.

Cumulative Layout Shift Chrome Developer Tools
In Chrome’s DevTools’ Performance Tab, you can measure Cumulative Layout Shift and examine the “Experience” section to see layout shift examples.

Cumulative Layout Shifting, User-centric Performance Metrics, and Holistic SEO

Holistic SEO is a combination of programming and marketing values ​​and habits. Cumulative Layout Shifting is one of the Chrome Web Vitals metrics ​​that every SEO should focus on. If a web page stresses the users, its elements change place when they are about to be clicked, and if it contains too many unstable elements, it will disturb the users by stressing them. A page that annoys users and does not have stable elements will harm the credibility and prestige of the company as well as reduce the likelihood of users to convert. Web pages that fail to fulfill their purpose and do not create user-satisfaction will be dropped in rankings by other Search Engines, especially Google. SEO, UX, and Coding are unified in terms of user-centric performance metrics and Cumulative Layout Shifting is one of the best examples that fit in this context.

For this reason, it is important for an SEO to know the definition of Cumulative Layout Shifting, the measurement methodology, the improvement methods, and be able to lead Developer Teams.

Leave a Comment

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

Scroll to Top