Jump to content

How to identify Cumulative Layout Shifts (CLS)


Recommended Posts

How to Identify Cumulative Layout Shifts

With Core Web Vitals upon us, people are scrambling to optimize their sites. Mostly a waste of time, but it is what it is.

Out of the 3 Core Web Vitals, cumulative layout shift (CLS) is the one I have seen people having the most trouble identifying. Obviously, seeing your score is easy in Pagespeed Insights, Lighthouse, or web.dev, but now how do you identify what is actually causing any shifts on your pages?

It’s pretty simple actually. To do so, you are going to want to use Chrome’s Web Developer Tools.

-Open the page you want to check in Chrome.

-Click the dropdown menu on Chrome.

-Go to More tools >> Developer tools

This should open you up into a screen that shows Lighthouse and a bunch of other options along a menu at the top.

-Click on the Performance tab at the top.

-Then click on what looks like a refresh icon.

-Let it load, and you will end up with something like the attached screenshot.

If you have cumulative layout shifts happening, they will appear as red bars under the Experience row. You can zoom in on them a little bit by hovering your mouse over that area and using the mouse scroll wheel. (At least on PC’s. I have no idea how to do it on inferior Mac machines.)

You can also click and drag the whole thing around if things start moving off the screen as you zoom in.

If you hover over the red bars, in the website pane on the left it will highlight where that shift is happening.

By the way, while you are here, you can also identify your Largest Contentful Pain (LCP) element as well. In the Timings row, you will see a black box labeled LCP. Hover over it and it will highlight your LCP element.

1.png

2.png

3.png

4.png

5.png

6.png

7.png

Link to comment
Share on other sites

Grow your online visibility

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.