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.

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.