spot_img

How To Debug Cumulative Layout Shift in Chrome Dev Tools?

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.

spot_img

Subscribe

Related articles

OnePlus 5T Wallpapers Download

Introduction: The OnePlus 5T is a popular smartphone known for...

Airtel’s First Quarterly Loss in 2002: A Closer Look at Jio’s Impact

The telecom industry has witnessed several significant shifts over...

Xiaomi Confirms Investment in Blackshark Gaming Phone Launch set for April 13

An engaging introduction to Xiaomi Confirms Investment in Blackshark...

LG G7 ThinQ M LCD Panel

Introduction:The LG G7 ThinQ M LCD panel is a...

Intel Core i9 Laptops with Optane Memory

Intel Core i9 laptops with Optane Memory combine the...

Apple iOS 11.4 Beta 1

Apple iOS 11.4 Beta 1 is the latest update...

Google Search AI Reorganization: Improving Search Quality and User Experience

Introduction:In the ever-evolving digital landscape, search engines play a...
Peter Graham
Peter Grahamhttp://fix-iphones.com
Hi there! I'm Peter, a software engineer and tech enthusiast with over 10 years of experience in the field. I have a passion for sharing my knowledge and helping others understand the latest developments in the tech world. When I'm not coding, you can find me hiking or trying out the latest gadgets.

LEAVE A REPLY

Please enter your comment!
Please enter your name here