Core Web Vitals & CLS (Cumulative Layout Shift): how to avoid common pitfalls

In May Google announced some new metrics which make up their Core Web Vitals. These metrics will change how your site is perceived by its search engine from performance, User Experience (UX), SEO, and more.  

If not dealt with, these new metrics will have a negative effect on your sites page rankings. In this article, we will be focusing on one of these new metrics, CLS (Cumulative Layout Shift).

So what is CLS?

CLS according to Google “measures visual stability” a metric that checks if content jumps across the page and creates a negative user experience. Think of those annoying advertisements where you’re reading an article and all of a sudden you’ve lost your place as it’s popped up out of nowhere and makes the page jump up or down. CLS is a metric that detects the severity of those content shifts.

What are the most common causes of CLS?

The most common instances of CLS are from images, embeds, iframes & advertisements that do not have specific width and height dimensions. If these values are not included on the elements, they will cause content to shift once the browser has loaded them in and rendered the correct dimensions.

Another common cause is with content that gets dynamically injected into the page, causing similar shifts. Lastly a more subtle cause of CLS is when custom web fonts replace their web safe fallbacks, this is due to not all fonts having the same respectful size. 16px in Arial will not be the same as 16px in a custom web font.

How do these layout shifts negatively affect users?

Google themselves provide a perfect example of how CLS can affect users in a negative way. Imagine you’ve incorrectly added multiple items in a shopping cart and need to go back and review your order. You go to click the ‘back’ button when a popup message dynamically gets injected above, pushing the back button down and making you accidentally click the ‘submit order’ button.

Not only is this super annoying, but it gives the user an extremely poor experience as they’ve actioned something which they didn’t want to do. These layout shifts can be extremely distracting. Even developers actions trying to improve performance by lazy loading content or images can now become detrimental to the users experience and site page rankings.

What can you do to prevent CLS?

Some of these are relatively quick fixes and will have a big impact immediately. For developers you would always include size attributes on your images, videos and embed elements. If the dimensions of these are not known you could create a parent element that has a responsive aspect ratio to create the space before the content is loaded inside. This will ensure there will not be any shifts in content while the images, videos & embeds are loaded.

Avoid injecting ads or banners between content, alternatively, similar to images, videos and embeds you could specify the dimensions or aspect ratio before these are loaded creating a blank space but avoiding huge CLS.

To minimize the effect of layout shifts with web fonts, the best thing to do is preload them in. This will make sure your fonts are loaded before other elements on the page. Be aware that preloading too many assets can cause problems in performance. So keep this to a minimum. It’s a bit of a balancing act but finding out what suits your users needs should help prioritise what is required.

The solutions above should reduce your sites CLS score and provide an overall better user  experience. If however you are thinking about a redesign or require a new site altogether, then considering how CLS can affect your users from the get go can negate any of these negative behaviours.