• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
NameHero® Blog

NameHero® Blog

Web Hosting Tips & Resources From NameHero

  • Hosting
    • Web Hosting
    • WordPress Hosting
    • WooCommerce Hosting
    • Enterprise Hosting
  • VPS
    • VPS Hosting
    • Flex VPS
  • Reseller
  • Email
  • Gaming
  • Domains
  • Website Builder
  • Account
  • Blog Home
  • Categories
  • Authors

How I Dropped My Cumulative Layout Shift (CLS) To Zero

Bhagwad Park

Published on: June 1, 2020

Categories: SEO Tips 19

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:

Artificially Lowering the Internet Speeds on Chrome
Artificially Lowering the Internet Speeds on Chrome

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:

Cumulative Layout Shift (CLS) Dropped to Zero
Artificially Lowering the Internet Speeds on Chrome

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?

Bhagwad Park Profile Picture
Bhagwad Park

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!

Reader Interactions

Comments

  1. John says

    June 10, 2020 at 6:09 am

    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.

    Reply
  2. Volker Forster says

    September 27, 2020 at 12:35 pm

    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.

    Reply
  3. stefan says

    November 18, 2020 at 11:54 pm

    Google is ridiculous, they want to destroy bloggers little by little adding more factors that require more technicalities. why not focus on quality content?

    Reply
  4. Sondra Barker says

    December 3, 2020 at 11:40 am

    I agree, it would be nice if you explained steps on how to fix this instead of just listing the problem.

    Reply
  5. Sean Conroy says

    December 4, 2020 at 8:26 am

    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!

    Reply
    • Betagamers says

      January 28, 2021 at 8:26 pm

      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.

      Reply
  6. Amit Yadav says

    December 10, 2020 at 5:14 am

    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.

    Reply
  7. Mobilnezarabianie says

    December 15, 2020 at 6:24 pm

    How to repair CLS on this financial webiste?

    Reply
  8. MS Bhatti says

    February 13, 2021 at 1:32 am

    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

    Reply
  9. Azam says

    March 1, 2021 at 9:38 am

    NIce and helpful article thanks

    Reply
  10. Joao says

    April 9, 2021 at 5:40 am

    Thanks for such a nice information. we are actually fighting with CLS as it impacts our rank in serp

    Reply
  11. Jake says

    April 28, 2021 at 12:29 pm

    Why not go into the performance tab and profile the page. It gives you more info than you need

    Reply
    • Bhagwad Park says

      May 3, 2021 at 1:01 pm

      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/

      Reply
  12. M Ismaeel says

    February 10, 2023 at 11:19 am

    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.

    Reply
  13. Hennry Patrick says

    April 19, 2023 at 8:10 am

    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/

    Reply
    • Bhagwad Park says

      April 19, 2023 at 11:11 am

      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/

      Reply
  14. Asif Mehmmod says

    June 19, 2023 at 12:09 pm

    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.

    Reply
  15. Veritify says

    April 27, 2024 at 10:00 am

    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

    Reply
  16. UCareers says

    January 5, 2025 at 8:51 am

    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?

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Follow & Subscribe

Exclusive promos, content and more!


Most Popular Posts

NameHero’s Recommended WordPress Plugin and Theme Setup (2024)

WordPress Hosting vs. Web Hosting – What’s The Difference?

How To Increase The InnoDB Buffer Pool Size

How To Fix A Stuck All-in-One WP Migration Import

How To Add A Subdomain In Cloudflare

Top Categories

  • WordPress
  • WordPress Tutorials
  • Enterprise Hosting
  • WooCommerce
  • Web Hosting
  • Resellers
  • Website Security
  • Website Development
  • Website Performance
  • VPS Hosting
  • SEO Tips
  • Announcements
  • Domain Registration
NameHero

NameHero® proudly provides web hosting to over 40,000 customers with 99.9% uptime to over 750,000 websites.

  • Master Card
  • Visa
  • American Express
  • Discover
  • Paypal
Products
  • Web Hosting
  • VPS Hosting
  • Flex VPS Hosting
  • WordPress Hosting
  • WooCommerce Hosting
  • Reseller Hosting
  • Enterprise Hosting
  • Email Hosting
  • Game Hosting
  • Domains
  • Website Builder
Help & Support
  • NameHero Blog
  • NameHero Gaming Blog
  • Support
  • Help Center
  • Migrations
  • Affiliates
  • Gaming Affiliates
  • Call 1-855-984-6263
Company
  • About Us
  • Contact Sales
  • Reviews
  • Uptime
  • We're Hiring

Copyright © 2025 Name Hero, LLC. All rights reserved.
NameHero® is a registered trademark.

  • Privacy Policy
  • Terms of Use
  • Acceptable Use Policy
  • Payment Policy
  • DMCA