Update: You can now measure CLS in Google Chrome using the “Performance” tab. However, it’s not always accurate. The method below is still useful to get a visual of tricky elements.
Last week, Google made waves by introducing a new bunch of KPIs with regards to page speed, calling them “Core Web Vitals”. In addition to refining some existing ones like changing “First Contentful Paint” (FCP) to “Largest Contentful Paint” (LCP), they introduced entirely new measurements. One of these is the “Cumulative Layout Shift” or CLS. It measures the amount that your pages “move around” after display. Stable displays score higher on the core vitals index, and those with a lot of dynamic elements with resizing score lower.
However, measuring this CLS isn’t easy. For one, testing typically happens on the development machine that already has the caches primed, and where all the assets are at hand. As a result, the layout shift happens so quickly that the eye can’t see it. Second, even if you notice that the layout is changing, it’s not easy to identify what has changed.
While Google has given some guidance on how to identify the elements contributing to CLS, I haven’t found them useful. Instead, I found a way to visually identify what’s happening, and was able to bring my CLS down to zero.
Update: Using the Chrome Dev Tools
When I first wrote this post, there wasn’t an easy way to see the elements leading to a CLS shift. Since that time, Google Chrome now has a feature in the “Performance” tab that allows you to see this. Here’s a post explaining how to measure CLS using Chrome. However, sometimes Chrome doesn’t measure what the user actually sees. And for this purpose the technique below is super useful.
Changing the Site Loading Speed
The first step to identifying what needs to change is to drastically slow down the speed at which your site loads on your testing machine. I’m talking really slow. My current bandwidth is 100 Mbps. I want to reduce that to 100 kbps. Literally thousands of times slower so I can clearly visualize when the layout shift is happening, and which elements are contributing to it.
A simple way to do this is to use Chrome’s development tools to restrict the bandwidth. On the tab that displays your page, bring up the development tools by pressing “Ctrl+Shift+I”. Now under the “Network” tab, see the dropdown box labeled “Online”. Click that to see a bunch of preset speeds:
The in-built presets are meant to test your site experience on slow connections. But we don’t want that. We want our connection to be unrealistically slow so that we can see everything in slow motion. to do that, we can create a custom speed by clicking “Add”. Now you can create your own speeds by typing in the upload and download rates into the boxes and adding your own profile.
Once done, select it from the drop-down box and start loading your page.
Visualizing the Layout Shift – Inline CSS was the Culprit
Now when your page loads slowly, you can see exactly which elements are resizing, and by how much they move things around. In my case, I found that the font sizes were changing because I was loading some inline CSS that was being overwritten by the actual CSS after it was downloaded. Since my CSS is preloaded and only downloads after the page has rendered, this was causing a significant layout shift. Not too much, but enough to draw the attention of Google.
So I made the changes to my inline CSS to match the final CSS rules that would apply, and voila! My CLS values suddenly dropped to zero as shown here:
I believe my method of visualizing CLS is superior to the approach suggested by Google which involves measuring the performance of the site using the “Performance” tab and then seeing where the CLS occurs. This is because in the latter approach, you don’t get to see for yourself exactly what’s happening. But it can be useful because the browser takes snapshots of your page as it loads, and this allows you to slowly move your cursor over the timeline to see what’s changed, and which elements are causing the layout to move.
Bottom Line
Using a combination of slowing down your Internet connectivity and looking at the string of screenshots on the Google performance monitor, you can get your Cumulative Layout Shift down to zero. Even though Google says this change will affect rankings only in 2021, it’s good to get ahead of the curve right now, don’t you think?
I’m a NameHero team member, and an expert on WordPress and web hosting. I’ve been in this industry since 2008. I’ve also developed apps on Android and have written extensive tutorials on managing Linux servers. You can contact me on my website WP-Tweaks.com!
Great article I have seen so many people looking for answers to the new core values update and how to fix CLS issues.
I have found the naughty elements causing my CSL to show as needs improvement but I have no idea why they doing it.
Mine is for mobile test and the menu and the title (H1) of my article are showing as the cause but as a non-coder I don’t think it will be something I can fix myself.
I did get rid of FIOT issues though by just pasting a tiny 2 word bit of code onto the end of the google font API code.
This article is of great help, I was now able to confirm that changing fonts are what causes Google to complain about my site as well.
But just as John said, I am “not a coder”, and I don’t know how and where to change this. It would be a great addition to this article to give some insight and examples.
Google is ridiculous, they want to destroy bloggers little by little adding more factors that require more technicalities. why not focus on quality content?
I agree, it would be nice if you explained steps on how to fix this instead of just listing the problem.
Loved this article, but have you any examples of what the upload/download latency speeds should be?
Even with 1kb upload and doanload it’s still zipping by me!
1. After making the settings, example, I used 10kb down, 0.25kb up, 1000ms latency.
2. Save (I saved mine with ‘loadslow’)
3. Close the settings box (it should take you back to the console).
4. Still Under ‘Network’, from the list where you saw ‘Custom, Add’, just select the new network you created (in my case, ‘loadslow’).
5. Reload the page.
Hi Thanks for the guide, Even i am using inline css, does those really effect CLS? i have currently 0.44s CLS, looking for a solution.
How to repair CLS on this financial webiste?
Hi, I want to optimize PageSpeed Insights on my website. I am using twenty seventeen theme. If you check this link https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fhireme1st.com&hl=en you’ll see the page report that shows CLS 0.99
Please help me how to bring it to 0 as you mentioned in your article. Thanks
NIce and helpful article thanks
Thanks for such a nice information. we are actually fighting with CLS as it impacts our rank in serp
Why not go into the performance tab and profile the page. It gives you more info than you need
It does. However, when I first wrote this article, that feature wasn’t available in Chrome!
I’ve written a new post showing how to use Chrome’s dev tools for this: https://www.namehero.com/blog/how-to-identify-cls-issues-using-google-chrome/
My website’s Core Web Vitals for Mobile LCP & FCP is 5.9s and LCP is 0. But for desktop is is fine. Please guide me how to optimize for Mobile version. Or Core Web Vitals are introduced for Mobile User Experience.
Thanks Bagwad, Now my webpage’s CLS is optimized but please give a link to read about how to improve LCP. My CLS is 0.041 but LCP is 2.5s, please help me to improve it. You can check my webpage URL: https://irishvacancy.com/dublin-airport-jobs/
Hi Patrick, thanks for stopping by! You can check out how I improved my LCP here: https://www.namehero.com/blog/quic-cloud-with-namehero-500-ttfb-reduction/
Hi Bhagwad,
Thanks for writing a very important article today. Core web vitals are now a major headache. I have read all your articles regarding Core Web Vitals and I have tried my best but still I am not getting the results I am looking for. If you please check my website https://gimseo.com in PageSpeeds Insights and suggest me any solution. I am sharing the latest METRICS:
First Contentful Paint
1.6 s
Largest Contentful Paint
4.2 s
Total Blocking Time
570 ms
Cumulative Layout Shift
0
LCP results making me exhausted.
Hi,
I see other people’s comments, I am sure you will help me to solve the issue. My domain https://veritify.ae is using valid version of WP-Rocket and cloudflare. I check my website in Google PageSpeed Insights and I see “Orange” circle for LCP. Please help to optimize LCP, Thanks the details are mentioned below:
Diagnose performance issues
Performance: 95
Accessibility: 84
Best Practices: 96
SEO: 97
METRICS
First Contentful Paint = 1.4 s
Largest Contentful Paint = 2.8 s (Please tell me how to make it green as well)
Total Blocking Time = 30 ms
Cumulative Layout Shift = 0
Speed Index = 2.2 s
Hi Bhagwad,
I thoroughly enjoyed reading your blog and applied the steps you outlined. I achieved a PageSpeed score of 98, but recently, all my web pages’ CLS scores have dropped into the red at 0.45. The issue persists across all pages of my WordPress blog, which focuses on Jobs in the UK (https://ucareers.co.uk). Could you please guide me on how to bring the CLS back to a normal level, such as 0.10?