How to fix cumulative layout shift

What is Cumulative Layout Shift (CLS)?

The Cumulative Layout Shift (CLS) metric serves as a gauge for evaluating the impact of unexpected layout shifts on user experience within a webpage. These shifts occur when content relocates without user initiation, often causing disruption.

Minimising your CLS is crucial for enhancing both your website’s user experience (UX) and its search engine optimization (SEO) performance, particularly given the incorporation of Core Web Vitals into Google’s ranking algorithm.

In this piece, we’ll explore effective solutions to address prevalent CLS issues, ensuring smoother browsing experiences for users.

What causes CLS problems?

A few elements often cause unexpected layout shifts and worsen your CLS score:

  • Images and videos with no dimensions (width and height attributes)
  • Ads, embeds and iFrames without reserved space
  • Web fonts causing flashes of un-styled or invisible text

Add dimensions to avoid layout shifts

First up an easy fix: Adding the width and height attributes within the HTML markup is invaluable in avoiding CLS issues. By adding these attributes, browsers can allocate sufficient space for content, stopping potential layout shifts once the content loads.

Reserve space for ads, embeds and iFrames

It’s a real headache, especially for news sites banking on ad revenue.

Ads are notorious troublemakers because they often load asynchronously, causing layout mayhem at various stages. If you’re dealing with Google’s Publisher Tags, I’d suggest diving into their documentation for some solid insights on tackling this issue. Trust me, it’s worth a look!

When it comes to ads, the go-to fix is to reserve space for them statically beforehand. This means setting up the ad container with the right styling before the ad library even starts loading. It’s like saving seats for VIP guests at a party – you make sure they have a designated spot before they even arrive.

Sometimes, the ad network might not deliver an ad for that container. Don’t panic and collapse the container, because that’s going to trigger a layout shift. Instead, opt for a placeholder to keep things steady.

Additionally, if your website ends up with an ad larger than the slot you reserved, use the overflow: hidden property. It’s like a safety net against CLS gremlins that might otherwise go unnoticed.

Optimise font delivery

Unoptimised delivery of web fonts can wreak havoc on your layout.

If your browser swaps out a fallback font for the fancy web font you’ve been waiting for, you’ll get the “flash of un-styled text” (FOUT). In some instances, you might encounter what we call a “flash of invisible text” (FOIT).

As of today, using font-display: optional in combination with link rel: “preload” for your most important fonts is generally regarded as the best overall strategy. If you want an in-depth explanation of how and why this method works, check out this web dev article.

Debugging CLS Problems

Fortunately, there are a few tools you can use to analyse any CLS problem. You can use Chrome Dev Tools to check in Lighthouse, or you can use a great tool like GTMetrix. Run the website through one of these tools and check it passes the CLS checks.

If your website needs optimising to fix any CLS issues – feel free to get in touch to chat about how we can help you with this (or anything else).