How To Debug Cumulative Layout Shift in Chrome Dev Tools?

Share This Post

Developers have been trying to improve website speed since Google announced that Core Web Vitals would be a consideration in search results.

Everyone has been working to improve their cumulative layout shift (CLS). This post will explain what CLS is and how to use Chrome Dev Tools to troubleshoot Cumulative Layout Shift.

What is Cumulative Layout Shift?


A layout shift occurs when a website loads data into the DOM asynchronously and the page’s content is moved down. This problem is ubiquitous due to the extensive usage of Javascript and async content loading.

Multiple items on a website may move independently, and the aggregate of these elements gives us the Cumulative Layout Shift measure.

A high CLS gives the user a terrible experience since components tend to move about the screen and may even cause misclicks.

How to Check Your Cumulative Layout Shift?


There are other techniques to check for CLS, however, we will use Google Dev Tools. To measure our CLS, we will utilize Lighthouse through Google Dev Tools.

Open Chrome Dev Tools by hitting CTRL + SHIFT + I (Windows) or CMD + Option + I (Mac) and click the Lighthouse tab at the top. Make sure Performance is checked and hit Generate Report.How to Check Your Cumulative Layout Shift?

There are other techniques to check for CLS, however, we will use Google Dev Tools. To measure our CLS, we will utilize Lighthouse through Google Dev Tools.

How to Check Your Cumulative Layout Shift?

How to Debug Cumulative Layout Shift in Chrome Dev Tools?


Now that we have a CLS metric, we need to figure out what’s causing it. This is made simple with Google Dev Tools.

Click the Menu button in the upper right corner of Dev Tools. Then, under More Tools, choose Rendering.

You should now have access to a rendering tab. Check Layout Shift Regions when this tab is chosen.How to Debug Cumulative Layout Shift in Chrome Dev Tools?

Go back to your page and refresh it. For a brief second, a blue box will appear over your components. This box represents your Layout Shift.

You should pay attention to these components and ensure that they do not move other items on your website as they load.

You may also see your webpage frame by frame. While still in Chrome

Dev Tools, go to the Performance tab, select Screenshots, and click the little refresh button. Chrome will create a performance profile for you, and you will be able to see your site’s produced screenshots by scrolling through the timeline frame by frame.

Look for items that move between frames.

How to Debug Cumulative Layout Shift in Chrome Dev Tools?

You now understand how to use Chrome Dev Tools to debug Cumulative Layout Shift.

Google Chrome has a plethora of helpful features, and new ones are constantly being introduced. Try employing some of the ideas in this post to see if you can enhance the CLS of your website.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Related Posts

Get Permalink of Page Outside of The Loop in WordPress

WordPress users occasionally encounter situations where they need to...

How to find GPU Temperature in Windows 10?

Windows 10 has a plethora of diagnostic and monitoring...

How to open or create Armor sets in Runescape 3?

Making or unpacking Armor sets is a frequent way...

Why people buy Burnt Meat in RS3?

Players will occasionally approach you in the Grand Exchange...

Ironmen Feather Shops – What you need to know!

Feathers are one of the most difficult resources for...

What you need to know about Al-Kharid Archeology Money Making

Archeology, Runescape's newest talent update, has generated various AFK-friendly...
spot_img
- Advertisement -spot_img