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

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

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:

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?