How to improve cumulative layout shift

Welcome to part 4 and the final episode of the mini-series on how to improve your Core Web Vital rank. We are getting closer to May 2021 and you know what that means. Google will make the new ranking factor for search results official. In this part, we will cover the third and last ranking factor that Core Web Vitals Consist of called Cumulative Layout Shift, and explain how you can improve your CLS score.

If the previous parts of the series are not fresh in your mind, have a glance at them before jumping on to this one. In part 1: Why you need to take core web vitals seriously, we explain the basics of what Core Web Vitals are and why they have such a large impact on your online performance. In part 2: How to improve Largest Contentful Pant we give our best tips on how you can improve your LCP score and in part 3: How to improve First Input Delay we dig deeper into the concept of First Input Delay.

Once again, what are core web vitals?

Google has announced that the Core Web Vitals will consist of three new measures called largest contentful paint, first input delay, and cumulative layout shift. These metrics will heavily impact the ranking factors of websites. Google’s algorithm update is an initiative to encourage user-friendlier websites. Formerly, user experience and ranking factors have been measured based on:

• Mobile-friendliness
• HTTPS
• Safe browsing
• No interstitials

Added factors that form the Core Web Vitals are:

• Largest Contentful Pain = LCP
• First Input Delay = FID
• Cumulative Layout Shift = CLS

The new metrics are just an add-on to the former ranking factor, and the new ranking will be based on a combination of all of these. However, the Core Web Vitals will have a heavier impact on the score. In order to appear on search engine results, a good score is required.

Cumulative layout shift = CLS

Cumulative layout shift, CLS, measures the visual stability of a website. How long it takes for a site to be fully stable, meaning no images pop-up or stabilization shifts happen, that’s what Cumulative Layout Shift is all about. Cumulative Layout Shift will become an official ranking factor soon, however, being a ranking factor or not, having a high CLS score means that your website visitors are having a poor time visiting your website. This can be very harmful to your website performance and it can make users never wanting to return to your site and is something you should want to fix, regardless.

An example of CLS

As Cumulative layout shift, CLS measures the visual stability of a website, it measures the time it takes for your website to load all materials and remain stable. Imagine you visit a website, and just when you are about to open the article, quiz, or link, the page loads, a new image or ad appears, and you end up pressing the new content instead of the initial content you wanted to visit. You might get redirected to another website and this can be extremely frustrating, especially if you don’t find your way back to the initial content very quickly and seamlessly. I’m sure this has happened to you at some point. This movement in the page load is the Cumulative Layout Shift, and it should be as low as possible, meaning it should shift as little as possible, in order to be a good experience for website visitors.

Target CLS score

If you have elements moving around the page while it loads, it means you have a high CLS, which isn’t something you want. According to Google, a website should maintain a CLS of less than 0.1, so you don’t have a lot to play around with if you want to make it to the good-score Core Web Vitals group, which you of course want. You can have a CLS score of 0, meaning that the website is fully stable. If it is more than 0,1 but less than 0.25 it needs improvement and if your CLS score is over 0.25 it’s categorized as poor. In order to become Core Web Vitals compliant your site should hit the recommended target of 75% for each metric. This means that a site should have a CLS score of 0.1 ms or less for 75% of their page loads in order to get a good ranking.

How to improve CLS?

• Use dimension for media = use set dimensions for all media on your site, images, video, animations, GIF, infographics, yes, everything. This way the browser can calculate how much space is needed for that element to load and the website will load steadily, instead of flying around and giving you a shitty CLS rank.
• Look over your ads = this goes hand in hand with the one above, make sure your ad elements have reserved space and set dimensions, or they can float around in the wrong places or pop up where they should not, sacrificing your CLS score. There are other things you can do to ensure that your website ads are not causing you a poor CLS score. Style the element before the ad tag library loads, don’t place sticky ads too close above the fold, meaning at the top of the viewport, and choose the determined size of an ad based on data, too small a size will leave empty space if a smaller creative fills the ad placement and too large a size will shift the content, leaving you with a poor CLS score.
• Be pre-cautious about your fonts = if you use fonts hosted online, the downloading and rendering of the font can cause a shift when the fallback font is replaced with the new font or an invisible font is displayed until the correct font is loaded and rendered. These are called FOUT, Flash of Unstyled Text, and FOIT, Flash of Invisible Text.
• Add new elements below the fold = keep all new elements below the fold, this way it will stay in place and not push content down. Also, CLS only counts shifts that happen above the fold. If the user can’t see the shift, it won’t affect your CLS score either. Pop-ups such as content suggestions and newsletter sign-ups can shift the rest of the page’s content, so be cautious about where you place them.

Where to pull the report?

Now that we’ve gone through the different components that Core Web Vitals Consist of, you may wonder, how will I know my current score? A very valid question at this point. Google has made it very easy for you to track your site’s ranking, they really want you to improve your site’s performance so why should they keep the report a secret. There are several ways where you can find out your ranking but the absolute simplest way is to open your Google Search Console (if you don’t have an account, make one right now) and pull open the Core Web Vitals report. This was formerly named Speed Test if you are confused about why it’s gone. You will get a full report on your status both for mobile and desktop, the rest is up to you to fix.

Conclusion

Key takeouts from the Core Web Vitals Metric CLS is that it measures the visual stability of a website. How long it takes for a website to remain stable, without any moving elements or shifts happening, that is CLS. You want your CLS score to be as low as possible, as this means that as little as possible is shifting. A CLS score of 0 is a cut-off score of excellence, and 0.1 seconds is the maximum score you want in order to be complaints as good. Content, media, and ads are usually the ones to blame for a poor CLS score, so make sure you use set dimensions for all forms of media on your website. Look over your ads, be cautious about when and where you place pop-ups. If you use hosted fonts, keep in mind that these can affect your CLS score. Keep in mind that CLS only counts shifts that happen above the fold, in the viewport, what the user can’t see, does not naturally affect your CLS score.

Thank you for following along on this 4-part series on how to improve your Core Web vitals. We hope that you got some valuable takeaways and that you are working on guaranteeing a good Core Web Vitals score. If you have any questions regarding Core Web Vitals or website monetization in general, please don’t hesitate to drop us a line at sales@kiosked.com and our team will be happy to answer your questions.

‍