‘Cumulative Layout Shifting’: The Next Big Ranking Factor

A significant piece of news has come from Google recently, of a new ranking factor ‘cumulative layout shift’. The catch is, it’s not coming in to play until 2021.

This makes me think it’s an update just as significant for search engine optimisation as the mobile-first ranking factor update (which, coincidentally, they also announced in advance).

So, let’s learn what the cryptically-named new ranking factor is, and how to optimise for it.

Cumulative Layout Shift

Put simply, and in a short answer, Cumulative Layout Shift (CLS) is a recently announced metric that will be a key part in Google’s algorithm and is said to become a ranking factor in 2021.

But, what actually is cumulative layout shift?

Cumulative layout shifting is the shifting of elements in web pages while the page is still downloading for the user.

The elements, for example, are things such as fonts, buttons, forms, images, videos and more.

So, what’s the big deal? 

Well, minimising the occurrence of CLS is extremely important, because – elements and web pages shifting is quite simply poor for the user experience, let alone on the technical side of things.

Why does cumulative layout shifting occur?

According to Google, there are five reasons why cumulative layout shifting 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”

Oftentimes, CLS will sneak into your website during development. What can happen is that many of the assets needed to render the page are loaded onto a browser’s cache. The next time a developer or publisher visits the page under development they won’t notice a layout shift because the page elements are already downloaded.

How do you measure CLS?

According to Google, the main way to measure cumulative layout shifts is through what they have coined ‘in the lab’ simulation.

In the lab is simply analysis through simulating a user downloading a web page.