Last Updated on September 11, 2022 by SERP Kingz
What is Cumulative Layout Shift?
Cumulative Layout Shift (CLS) is a web design and SEO metric that measures how often users experience unexpected layout changes during the load of a specific page. Search engines use CLS to help assess the user experience of a website and its rankings.
CLS is a relatively new term in web design and SEO, but it refers to something you’ve definitely encountered numerous times over the years.
You’ve likely seen it happen when you’re reading an article online and all of a sudden, the ads below the article start loading and push the content you’re reading down—often to parts unknown.
Why does Cumulative Layout Shift matter?
Depending on the severity, layout shifts can be extremely frustrating for users and can lead to a very poor user experience.
For example, if your visitors are in the middle of browsing your site on their phone, and the words they’re reading suddenly jump several “screens” down so that a video ad about solar panels can fill the screen, they’re going to be annoyed.
And if they have to keep scrolling back up/down to find their place, they may just leave your site altogether. (I’ve probably done this very thing 3 or 4 times this week alone.)
If this happens several times upon a single page load, or happens every single time they try to visit a new page on your site, you’re really testing your visitors.
Has this ever happened to you?
You’re browsing a site on your phone, trying to tap on a button (or worse, a small text link)—but it keeps moving, because the page is still loading elements.
Just when the button jumps for the last time, and you feel like it’s finally stationary, it moves at the last nanosecond and you accidentally tap on something that sends you out of the browser, and opens a page about something 100% unrelated to your interests in a different app.
How would you rate that experience?
If your users are constantly having to deal with big layout shifts on your site, they’re very likely to stop visiting altogether. You’d better have a pretty incredible product or service to offer if you’re going to risk putting all your potential customers through that kind of torture.
But even in that case, why not just make their experience better?
Of course, besides causing a bad experience for your visitors (A.K.A. your customers), layout shifts can also tank your SEO rankings.
Why Do Search Engines Care About It?
One of the main things search engines care about, aside from stressing out site owners, is providing their search engine users with the best possible experience.
Why? Every time they present your site to one of their users, they’re staking their semi-professional reputation on the user having a good time there.
If your site causes a bad experience for their users, it reflects poorly on their company, and the user won’t just get frustrated with you—they’ll be frustrated with the search engine for sending them there.
Their theory is that if this happens over, and over, and over, and over again, that disgruntled user will eventually switch to a different search engine.
Because of that, Google uses CLS as a metric to help assess the user experience of a website.
So, if your site has a “high” CLS score, it’s likely that your site’s rankings will suffer as a result.
CLS can also affect your SEO in slightly less direct ways.
For example: Bad user experience caused by layout shifts can also lead to an increased number of organic searches being abandoned.
That basically means that someone clicks on your site from the search engine results page (SERP), but ends up clicking back to the SERP fairly quickly because they’re annoyed by everything shifting around like a deck of cards in a windstorm.
This then sends a signal back to the search engine that your site wasn’t relevant to what they were looking for.
Google tracks this kind of behavior from your visitors and uses it as a key signal in their ranking algorithm. (They also provide a way to measure CLS in their Core Web Vitals.)
So, at the end of the day, if you want your website to rank high in Google, you need to try to avoid layout shift as much as possible.
It’s not always necessary to completely eliminate any shift in the layout that happens during loading whatsoever, but the lower your CLS score, the better—for you and your customers.
The Most Common Reasons for Layout Shift
There are a number of reasons why layout shifts can occur during the loading of a page. Some of the most common causes include:
1. Images or other visual content without defined dimensions
When the height and width dimensions of an image, video, or other visual element are not defined in the HTML code, the browser doesn’t know how much space to allocate for that content when one of your visitors starts loading the page. As a result, the element can “shift” when the page is loaded, causing other content around it to move as well. Most often, the page underestimates the amount of space needed for the image, resulting in it being displayed too small, and the other content on the page shifting down or otherwise out of the way to fill in the gap.
2. Ads or other embedded content/iframes without defined dimensions
Just like images, ads and other iframes can also cause layout shift if they don’t have their dimensions defined in the HTML/CSS code. The same thing happens – the browser doesn’t know how much space to allocate, and the element can “shift” when the page is loaded, causing other content around it to move as well.
3. Dynamically “injected” content
One example of this would be a chat window that pops up on a page after you’ve been browsing for a while. Because the content is injected into the page dynamically (i.e. not contained in the original code), browsers may not know how much space to allocate for it, and it can cause other content around it to shift after it loads (or during the loading—sometimes these dynamic page elements can take several seconds to fully come into being).
4. Web fonts that are not pre-loaded
If you’re using web-based fonts on your site (which is usually a good idea, for aesthetic reasons), but you’re not pre-loading them, they can cause a layout shift when they finally load.
This happens because the browser doesn’t know how much space to allocate for the text until the font is actually loaded, and so it just makes a best guess.
This is why sometimes you’ll see page content in a basic, pedestrian font like arial until the page is fully loaded, and then suddenly the text changes to a nicer-looking custom font.
When the real font finally loads, it takes up more or less space than the browser’s best guess, and so the page content shifts around to accommodate it.
Using rel=”preload” can help to mitigate this issue by telling the browser to go ahead and download the font before it’s needed, so that there’s no delay when it comes time to display the text.
The inevitable tradeoff is that you’re asking the browser to download a file before the text appears, which can potentially slow down page loading times (although in most cases it’s a split second—and as long as it loads quickly, it’s generally outweighed by the improved aesthetics).
6. Background elements that are not yet visible
This one is a bit more technical, but it’s important to understand nonetheless.
When a browser is loading a page, it “paints” the visible elements of that page in the order in which they appear in the code. So if you have a header element followed by a bunch of section elements, it will paint the header first and then the sections.
However, even though an element is not visible on the page yet, the browser may still be loading it in the background. So if you have a very large image at the bottom of your page code, the browser may start loading it even though it’s not visible yet.
And if that image isn’t fully loaded by the time the browser gets to it, it can cause a layout shift.
This is why it’s important to make sure that any content you want to load in the background (such as large images) is fully loaded before the browser gets to it. You can sometimes fix this by using the “defer” attribute on your <script> tags.
7. CSS animations that are started before the page is fully loaded
This one is similar to the previous issue, but with CSS animations instead of images.
CSS animations are sometimes started by a trigger event, such as hovering over an element. But if that trigger event happens before your page is fully loaded, it can cause a layout shift.
This is why it’s important to make sure that any CSS animations you have on your page are started after the page is fully loaded. If this is causing significant layout shift on your site, a workaround is adding the “animation-delay” property into your CSS code.
6. Waiting for a response from the network
When a browser makes a request to the network (for example, to load a page), it can take a while for the network to respond. And during that time, the browser may continue to update the structure of the DOM, even though the response to the request hasn’t been received yet.
This can cause a layout shift because the browser doesn’t know how big the response is going to be, and so it just makes a guess. When the actual response comes in, it’s usually different than the browser’s best guess, and so the page content has to shift around to accommodate it.
The only real way to fix this kind of issue is to make sure that your network requests are as efficient as possible. If you’re making a lot of requests, or if your requests are taking a long time to complete, it can cause significant CLS on your site.
Final Thoughts
Layout shift wasn’t always a big deal—in fact, it was once considered a basic part of the web browsing experience.
But today, in the time of responsive design, with users becoming more and more accustomed to a “smooth” browsing experience, layout shift has become a real problem—if a common one.
A few small jumps or content moving a pixel or two here and there may not be a big deal, but excessive layout shift can be a serious issue for your business. Especially now that Google factors into how they score your company’s site in their ranking algorithm.
Not only can it negatively impact your customers’ experience—and potentially turn them into non-customers—but it can also hurt your site’s SEO rankings.
That’s a bad combination for any business.
Fortunately, there are a few things you can do to mitigate layout shift on your site.
By understanding why and how it happens, and taking steps to fix it, you can keep your site running smoothly and avoid this potential ranking penalty for your business—and keep your customers coming back for more.
