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!

The DW Comparison: Drupal, Duda, WordPress, Weebly & Wix
  • ArganoUV
  • Core Web Vitals

The DW Comparison: Drupal, Duda, WordPress, Weebly & Wix

Comparing WordPress to its closest CMS rivals when it comes to Core Web Vitals. ...
The Difference Between Core Web Vitals & Page Experience
  • ArganoUV
  • Core Web Vitals

The Difference Between Core Web Vitals & Page Experience

What is the difference between Core Web Vitals and the Google page experience?
Are Core Web Vitals Scores More Than a Simple Tie Breaker?
  • ArganoUV
  • Core Web Vitals

Are Core Web Vitals Scores More Than a Simple Tie Breaker?

What is the real role of Google’s Core Web Vitals?

Latest ideas

Our latest thinking about SF Commerce Cloud.

Core eCommerce Competencies
  • ArganoUV
  • Commerce

Core eCommerce Competencies

Core payment competencies in ecommerce.
The Benefits of eCommerce for Independent Pharmacies
  • ArganoUV
  • Pharma

The Benefits of eCommerce for Independent Pharmacies

Why go online if you’re an independent pharmacy?
Key Features for All eCommerce Pharmacies
  • ArganoUV
  • Pharma

Key Features for All eCommerce Pharmacies

What are the key features of a pharmacy digital store?

How can we achieve
awesomeness together?