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 large layout shifts guidance:
You can see that the heading of my portfolio site is the biggest contributor to layout shift (though it’s still pretty small).
Make sure to look at the analysis for both the Mobile and Desktop results. For example, while my site has three elements that Google flags while looking at the mobile result, it doesn’t have any flagged elements on the desktop results.
You might notice something similar, or you might have a different set of shifting elements for mobile vs desktop.
Another Way to Visualize Layout Shift
Another way to see how your site’s content shifts is to use Chrome Developer Tools to artificially slow down your connection (which makes it easier to detect even subtly shifting content). Go to the Network tab in Chrome Developer Tools and use the Online drop-down to set a custom value that’s super slow – e.g. 60 kb/s download:
Then, reload your site and you should be able to much more clearly see how your content is shifting as it loads.
Once you know what’s shifting, you can focus your efforts on fixing those problems. However, there are also some general Cumulative Layout Shift best practices that you should implement to avoid issues sitewide.
How to Fix Cumulative Layout Shift on WordPress
Unfortunately, unlike improving Largest Contentful Paint on WordPress, fixing your Cumulative Layout Shift can get a little technical. Many of these fixes involve digging into the code. Unfortunately, it’s hard to avoid ever looking at code here, but I’ll do my best to include plugin solutions where possible.
Always Set Image Dimensions
If you don’t set image dimensions in your site’s code, your images can cause the rest of your content to shift as they load.
Thankfully, if you’re adding images via the WordPress editor, WordPress will automatically do this for you (and also set up responsive images with srcset). However, if you’re manually adding images to your site via code, you’ll want to make sure to always include the dimensions. You should see the height and width attributes in the image HTML.
For example:
<img src="https://wplift.com/wp-content/uploads/2017/02/wordpress-smtp-tutorial-1-1024x874.png" alt="SendGrid API keys" width="1024" height="874">
Always Set Dimensions for Embeds/iframes
Just as with images, you’ll also want to make sure to set dimensions for any embeds/iframes that you’re using.
For example, if you’re embedding a YouTube video or Google Maps, make sure to specify the height and width. You can also consider loading a placeholder before the embed, which is also just generally a good practice for performance.
You can find lots of solutions that let you replace the YouTube embed with a placeholder image (until a user clicks to play the video). Some good options are WP Rocket (our review) or the free Lazy Load plugin from the WP Rocket team.
Reserve Space for Ads
Ads are basically just another type of embed, but they deserve a special mention because ads are one of the biggest contributors to Cumulative Layout Shift. As I mentioned earlier, I’m sure you’ve been on a site where the content kept jumping around because of late-loading ads.
The solution here is to reserve space for your ads in your site’s code. For example, let’s say you want to display a 160×600 skyscraper ad in your sidebar. Rather than just adding the ad code directly, you could place it inside a <div> with the ad’s dimensions. That way, the space is reserved even if the ad content hasn’t loaded yet. When the ad content does load, it won’t cause any shift.
You should also just generally be careful with placing ads near the top of a visitor’s viewport, as these placements are the ones that are most likely to cause layout shift.
Fix Issues With Font Loading
One big issue with layout shift is how your custom fonts load. For example, if you’re using fonts from Google Fonts or Adobe Fonts, those can cause layout shift in two ways:
- Flash of Invisible Text (FOIT)
- Flash of Unstyled Text (FOUT)
Basically, the issue is that a visitor’s browser might try to display the text before the custom font loads. Once the custom font loads, it will then update the text’s styling, which can cause it to shift as it changes from, say, unstyled text to your custom font.
There are a few ways to solve this issue. One option is to preload important font files. This forces visitors’ browsers to download the font file right away, which eliminates the chance of FOIT/FOUT. However, be careful that you’re only preloading the most important resource (e.g. the font for your above-the-fold content). Using preloading too much will slow down your site.
You can set up a list of font assets to preload with the free Autoptimize plugin in the Extra section:
For Google Fonts, you can also consider hosting the font file locally and preloading it that way. You can set this up with the free OMGF plugin, which includes a nice feature to automatically preload above-the-fold fonts.
If you want to really dig in, Google also has a good article on combining preload with font-display: optional to really optimize your font loading and avoid layout shift.
And if you really want to avoid issues, consider using a system font stack, which is what I do for a lot of my sites. Not only does this solve font loading issues, but it will also reduce the number of HTTP requests and speed up your site. Some themes, like GeneratePress, make it super easy to use a system font stack.
However, the downside is obviously that you have a lot less flexibility when it comes to style/design.
Be Careful With Dynamically Injecting Content
If you’re dynamically injecting content for things like email opt-in forms, related content, GDPR notices, etc. then you need to be especially careful to avoid layout shift.
In general, a good practice here is to just never dynamically inject content above existing content unless it comes from user interaction (e.g. a user clicking a button).
For example, if you’re going to dynamically inject some CTA element, try to put it below your blog post instead of at the top or in the middle.
Improve Your WordPress Cumulative Layout Shift Score Today
With the tips in this post, you should be able to improve your WordPress Cumulative Layout Shift (CLS) score and get in Google’s good graces.
Of course, Cumulative Layout Shift is just one of three metrics in Core Web Vitals – you’ll also need to pay attention to the other ones.
So once you’ve implemented these strategies, head over to our guide on how to improve the Largest Contentful Paint on WordPress to fix that one as well.
Still have any questions about Cumulative Layout Shift and WordPress? Ask us in the comments!
Keep reading the article at Learn WordPress with WPLift. The article was originally written by Colin Newcomer on 2020-11-24 03:00:46.
The article was hand-picked and curated for you by the Editorial Team of WP Archives.