Core Web Vitals: How optimising Cumulative Layout Shift boosts Website Performance

Search-engine giant Google will release their latest search algorithm update later this year so it’s important that online retailers ensure their website’s Core Web Vitals are fully optimised in order to reap the benefits.

Google is analysing real-world user experience metrics, questioning how fast do pages load? How fast is its interactivity?

When visitors are interacting with a web page on a mobile or a desktop device, what's that experience like in terms of speed and how responsive is the page?

In this article, we will discuss a Google Metric that is frequently overlooked in terms of Core Web Vitals that will directly affect ranking factors - Cumulative Layout Shift, and how best to optimise and reduce CLS issues in-time for Google’s big algorithm update.

What is Cumulative Layout Shift? Defining the Google Ranking Factor in 2021

As we alluded to earlier, Cumulative Layout Shift or CLS, is a Core Web Vitals metric that’s calculated by aggregating all layout shifts that aren’t caused by user interaction.

It is the unexpected shifting of web page elements while the page is still downloading. Common page elements that tend to cause shift are fonts, images, videos, contact forms and buttons, among other forms of content.

CLS is ‘scored’ by measuring a browser’s viewport size and by how far unstable elements move between two rendered frames. The final score is then calculated by multiplying the 'impact fraction' by the distance fraction.

Although we primarily determine CLS as a page ranking factor, it’s also key to providing a good user experience. Regardless if rankings were not changing or not, it’s something that should be addressed in order to offer users a greater online experience.

Minimising CLS is essential because pages that shift around are detrimental to a user’s experience, especially in many instances if the text they’re reading suddenly shifts out of view or if users proceed to a link that then quickly moves causing them to click on another link altogether.

What is a good CLS score?

A CLS score can be as low as 0 for fully static pages and a score rises the more layout shifts occur on the page.

The lower a CLS score, the more stable a layout is. Fortunately, Google’s performance tools list the official CLS scores as:

Good – CLS below 0.1 Requires improvement – CLS between 0.1 and 0.25 Poor – CLS above 0.25

Google recommends that you keep your CLS score under 0.1

What causes Cumulative Layout Shift?

According to Google there are 5 key causes of Cumulative Layout Shift:

1. Images without dimensions

2. Ads, embeds, and iframes without declared dimensions

3. Dynamically injected content

4. Web Fonts causing FOIT/FOUT

5. Actions waiting for a network response before updating DOM

The main culprits in the list above that cause CLS to occur are the unformatted images, dynamic advertisements, and heavy embeds.

For developers to combat these main offenders, every image and video on the site’s pages need to have the height and width dimensions declared in the HTML.

With regards to responsive images, ensure that the different images sizes for the separate viewports use the same aspect ratio.

How to improve a CLS Score

For most websites, you can avoid all unforeseen layout shifts by sticking to just a few guiding principles:

• Always include size attributes on your images and video elements - Like we touched on earlier, remember to develop pages & sites with this in mind. Otherwise, be sure to reserve the required space with something like CSS aspect ratio boxes. This approach ensures that the browser can allocate the exact amount of space in the document while the image is loading.

• Never insert dynamic content above existing content - except in response to a user interaction. This guarantees that any layout shifts that occur are expected.

• Adopt transform animations opposed to animations of properties that trigger layout changes - Animate transitions with an approach that provides both context and continuity from state to state.

Don’t be idle when it comes to Lazy Loading

An effective method to improve a website’s cumulative layout shift score is to ensure lazy loading is done correctly.

Lazy loading is the practice of loading non-critical but data-intensive resources once the majority of the page has already loaded, so that the essential parts of the website are able to load faster. Resources like images and videos are often lazy loaded.

This issue occurs when developers refrain from including placeholders on the page for where the lazy-loaded resources will sit — an image being lazy loaded will suddenly appear after most of the page has already loaded, altering the structure of the page and shifting things out of place.

Utilising placeholders will fix the shifts caused by lazy loading.

The Best Practices to Minimise Cumulative Layout Shift

1. Use aspect ratios on images

2. Reserve space for ad slots

3. Precompute space for embeds

4. Preload web fonts

CLS metrics may not be as significant as other Core Web Vitals, but it’s a very beneficial score. It can help identify why users are unhappy with your site and improve their overall experience.

We have known from Google that the page experience update is going to punish websites for cumulative layout shifts — but exactly how much we still don’t know to what extent.

Google’s announcement back in May 2020 suggests it’s important, but it’s still unclear as to how big a ranking factor CLS and further Core Web Vitals are.

Regardless, page performance is going to be increasingly important for determining search ranking beyond 2021.

It’s smart to get ahead of Google’s latest patch so your search engine rankings and website performance aren’t playing catch-up in what is arguably the biggest growth of digitisation we’ve ever seen in the 21st century.