In May 2020, Google introduced a set of three important metrics known as the Core Web Vitals. These metrics are a way of measuring a website’s overall user experience. The goal is simple: to make the web a better place for everyone. The three Core Web Vitals are:
- Largest Contentful Paint (LCP): This measures how long it takes for the main content of the page to appear on the screen.
- First Input Delay (FID): This measures how long it takes before a visitor can start interacting with the page.
- Cumulative Layout Shift (CLS): This measures if the page is visually stable, or if its elements shift a lot during loading.
These metrics are more than just numbers for search rankings. They have a direct impact on your visitors’ experience. Improving these metrics not only helps your rankings but also makes your website a more pleasant place to be.
What is Cumulative Layout Shift?
Cumulative Layout Shift (CLS) is the main focus of this article. While the name might sound technical, the concept is simple. Have you ever been about to click a button or read a line of text, only for an image or an ad to suddenly appear and push everything down? That jarring experience is a layout shift. CLS measures how much the elements on a page move around as it loads. A good CLS score is 0.1 or lower. Anything above 0.25 is considered poor. A lower score means a more stable page, which is a better experience for your users.
How is CLS calculated?
The CLS score is a number that ranges from 0 to 1. A score of 0 is perfect, with no layout shifts, while a score closer to 1 indicates a lot of movement. The math behind the number is not too fancy: layout shift score = impact fraction * distance fraction. The impact fraction measures how much of the page is affected by the shift, and the distance fraction measures how far the elements move. For example, if a large element moves a significant distance, it will result in a poor CLS score. Any layout shifts that happen within half a second of a user interacting with the page (like clicking or typing) are not counted towards the score.
How do I find my CLS?
Before you can fix your CLS, you need to know what it is. There are a few different ways to find your CLS score.
Google Pagespeed Insights
You can run a page speed check in Google Pagespeed Insights, and you’ll see the CLS score listed in the Lab Data section. The report will also highlight the main causes of the CLS in the Diagnostics section. Depending on how much traffic your website gets, the report may also include Field Data, which is based on the experiences of real users.
Google Search Console
Your search console has a Core Web Vitals report that shows you which pages have a good or poor performance. This report includes your CLS score, along with your Largest Contentful Paint and First Input Delay.
Google Lighthouse
You can also use the Lighthouse tab in your browser’s developer tools. You can run a full performance report, including Cumulative Layout Shift. This is very similar to the Pagespeed Insights report, but it has one extra benefit: you can run it on pages that aren’t public yet, which makes it a great tool for developers.
What Causes Cumulative Layout Shift?
The most common causes of layout shifts can be fixed with a few simple changes. Here are the most common culprits and how to fix them.
Images and videos without dimensions
This is one of the most common causes of CLS. When a browser loads a page, the HTML code loads first, followed by the CSS, and then the images and videos. If you don’t specify the width and height of an image or a video, the browser doesn’t know how much space to reserve for it. As a result, the layout will shift once the image is loaded. This is especially noticeable on slower connections.
How to fix this?
The fix is simple: always specify the height and width of your images in HTML. This tells the browser exactly how much space to reserve, so the rest of the page loads in the correct place. You should also ensure that your images have good alt text, as this is a key part of on-page SEO. Our free AI Image Alt Text Generator can help you write a good description for your images, which is also a great way to improve your SEO.
Ads
Ads are a major cause of CLS. They are often loaded and targeted to a specific visitor, and they can take a while to load. This can cause a sudden layout shift, especially if the ad is at the top of the page.
How to fix this?
Similar to images, you can specify the dimensions that you want to reserve for an ad. This will ensure that the layout does not shift once the ad is loaded. It’s a best practice to reserve the largest possible space for the ad, even if a smaller ad is served.
Embeds and i-frames
If you’re embedding elements like YouTube videos, Google Maps, or Twitter feeds on your page, you need to be careful about CLS. You don’t always know the exact size of the element, so there’s a risk of shifting layouts.
How to fix this?
You should try to make a good estimation of what the size of the element will be and reserve that space in the layout. If you can’t be sure, you should consider setting a maximum height or width to that element.
Webfonts
If you’re loading fonts from services like Google Fonts, it may also cause a shift in the layout. While a font is being loaded, the page may already show up with a fallback font. Once the font has arrived, the font will be replaced, causing the layout to shift a bit.
How to fix this?
There are two ways to reduce the negative effect of web fonts on CLS: setting the CSS attribute font-display to swap and making fonts load faster by prefetching and preloading web fonts. The swap attribute tells the browser to use the fallback font until the new font is ready.
Dynamically injected content
With the rising popularity of modern web development, more and more pages have content loaded dynamically. Pages will contain placeholders that are populated only after a JavaScript server call returns the right content. This can take a while and may cause shifts in the layout.
How to fix this?
You should always reserve space for the content that comes later. You should also ensure that the content is loaded as quickly as possible. This is a technical task that a developer can help you with.
Conclusion
Layout shifts are annoying for visitors and result in a poor user experience. Since 2021, layout shifts might also negatively affect your rankings on Google. The good news is that CLS has a few different causes, and for each of them, there’s a relatively easy fix. An automated SEO platform Clickrank can help you with your on-page SEO, your technical issues, and your content, so you can build a strong website that ranks well.
