How CLS Score Affects Your SEO Rankings

Without warning, elements on a web page could move instantly because of a poorly done web design and layout. While reading or trying to click on the “Add to Cart” or “Search” button, you may be shifted to another part of the page. Then, you are left to find where you were just a while ago. So, to help remove this frustrating web design issue, web designers work to improve a website’s Cumulative Layout Shift score or the CLS score.

Image Source: Freepik

The Cumulative Layout Shift (CLS) Score

Layout shifts happen because site owners added another element, such as an image, to the page. It takes place when a visible element transfers from one rendered frame to another. It can also happen after the element is resized. Have you ever clicked on something else because the page elements shifted when you were about to click on a button or link? What happened there is called a layout shift.

Through the Cumulative Layout Shift (CLS) – one of the Google Core Web Vitals – web designers can measure the instability of their web content by summing up the shift scores across layout shifts that do not happen within 500 milliseconds of user input. The cumulative layout shift score is the sum of all individual layout shift scores for every shift during the lifespan of the web page. Thus, the cumulative layout shift score helps web designers look at how much visible content has shifted in the viewport. This includes the distance that they have shifted. As such, sites should work hard to achieve a cumulative layout shift score of less than 0.1.

How Cumulative Layout Shift Works

Layout shifts are determined by the Layout Instability API that reports layout shift entries whenever a visible element in the viewport changes position between two frames. These elements are then considered as unstable elements.

1. Impact Fraction and Distance Fraction

 You can calculate the layout shift score by getting the product of the impact fraction and the distance fraction.

The impact fraction is the sum of the visible areas of the unstable elements between the previous frame and the current frame. For instance, you have an element that takes up 50% of the viewport height in the previous frame. It shifts down another 25% in the next frame and covers 75% of the visible area of the viewport. So, it has an impact fraction of 0.75.

Meanwhile, the distance fraction measures the distance that the unstable element has moved in relation to the viewport. You can get this by dividing the greatest distance the unstable element has moved in the frame with the viewport’s largest dimension. Suppose you have a viewport with its height as the greatest dimension. Then, you have an unstable element that moved down 25% of the viewport height. So, you have a distance fraction of 0.25.

Taking the above example, you have an impact fraction of 0.75 and a distance fraction of 0.25. Thus, your layout shift score is 0.75 * 0.25 = 0.1875.

2. Expected Layout Shifts and Unexpected Layout Shifts

 User-initiated layout shifts occur through user interaction, such as clicking on a link, pressing a button, typing in on a search box, and more. These layout shifts are generally okay as long as it happens close enough to the interaction. So, when a user interaction triggers a network request that could take some time to finish, you can immediately place some space to show a loading indicator. Doing this could remove a possible layout shift after the request is completed, thereby improving your CLS score.

Effectively employed animations and transitions are some of the best ways to update content without surprising your users. So, make use of animations and transitions to move elements gradually from one position to another to help users understand that something is going on. You can use the CSS transform property to help you animate elements without triggering layout shifts. Use transform: scale() instead of changing the height and width properties of your elements. Moreover, use transform: translate() instead of changing an element’s top, bottom, right, or left properties.

Optimizing Your Web Pages for an Improved CLS Score

1. Images with No Dimensions

 Before, width and height dimensions did not include the units. So, the image would stretch to fit the space indicated in the given values, even if it matched the actual dimensions or not. However, with the advent of responsive web design, web developers started removing width and height and used CSS instead to resize images.

However, by using CSS, you can only allocate the space for an image after it started downloading and the browser has determined its dimensions. As a result, whenever images are loading, the layout shifts, resulting in a bad user experience.

Web developers resolved this issue using aspect ratio (ratio of an image’s width to its height). For an image with a 16:9 aspect ratio, it is 16 units wide and 9 units high. Knowing one dimension allows us to determine the other. The effective use of aspect ratio helps browsers calculate and reserve the needed space to load their images and improve CLS score.

Today, modern browsers set the default aspect ratio of an image based on its width and height attributes. Through the CSS Working Group, web developers have used the width and height as normal. In doing so, the UA stylesheets of all the browsers will add a default aspect ratio based on the image’s existing dimensions before it has loaded. So, when it is told to be a certain width, the browser uses the aspect ratio to calculate its height.

For responsive images, you can use srcset to help you define the images you let the browser choose and their respective size. To guarantee that you can set the width and height attributes, each image should have the same aspect ratio.

2. Ads, Embeds, and iframes with No Dimensions

To reduce layout shifts because of ads, you can statically reserve the largest possible space for the ad slot. You do this by styling the element before the ad tag library loads. Remember to refer to historical data when choosing the most likely size of the ad slot. You should also avoid collapsing the reserved space if no ad is returned at the ad slot by showing a placeholder.

To do this, you can statically style slot the DOM elements using the same sizes passed to your tag library. Also, avoid placing ads near the top of the viewport because they have more content below, which means more elements will move when they cause a layout shift.

Relatively, through embeddable widgets, you can place portable web content on your web page. These include videos, maps, social media posts, etc. These embeds are usually not aware in advance of how large an embed is going to be. For instance, would it have an image or video embedded? Will it have multiple rows of text? As such, they usually do not have enough reserved space and may cause layout shifts and a poor CLS score for your site.

To resolve this, you can precompute the needed space for embeds through a placeholder or fallback. First, get the height of your final embed through a browser developer tool. So, once the embed loads, the contained iframe will resize so that it fits its contents.

3. Dynamic Content and Web Fonts that Cause FOIT or FOUT

First of all, remember to avoid placing new content above existing ones. Doing so ensures that no layout shifts could take place. These dynamic contents could include banners, forms, and notices that pop in at the top or bottom of the viewport. You can resolve this issue by reserving the required space in the viewport. So, it will not cause web content to reflow or shift around when the web page loads.

When you download and render web fonts, it may cause layout shifts. It happens when the fallback font is replaced with the new font (flash of unstyled text/FOUT). It can also happen when the invisible text is displayed until the new one is rendered (flash of invisible text/FOIT). To remove this cumulative layout shift concern caused by FOUT/FOIT, you can use the font-display tool to help you modify the rendering behavior of custom fonts with values including auto, swap, block, fallback, and optional. You can also use the Font Loading API to reduce the amount of time required to download the necessary fonts.

Image Source: Freepik

Achieve Improved CLS Scores through Effective Web Designs!

With the help of a web design company in the Philippines, you can achieve a positive user experience and improved cumulative layout shift (CLS) scores for your website. Let us know how we can be of more help in the comments section below!

About Adam Tan

Adam is a charming geek who loves his family's Siberian Husky, enjoys the occasional night out with friends and, most of all, lives and breathes new trends and updates about the web and its technicalities. If you want to stay updated with changes or new trends on the web or learn about the technicalities that are involved, he's your guy. He's capable of writing cheesy stuff as well, but he'd rather stick with the manly stuff.

Find more about me on:
• 
•