--- title: "Identify & fix Google CLS: cumulative layout shift (core web vitals)" description: "Just when we all got up to speed with Google PageSpeed optimisation tricks, there's a new set of metrics to worry about. Nevertheless, it's a good thing - having specific metrics and rating..." url: https://nimble.help/google-cls/ date: 2020-11-10 modified: 2022-08-15 author: "Lukas Cech" image: https://nimble.help/wp-content/uploads/google-cls-cumulative-layout-shift-nimble-1.png categories: ["SEO", "Useful info", "Website speed optimisation"] tags: ["core web vitals", "google cls", "google rank", "pagespeed optimisation"] type: post lang: en --- # Identify & fix Google CLS: cumulative layout shift (core web vitals) Just when we all got up to speed with Google PageSpeed optimisation tricks, there's a new set of metrics to worry about. Nevertheless, it's a good thing - having specific metrics and rating calculations helps us narrow down the areas of improvement to focus on. One such metric is **Google CLS** - cumulative layout shift. Let's see how to identify & fix those pesky shifting areas! ## What is Google CLS - cumulative layout shift? > "Cumulative Layout Shift (CLS) is an important, user-centric metric for measuring visual stability because it helps quantify how often users experience unexpected layout shifts—a low CLS helps ensure that the page is delightful"(https://web.dev/cls/) First of all, it's a metric focused on the actual user experience. In layman terms, it checks whether there's an element of the website that shifts after it's been loaded and shown to the user. This animation explains its aim best: https://storage.googleapis.com/web-dev-assets/layout-instability-api/layout-instability2.webm We all hate when you intend to click on a button or a link and a pop-up or a notification moves it away from underneath your cursor. Without going into (https://web.dev/defining-core-web-vitals-thresholds/), at the end your website is assigned a score: - anything up to 0.1 is **GOOD** - anything above that is **BAD**, the higher, the worse your overall PageSpeed / Core web vitals score !(https://webdev.imgix.net/vitals/cls_4x3.svg) ### Why is Google CLS important? First of all - it is important because your users will enjoy your website more if they are not annoyed by shifting elements. But let's not pretend that our top priority isn't ranking better on Google, so: **Google CLS is part of Google Core Web Vitals and from 2021, it is going to impact your Google ranking.** According to (https://www.searchenginejournal.com/google-all-core-web-vitals-must-be-met-for-ranking-boost/394358/). > (https://web.dev/vitals/#core-web-vitals) are a set of real-world, user-centered metrics that quantify key aspects of the user experience. They measure dimensions of web usability such as load time, interactivity, and the stability of content as it loads (so you don’t accidentally tap that button when it shifts under your finger - how annoying!).(https://webmasters.googleblog.com/2020/05/evaluating-page-experience.html) ## By how much can CLS (cumulative layout shift) impact your PageSpeed rating? **Short answer - up to 5 points**.* But if you want more info or see the calculation for yourself, just click on the **See Calculator** link in PageSpeed results: ![](https://nimble.help/wp-content/uploads/image-17.png) There, you can play with the values and see their impact: https://youtu.be/FCo7x-Ceb5c * *I've tested it with several sites with various values and the max impact was always 5 points. If you'll find different numbers, let me know!* Should you worry about it then? It's up to you - 5 points isn't much, but if it's an easy fix, why not. But if you want something with a bigger impact, focus on another **core web vitals metric - LCP - largest contentful paint**. LCP can add between 5 to 30+ points to your PageSpeed rating, so it's worth spending time on. At the same time - it's harder to get the best rating if you're not on a really good hosting and have everything above the fold optimised. I'm writing a post on that too, will add a link here once it's finished. ## How to identify Google CLS - shifting elements? There are now several ways to see which elements impact your CLS score - here are the easiest ones: ### 1. Use your built-in Chrome browser developers console: - go to the page you want to test and open the console by pressing **CTRL + SHIFT + I** - go to the **PERFORMANCE** tab - run a new report by pressing **CTRL + SHIFT + E** - you'll see a **RED** bar called **LAYOUT SHIFT** in the **EXPERIENCE** row: ![](https://nimble.help/wp-content/uploads/image-16-1280x404.png) - hover over it and it will highlight the element that is shifting according to Google - CLS might be caused by more than just one element, so there will be either more Layout Shift red fields, or if you click on one of them, you'll see a list of all offending classes and elements below it (**but be aware that it's possible all these shift because of a single culprit - like a header menu that first loads open - unformatted as a list, then shifts to a mobile menu.)** ### 2. Use the updated GTMetrix report - Structure tab Test your website using GTMetrix and then click on the **Structure **tab and navigate to the **Avoid large layout shifts** section: ![](https://nimble.help/wp-content/uploads/image-24.png) ## What can cause cumulative layout shift and how to fix it? **→** **How about a preloader?**: I thought that using a (https://wordpress.org/plugins/preloader-plus/) could hide some shifting elements on page load (f.e. when you optimize the CSS and it loads a bit later, your header might show a flash of unformatted HTML. Preloader hides that - great right? No. It will hide the content of the screen until it's fully loaded, so the users won't see the content shifting. But Google seems to see the content anyway (I've tested a site with and without a preloader and both scored 1.19 (with) and 1.17 (without). Marginal difference. And the preloader increased **Largest Contentful Paint** time, therefore offsetting any gain you might get from a lower CLS. https://wordpress.org/plugins/preloader-plus/ ### New items on the screen This is the most obvious reason is highlighted in the video above - any notification, moving object, box that appears on the screen afterload and pushed content away from its original position will cause cumulative layout shift. These can be: - Ads - I'm sure you've been annoyed by many "above main menu / header" ads that push the entire website down. - Embeds and iframes without dimensions - any embedded content that doesn't have a space reserved and only appears once it's loaded. - Dynamically injected content - content you inject into already loaded content after user interaction #### How to fix / minimize it? - Avoid any objects that push other objects away from their original position. Just don't do it. - If you have to show a notification at a later stage after page load has finished - do it in a space, that is already prepared - reserved for it (blank on page load). - overlay the dynamically injected content - so that it covers the original content instead of pushing it. This is good for small elements (like bottom privacy notification), not very good for big / full-screen elements ((https://webmasters.googleblog.com/2016/08/helping-users-easily-access-content-on.html)) (https://web.dev/optimize-cls/#ads-embeds-and-iframes-without-dimensions)(https://web.dev/optimize-cls/#ads-embeds-and-iframes-without-dimensions)[.](https://web.dev/optimize-cls/#ads-embeds-and-iframes-without-dimensions) !(https://webdev.imgix.net/optimize-cls/hero.png) ### Images without dimensions (or lazy loaded) Before the image is loaded, the browser thinks the image element will be small. Suddenly, the image loads with its dimensions and shifts all content below it down. #### How to fix / minimize it? Make sure all your images have width and height size attributes defined. Or you can use (https://css-tricks.com/aspect-ratio-boxes/) to tell the browser how much space to reserve for each element. **→**PRO TIP - I've also seen that a **lazy loaded image** in the header pushed the menu down when finally loaded. I couldn't edit the height of the section to fix that, so instead, I've pre-loaded this image specifically using this simple code: ``` - ``` (https://web.dev/optimize-cls/#images-without-dimensions) ### Web Fonts causing FOIT/FOUT FOIT = flash of invisible text = your text isn't visible until the font is loaded - FOUT = flash of unformatted text = your text is visible in a different (system/fallback/default) font until the actual font is loaded. That interim font might be different weight or size, causing the element with the text in question to change the size and shift other elements. #### How to fix / minimize it? - use system fonts (speeds up your website too) - use (https://web.dev/font-display/) - preload fonts - load fonts locally + preload For example - the CLS screenshot I used above was from this website, when I was loading Montserrat font for the main menu. That caused CLS, because the font letters are wider than default. When I switched to system Arial font, CLS disappeared. You can see more use cases and solutions in Google's "(https://web.dev/optimize-cls/)" post for all these areas. ## Conclusion Should you worry about Google CLS and is it hard to fix? The answer is *Yes* and *Maybe*. Yes - you should check your website and make sure you don't have any cumulative layout shifting going on if you want to give your website the best chance in achieving top positions in Google results. Maybe - some items are a quick fix (like using a system font instead of a Google font), others might take longer to fix. #### Looking for a Google CLS / Core Web Vitals Expert? Look no further, [**drop me a line**](/contact-2) - I'm happy to help :)