I still get a lot of requests from my previous post on the NameHero blog on how I dropped my CLS to zero. But since that time, Google’s Chrome has come out with new debugging tools that allow you to more accurately pinpoint exactly which elements are causing layout shifts. Here’s how to use it.
Even though I now use Firefox over Chrome, I have to admit that Chrome’s developer tools are better than those used by Firefox. It’s hardly surprising that Chrome now includes CLS detection, since Google was the one pushing the metric in the first place!
Collecting CLS Field Data
Some online tools like web.dev will give you a readout of your CLS that might not reflect what uses face in real life. In fact, you might get different results in your own browser, compared to API tools like PageSpeed insights. The Google Search Console only gives you very incomplete information about Core Web Vitals and CLS. To get all the data, read my earlier post about obtaining the CLS field data directly.
Once you’ve determined that you need to improve your CLS, you can proceed to debugging with Google Chrome.
Step 1: Open the “Performance” Tab in Chrome
Fire up Chrome, and load the website that you want to test. Make sure it’s fully loaded. Now press Ctrl+Shift+C or hit F12 on your keyboard to bring up the developer tools. Select the “Performance” tab as shown below:
Once you’ve opened the tab, it’s time to run the report.
Step 2: Activate the Report
To activate the report, you need to:
- Click the reload button
- Click the “Stop” button once the page has loaded (usually just a few seconds)
The performance report will then be generated for the time between you reloaded the page and pressed the stop button.
Step 3: Evaluating the Results
Here is the sample output of the performance report for my site WP-Tweaks:
If the browser detects any kind of layout shift, it will indicate it via a pink rectangle that looks like the one in the screenshot above. This will tell you the moment when the layout shift occurred. Also, it will highlight the exact element that caused the layout shift.
If you click the rectangle, you can see further details in the “Summary” tab. It will tell you the old and the new coordinates for the moved element.
And that’s how you identify CLS elements in your webpage using Google Chrome!
Unfortunately, It’s Not Prescriptive
Chances are, the Google Chrome tool will help you zero in on what’s causing your problems. However, it’s equally possible that the data will be useless. In the above screenshot for example, the tool says that the culprit is just a regular paragraph. How is that possible? It’s probably caused by something else and the debug API is only measuring the final effect.
So it’s still up to you to find out what exactly is causing the layout shift. You can try redoing the procedure by modifying the horizontal and vertical screen size, and testing various pages. I can guarantee that you’ll get different results in many cases, which will hopefully clue you into what’s going on.
I suppose we should be grateful that such a tool exists, but it can still be a slog. Particularly if you’re not a developer and have no idea how to fix a problem – even if you can identify it correctly! In extreme scenarios, you might have to hire a developer to try and fix the problem for you. But hopefully you’ll have enough clues to solve it on your own. Good luck!
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!