In the previous 1thing post, we spoke about user experience and how that is becoming a ranking factor in 2021. Google has now introduced another element that will be considered in ranking factors in 2021 and this is known as Cumulative Layout Shift.

What is Cumulative Layout Shift?

Cumulative Layout Shift (CLS) is known to be a Google metric that is used to measure user experience events. This metric is the unexpected shifting of web page elements while the page is still loading, so when things jump around. Fonts, images, videos, contact forms and other content are the kinds of elements that tend to cause shifts. 

The importance of reducing CLS is so users do not have a poor experience because pages that shift around can cause poor user experience. Coding issues are a characteristic of a poor CLS score but it can be solved. 

The 5 main reasons why CLS occurs

Google has announced that there are five main reasons why CSL can occur. These reasons are:

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”

All videos and images need to be a certain width and height in accordance with HTML. In terms of responsive images, each different image size for the different viewports needs to use the same aspect ratio. By using the AspectRatioCalculator.com recommended by Google, it will calculate the aspect ratio. 

Now that we know how CLS occurs, let’s elaborate on a few of them to get a better understanding of how we can solve the CLS issue. 

Dynamically injected content

Dynamically injected content is content that is injected into a webpage. For instance, in WordPress you can link to a YouTube video or even a FaceBook post, and WordPress will display the video or post as an embedded object. 

Ads can cause CLS

Ads are a tricky one to deal with then it comes to causing CLS. One way to deal with it is to style the element where the ad is going to show. By this it means that if you style the div to have a specific width and height, then the ad will be constrained to those specifications. If there is a lack of inventory and ads do not seem to show up, there are two solutions to this. 

If there is an element containing an ad but the element does not show an ad, you can set it so that an alternative banner ad or a placeholder image is used to fill in the space. 

On the other hand, some layouts where an ad fills an entire row, perhaps a column on the left or right gutter of a web page. If the pages do not show up, there will not be a shift therefore it will not make a difference on either mobile or desktop. This is all dependent on the theme layout, you will have to test out if ad inventory is an issue. 

Web based fonts

Flash of invisible text (FOIT) and Flash of unstyled text (Fout) is the result of downloaded web fonts. A way to prevent this is to use rel=”preload” in the link for downloading that web font. Another way to diagnose what is the cause of CLS is to use Lighthouse. 

CLS can be sneaky during development

During the development stage CLS can sneak in. How this happens is that many of the assets needed to render the page are loaded onto a browser’s cache. This means that the next time a developer visits this page under development they will not notice a layout shift because the page elements are already downloaded, sneaky hey. 

How Cumulative Layout Shift is Calculated

The calculation to measure CLS involves two metrics, namely Impact Fraction and Distance Fraction.

Impact Fraction

This fraction is a measurement of how much space an unstable element takes up in the viewpoint – is what you see on a mobile screen. To elaborate on this it is when the page is loading and the element downloads and then shifts, it is the total space that the element occupied. From the location that is occupied in the viewpoint, to its final location once the page is rendered. For example, Google uses an element that occupies about 50% of the viewpoint and then drops down by 25% once the page is fully rendered. When added together, the total value of 75% is called the Impact Fraction and it’s expressed as a score of 0.75. 

Distance Fraction

The distance fraction follows the impact fraction as it is the amount of space that the page element has moved from the original position to its final position once the page has loaded. Referring back to the above example, the element had moved 25% or 0.25. Now the CLS is calculated by multiplying the impact fraction by the distance fraction:

0.75 x 0.25 – 0.1875

There is more math and other considerations for this calculation, but the important takeaway is that this score allows us to measure the user experience factor.

How to Measure CLS

Similar to the calculations for CLS, there are two ways to measure CLS. Google refers to these as the Lab and the Field. 

In the Lab refers to simulating an actual user downloading a web page. The Moto G4 for generating the CLS score is used by Google within the lab environment. These lab toots are best for understanding how a layout may perform before going live to users. This gives publishers the opportunity to test the layout for issues prior to launching the site. These Lab tools involve Chrome Development tools and LightHouse.

Why we care

It is important to understand what Cumulative Layout Shift is even though it may not be necessary to understand how to calculate it yourself. Just by knowing about it and what it is is important as this metric is scheduled to become a ranking factor sometime in 2021, therefore we can be as best prepared for it as possible in order to keep rankings high. 

Tags: digital marketing, Google ranking factors, google search, User Experience