How to Optimize Cumulative Layout Shift on WordPress (CLS) – Core Web Vitals

How to Optimize Cumulative Layout Shift on WordPress (CLS) – Core Web Vitals

Struggling with a bad Cumulative Layout Shift on WordPress?

Cumulative Layout Shift, or CLS for short, is one of three metrics in Google’s new Core Web Vitals project. Beyond just generally being a good measure of user experience on your site, Google announced that it will start using Core Web Vitals as a ranking factor starting in May 2021.

So if your Cumulative Layout Shift score isn’t hitting Google’s recommended range, you’ll want to fix it now to get under Google’s threshold and avoid any issues (and also just generally create a better experience for your visitors).

In this post, I’ll explain what Cumulative Layout Shift is and how it connects to your WordPress. Then, I’ll share some WordPress-specific tips to improve your Cumulative Layout Shift score.

What Is Cumulative Layout Shift on WordPress?

Have you ever been reading an article on a publisher’s website (e.g. the news) and the article’s content kept getting pushed down as new ads loaded? That’s not just annoying – it’s the perfect example of Cumulative Layout Shift!

Cumulative Layout Shift is when your site’s content “shifts” around as it loads. As you’ve probably experienced in your own life, it’s super annoying, which is why Google is encouraging webmasters to pay attention to and improve this metric.

Cumulative Layout Shift is also one of three metrics in Google’s Core Web Vitals initiative – learn more about Core Web Vitals and WordPress.

What’s a Good Cumulative Layout Shift Score?

In order to understand your site’s Cumulative Layout Shift, Google provides a range of three possible values:

  • Good – under 0.1
  • Needs Improvement – between 0.1 and 0.25
  • Poor – higher than 0.25

Cumulative Layout Shift score

How to Find Which Elements are Shifting on Your Site

Now, let’s start shifting into the actionable tips to improve your WordPress site’s Cumulative Layout Shift.

However, before you can improve your score, you need to diagnose what the problems are. Thankfully, Google makes this easy to do via PageSpeed Insights.

PageSpeed Insights

To get started, go to PageSpeed Insights and analyze one of your site’s URLs, e.g. your homepage. At the top, you should see a summary of your Cumulative Layout Shift score:

Cumulative Layout Shift score WordPress

However, PageSpeed Insights also lets you go deeper and discover the specific elements that are “shifting”. To find this analysis, scroll down to the Diagnostics section and expand the Avoid

[…]

 



This article was written by Colin Newcomer and originally published on Learn WordPress with WPLift.

Disclosure: Some of the links in this post are "affiliate links." This means if you click on the link and purchase the product, We may receive an affiliate commission.

Leave a Comment

You have to agree to the comment policy.

Show Your ❤️ Love! Like Us
Scroll to Top