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.
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 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.
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.
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.
