How To Debug Cumulative Layout Shift in Chrome Dev Tools?

spot_img

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

Why You Are Seeing 888 – The Meaning Of Angel Number 888

Angel numbers are the guiding signals in life. They...

Angel Number 44: Sacred Meanings and Symbolism

When any number starts appearing in your life, especially...

Best Pool Chlorine Tablets to Keep Your Pool Clean

Maintaining the proper chemical balance of chlorine solutions, sanitizers,...

ADATA HD710 Review

Hard disks have become a way of life these...

Angel Number 777: Sacred Meanings and Symbolism

As we journey through life, we go through various...

Angel Number 777: Sacred Meanings and Symbolism

As we journey through life, we go through various...
spot_img
- Advertisement -spot_img