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!

Thinking About Blocking Slow Countries to Speed Up Core Web Vitals? Don’t!
  • ArganoUV
  • Core Web Vitals

Thinking About Blocking Slow Countries to Speed Up Core Web Vitals? Don’t!

Something to consider if you’re thinking of blocking countries to speed up your Core Web Vitals....
The Webpage Metrics Beyond Core Web Vitals
  • ArganoUV
  • Core Web Vitals
  • Digital

The Webpage Metrics Beyond Core Web Vitals

Complimenting Core Web Vitals are broader bunches of metrics that can help you to improve page...
The Page Experience Report
  • ArganoUV
  • Core Web Vitals

The Page Experience Report

What is to be found in Google’s page experience report?

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?