Blurred background image

How to Fix Cumulative Layout Shift Issues in Core Web Vitals

It’s one of the more annoying aspects of the digital experience. It leads to unintentional clicks and exacerbated stress levels.  

Here is the scenario: you land on a page for a pair of jeans that you really like and as you begin to read, the content begins to jump around the page leaving you displaced. 

Or another scenario: you land on a page and you see the direction you want to go in, so you click a button. But as soon as you click that button the page shifts and you end up clicking on an ad or a different link entirely.  

These are clear examples of layout changes of the webpage. They are caused by unstable elements that change their position on the page. How to Fix Cumulative Layout Shift Issues in Core Web Vitals

There are multiple reasons for why elements change position on a webpage. One example is that a new image that loads at the top of the page forces content to move down and occupy a lower position.

These are the situations that are measured by Cumulative Layout Shift, one of the Core Web Vitals. 

If your webpages have been suffering from these examples, then fear not. There are ways to improve your page’s Cumulative Layout Shift score.  

Fixing CLS issues 

If your images take too long to load and your content takes up too much space, then it causes page instability. 

Here are some solutions. 

  1. Consider how you use lazy loaded images as they can make the problem worse if they create a huge space before they take up the image space. 
  2. When it comes to Jank images, try reserving the required space with CSS aspect ratio boxes. With this approach, it ensures that the browser is able to allocate the right amount of space in the document while media loads. 
  3. For pages where you place ads in content, you can remove layout shifts by reserving the size of the space. Consider using a placeholder if no ad is returned instead of collapsing the reserved space. 
  4. For website owners that use WordPress, a solid ad plugin such as Ad-Inserter is going to provide you with the right ad spacing so that you don’t need to worry. 
  5. Try to avoid dynamic content, which is the one that is inserted after a page loads – particularly the content in the top half of the page, for example newsletters, subscriptions, posts, etc. Try to load this type of content in the upper half, if possible, in addition to using a popup box. 
  6. If you are using a CDN and it takes a long time to load the elements, and this causes content to jump around, then you should create a space in the DOM. 

Now go forth and improve your pages’ Cumulative Layout Shift to boost your Core Web Vitals! 

PS: ArganoUV is one of the world’s leading Core Web Vitals consultancies. Contact us to see how we can work together. 

Related Ideas

If you got value from this article, you may enjoy these other articles, as well. We’re always adding value!

What is This 'Core Web Vitals' Thing Everyone is Talking About?
  • ArganoUV
  • Core Web Vitals

What is This 'Core Web Vitals' Thing Everyone is Talking About?

Affecting every single Google page performance is the new Core Web Vitals. But what are they...
How Many Websites Are Failing in their Core Web Vitals Scores?
  • ArganoUV
  • Core Web Vitals

How Many Websites Are Failing in their Core Web Vitals Scores?

Below par – how many top websites are still failing in their Core Web Vitals scores?...
What are the Top 5 CMS for Core Web Vitals?
  • ArganoUV
  • Core Web Vitals

What are the Top 5 CMS for Core Web Vitals?

The top content management systems for Core Web Vitals.

Latest ideas

Our latest thinking about SF Commerce Cloud.

eCommerce & Headless Tech
  • ArganoUV
  • Technology

eCommerce & Headless Tech

The link between ecommerce platforms and headless technology.
The Role of UX in an EPM Platform
  • ArganoUV
  • Software
  • UX

The Role of UX in an EPM Platform

The function of UX in enterprise performance management.
This Week in eCommerce Data: May 20th, 2022
  • ArganoUV
  • This Week in eCommerce Data

This Week in eCommerce Data: May 20th, 2022

This week’s ecommerce roundup focuses on in-store digital experiences and livestream commerce popularity by platform, plus more.

How can we achieve
awesomeness together?