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
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:
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.