Last Updated on by Michael Brockbank
Just when you think you have the website under control, Google throws yet another curveball. This time, it’s in the form of the cumulative layout shift error that pops up in Search Console. Luckily, I found a quick and easy fix for my specific situation.
Perhaps this can work for you as well. I just know that I went from a very, very poor CLS score in Search Console to “0.”
If you don’t want to read the backstory, just click in the table of contents below to jump to how I fixed my specific problem.
Today, I’ll show you how to fix the CLS issue in less than a few minutes.
What is a Cumulative Layout Shift?
A cumulative layout shift, or CLS, is a metric in Search Console and other testing platforms that shows how often content is affected on a website. This cumulative layout shift happens when a new element loads after the content which causes things on the site to move.
The end result is a visitor tapping or clicking something on accident because the content “jumps” suddenly.
In certain online tests, this CLS score is tabulated based on the elements that cause this jump to occur. Fixing the cumulative layout shift will improve the user experience.
When all is said and done, you want to have a CLS score of less than 0.25.
Not All Sites Suffer the Same Fate
Out of all the things that Google flags as an error in Search Console, CLS is probably one of the more difficult things to assess and fix. This is because there are a lot of different things that can cause the shift to happen. And it’s not always consistent.
In some tests, the CLS would be below 0.25. In others, it would reach up to 3.66.
And because the tests are not very forthcoming as to where the fault lies, you have to do a lot of investigative work. In my instance, I spent two days trying to find where the jumps were coming from.
I went so far as to use Chrome Dev Tools to monitor the page with a slow network speed so I could see each element load. And according to Chrome, there was nothing related to a cumulative layout shift.
For the life of me, I couldn’t figure out where the issue was coming from. So, I decided to explore optimizing and caching plugins to see if I can solve the issue that way.
How Did I Reduce Cumulative Layout Shift?
To solve the CLS issue and improve my site score in PageSpeed Insights and GTmetrix, I went with Autoptimize. It’s a free plugin to install that helps streamline the coding elements of your website without needing advanced knowledge.
Once the plugin was set, the CLS score instantly dropped to zero.
1. Install and Activate Autoptimize
First, go to Plugins and click, “Add New.”
Search for Autoptimize, install, and activate the plugin.
In general, this is a decent plugin to use for optimizing a variety of things in WordPress. It helps minify HTML, defer CSS and JavaScript, remove the WordPress emoji elements, and lazy load images.
2. Adjust Autoptomize Settings
Now comes the fun part…adjusting the settings to prevent cumulative layout shift. Autoptimize has a lot of functionality to explore, but I found a few things to cause conflict issues, which I’ll go over in a moment.
NOTE: This process works great if you combine Async JavaScript by the same developer. Though, you may need to adjust the settings depending on your own needs.
From the plugins screen, go to Settings and click, “Autoptimize.”
JavaScript Options
The only two options to check in the JavaScript settings are:
- Optimize JavaScript Code
- Aggregate JS-Files
All of the others need to remain unchecked.
CSS Options
In the CSS Options portion of Autoptimize, only enable:
- Optimize CSS Code
- Aggregate CSS-files
- Also aggregate inline CSS
I’ve experimented a few times using inline and defer, but came up short for fixing cumulative layout shift. Feel free to experiment on your own, but so far, this has been the best setting for dealing with CLS.
HTML Options
Under HTML Options, you only need to enable “Optimize HTML Code.”
Unless you’re a developer, there’s really no reason to leave HTML comments in pages. So, you may not want to check the “Keep HTML Comments” box anyway.
As for CDN and cache info, I don’t have anything set. I use Cloudflare, so the CDN Options field is left blank. Though, this has more to do with optimizing WordPress than the CLS issue.
Feel free to put in your CDN Base URL, if you have one.
Misc Options
By default, all four of the Misc Options should be checked. Now, Autoptimize will add more in this section depending on what you have installed. For example, there are options for optimizing WooCommerce if you have it enabled.
You may want to take a look at the Misc Options section any time you install a new plugin, just to be on the safe side.
At any rate, there is really nothing for you to change in this section as these are all the default settings.
Make sure you click, “Save Changes and Empty Cache.” Afterward, your site should be ready to go.
3. Test Your Site
Personally, I prefer using GTmetrix when doing performance tests. I just find the data to be more actionable than what PageSpeed Insights provides. But, you can use any that you like.
You can also install something like Google Site Kit for WordPress. It has the PageSpeed testing platform built right in.
As you can see, the cumulative layout shift is, indeed, “0.” And this was also apparent when I checked Search Console a few days after setting up Autoptimize.
All I need to do now is boost the performance, increase my site speed, and get rid of some background operations. Most of which have to do with the bells and whistles I’ve installed, such as OneSignal push notifications and AdSense.
Issues I Came Across with Compatibility
Not all plugins play well together. In fact, I had a few issues with compatibility after installing Autoptimize. Keep in mind, these are issues I experienced personally. You may have a completely different experience.
But if you’re not able to solve the cumulative layout shift, you may have to do some troubleshooting with plugins that might be interfering with Autoptimize.
Speed Booster Pack Lazy Loading
After setting up Autoptimize, I had to disable most of the functions in the Speed Booster Pack plugin. Especially when it came to lazy loading media.
If you use Autoptimize to lazy load images and you have Speed Booster Pack also doing the same, the images on your site might disappear. If this is the case, just disable “Lazy load media” in Speed Booster Pack.
Lazy Load by WP Rocket
Just like the media issue from Speed Booster Pack, I found the images missing from a website while using Lazy Load by WP Rocket. Once I disabled the “image” functionality of the plugin, all started working well.
The only thing I use Lazy Load for now is to create thumbnails for the YouTube videos I have embedded on the site. And that’s a blog post for another day.
W3 Total Cache
To improve the performance of one of my blogs, I had to completely remove W3 Total Cache when using Autoptimize. I’m still not 100% sure as to why or if there was a setting or two I could adjust to get them to work together.
But in reality, you don’t really need several caching plugins. One should do well enough. And in the case of all my blogs, Autoptimize just offers a better performance score in GTMetrix.
However, W3 Total Cache is a great plugin. You just need to get the settings just right for your particular website.
What Happens If Your Cache Grows?
One issue I came across after performing this fix was how quickly the cache grew on one of my websites. Within a matter of minutes, the Autoptimize cache would grow by more than 10%.
If you notice Autoptimize’s cache growing, try adjusting the settings. Unfortunately, every website is different. There may be underlying issues that are causing problems between plugins.
At any rate, you may have to experiment with your own website to find the perfect balance. However, I was able to solve the cache problem while still scoring well according to the content layout shift.
This is what I did to stop the growth of the cache size:
Uncheck “Also aggregate inline CSS?”
Uncheck “Minifiy excluded CSS and JS files?”
It’s a Never-Ending Battle with Google
You spend a lot of time trying to build up a great website only to have Google move the goal post once or twice per year. However, the steps above are how I addressed the cumulative layout shift to make Search Console happy.
Unfortunately, I cannot guarantee this will solve your problem. After all, every website is different. But so far, this has worked flawlessly on every site I’ve used it on.
What lengths have you gone to fix CLS issues in Search Console? I’d love to know how you’ve solved website issues.
- An Evening with Christina Wallace on After Hours - April 17, 2024
- Planning a New Series for Self-Publishing My Next Book - April 15, 2024
- Adding Permanent Writing Sprint Videos on YouTube? - April 12, 2024