With this chapter on Cumulative Layout Shift, we are nearing the end of our miniseries on Core Web Vitals for WordPress users. In the earlier chapters on Largest Contentful Paint and First Input Delay, we already talked about what exactly those terms mean and how to optimize your website for each of them. Now, we want to do the same for CLS.
In the following, we cover what exactly Cumulative Layout Shift is, how it’s calculated, how to test your website for its performance in this area, and what’s a good value to aim for. After that, we give you step-by-step instructions for tackling any CLS problems that might exist on your WordPress site to improve upon them.
When finished, together with the other two posts in this series, we hope that you feel ready to make your website fit for Google’s stamp of approval.
What is the Meaning of Cumulative Layout Shift?
As usual, let’s start off with a definition. In one sentence, CLS measures when something changes on a web page that causes the elements on it to move (or shift if you will) without a user interaction.
It can be that a form or an ad in the article you are reading loads late and moves down the paragraph you are reading so you have to scroll to find your place again. Or worse, it changes the position of a button or link at an inopportune moment so you end up clicking something you didn’t want to.
Consequently, it can be anything from mildly annoying to outright infuriating. Cumulative Layout Shift is the metric that captures this behavior in order to understand the problem so you can correct it.
Why Is It Important?
A jumpy website completely disrupts what you are currently doing and might even have annoying real-life consequences. As you can imagine, that’s really bad for user experience and can cause visitors to leave. This is especially true on smartphones where, due to the screen size, small shifts have a bigger impact than on desktop machines.
Because it’s so disruptive, Google puts a lot of focus on this metric, making it one of the core values that it judges websites by. So, if you want to please both your visitors and the people (I mean, robots) that decide where you appear in search results, do your best to eliminate Cumulative Layout Shift on your website.
What Causes CLS?
The cause of shifting website elements is usually because a web page’s files load at different speeds. Another factor are page elements that are added dynamically during or after page load. Typical examples include:
- Visuals like images or videos without correctly defined dimensions
- Third-party content like ads, banners, embeds, or iframes
- Web fonts that are smaller or bigger than the initially shown fallback fonts
Another source of CLS can be conflicting CSS and JavaScript markup. When they block each other, it stalls the loading process of web pages.
How Is Cumulative Layout Shift Calculated?
In contrast to its predecessors, the calculation of Cumulative Layout Shift is a bit more complicated. To understand it, we need to settle on some terms first:
- Layout shift — That’s when an element already visible on the page moves from its starting position after already being rendered. These kinds of elements are called unstable elements (creative, I know).
- Expected vs unexpected layout shifts — Layout shifts are only negative if the user isn’t expecting them. There are also layout shifts that are expected and welcomed, such as after an interaction with a web page (e.g. submitting a form). CSS animations and transitions are other examples for expected layout shifts. To account for that, CLS considers all layout shifts that happen within 500ms of a user interaction to be expected.
- Impact fraction — The percentage of the viewport (the visible part of the website on screen) that a moving element impacts as decimal number (e.g. 0.5 if it impacts 50% of the screen).
- Distance fraction — Distance as the percentage of the screen that an unstable element moves during a shift. Also given as a decimal number.
- Layout shift score — This is calculated by multiplying the impact fraction with the distance fraction (e.g. 0.4 x 0.15 = 0.06). As a consequence, large elements that move a large distance result in a higher score than small elements moving a short distance.
CLS captures the largest occurrence of unexpected layout shift scores during a five-second interval. Obviously, lower is better.
In the end, you don’t really need to know the specifics. All you need to know is how to measure CLS and what value your site should strive for.
What is a Good Layout Shift Score?
A good score is to have a CLS value of 0.1 or less. Up to 0.25 needs improvement, anything above that is bad and will likely result in reduced search performance.
How to Test Cumulative Layout Shift
In order to be able to improve the CLS score on your website, you first need to know where you stand. It’s difficult to know if it even happens, because web pages don’t always behave the same way on different devices. Therefore, you may not see it on a development site but visitors can still encounter it. For that reason, it’s best to test it.
There are several ways to check if Cumulative Layout Shift is a problem on your WordPress site. They are pretty much the same as for the other Core Web Vitals metrics. Your first port of call should always be PageSpeed Insights, which shows the metric on its results page.
Note that it uses both lab results as well as real-life data from the Chrome User Experience Report. It even shows images of the layout shifts and the source element. That way, you have a better idea what the problem is and where it occurs.
Additionally, PageSpeed Insights gives you the ratio of how much each element contributes to the CLS score. This allows you to prioritize what has the biggest negative impact.
Aside from that, you can also use the following:
- The Core Web Vitals report inside Google Search Console
- Chrome browser developer tools
- Lighthouse
- web-vitals JavaScript library
There is also a Chrome extension called CLS Visualizer. It highlights shifting elements on your web pages. For Firefox, try SpeedVitals.
How to Reduce Cumulative Layout Shift on Your WordPress Site
If you notice that CLS is a problem on your WordPress site, you probably want to fix it. This is what the rest of this article is all about.
Provide Media Dimensions
A lot of solutions already become clear when you have a look at the causes Cumulative Layout Shift above. As mentioned, one common culprit of CLS are images and other media without defined width and height values. Without fixed dimensions, the browser doesn’t know how much space to reserve for them. That’s especially true for media appear on the page later, such as in lazy loading.
Unfortunately, it’s common practice of responsive design to not give specific image dimensions. Most often, images are set to width or max-width: 100%; and height: auto;. Then it’s up to the browser to figure out what the actual dimensions are when it downloads the image.
In the past, that often led to exactly the type of behavior we are trying to avoid. Images suddenly popped into existence, moving everything else around. Therefore, you should always provide dimensions for your visuals or at least a CSS aspect ratio.
Fortunately, if you are using WordPress, your website automatically sets image dimensions. Therefore, the problem usually does not come into play.
If that is not the case for a specific image, you can correct this in the Gutenberg editor.
Dealing With Ads, Embeds, and Similar Content
Third-party content loaded into pages is often one of the biggest sources of CLS. These are cases where you are not necessarily in control of the size of the end product. Nor do its publishers know in advance how much space is available on the site it appears on. Therefore, you need to declare its size the same way as for images.
Fortunately again for WordPress users, when using the Gutenberg editor to auto-embed content from social networks, video portals, or similar vendors into your content, the editor automatically adds appropriate width and height declarations.
That way, even if the content takes longer to load than rest of the page, it already has its correct size reserved. As a consequence, the layout doesn’t shift around when it appears.
For other types of content that you add manually, be sure to add width and height by hand. If you don’t know the exact height that an ad or other element will take, at least add a min-height property to it. That still allows for larger elements but reserves some space and can eliminate or at least reduce CLS on the page.
Another technique to minimize Cumulative Layout Shift in WordPress for third-party content is to avoid placing it high on the page. The higher up it is, the more content below it can push down, and the higher your CLS score. Therefore, if you can, place it in the middle or bottom.
Optimize Dynamic Content
Dynamic content are page elements that gets added to a page after it has already been loaded. The example before were lazy loaded images but it typically also includes stuff like banners, forms, or even related products that show up on scroll.
Naturally, if you don’t properly plan for those, it can also leads to layout shifts. Here are some ways to avoid that:
- Reserve space beforehand — Similar to the above, if you have a container with a fixed size that you can load the content into, it keeps the layout steady even if it comes in later. A fixed container can also be a carousel or something similar.
- Connect it with a user interaction — If content loads dynamically after a user action, it carries no penalty for CLS, even if the layout shifts. Keep in mind the 500ms cutoff though.
- Load content off screen — If you load content outside of the viewport and then provide the user with a notice that it’s available and an option to scroll to it, there is also no CLS. Social media platforms like to do that for new updates.
Improve Web Font Handling
Web fonts can also cause layout shift. The two common forms are that you either see unstyled text first before the web font comes in (Flash of Unstyled Text or FOUT) or see no text at all at first and then it comes in together with the web font (Flash of Invisible Text or FOIT).
Both can lead to layout shifts and here is what you can do about it:
- Use the right font format — If you load custom fonts into your WordPress website, be sure to use the WOFF2 or WOFF format. Those have the smallest footprint, load the fastest, and help avoid the problems above.
- Use the right fallback font — If you are using a fallback font that is very dissimilar to your actual font, the moment the switch happens will likely to lead to layout movement. You can avoid that by using a fallout font that is close to the end product. The Font Style Matcher can help you find one.
- Preload fonts — Place web font resources early in the document and add
rel=preloadto them. That way, browsers will prioritize them.
It also helps to host fonts locally or at least use a CDN to make them available to users as fast as possible. That way, you reduce the likelihood of switching fonts late during load and causing layout shifts.
Don’t Let Cumulative Layout Shift Throw Off Your WordPress Site
Cumulative Layout Shift is one of three metrics that Google regards as vital and the last one in this in-depth series. It’s an important indicator for user experience as it measures the stability of page layout during and even after loading.
Like the other metrics in Core Web Vitals, it not only matters to users but also counts toward search ranking and is therefore important for the success of your website.
By now, you know what it is, how it is calculated, what’s causing it, and how to test and deal with it. May your layout forever be solid, my friend.
Do you have additional tips for how to prevent Cumulative Layout Shift in WordPress? Let us know in the comments below!
