How to check CLS

Record a page load in the Chrome DevTools Performance panel, then read the layout shift track and the CLS value for that session. A load-only trace under-reports it, so scroll and click while recording, and confirm the result against the field CLS for the same URL.

Why check this

CLS is the vital a tester can reproduce and a developer often cannot, because it depends on what the reader was doing when the layout moved. Run it on staging before release, and after any change to advertising slots, fonts, banners or image markup. The failure it prevents is the one users report as a mis-click: the button moves under the finger while a late element pushes the content down.

Prerequisites

• Chrome with DevTools. Record your own build from chrome://version.
• Node 20 or later, for fetch inside node -e.
• A list of the interactions real users perform on the page, because shifts after a click count toward the score.
• The metric definition on web.dev, Cumulative Layout Shift.

Steps

1. 1

   Step 1.

   Scan the served markup for images with no intrinsic size, the most common source of a shift.

   node -e "const html = await (await fetch('https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CORS')).text(); const imgs = html.match(/<img[^>]*>/g) || []; let unsized = 0; for (const tag of imgs) { const sized = /\swidth=/.test(tag) && /\sheight=/.test(tag); if (!sized) unsized += 1; console.log(sized ? 'sized  ' : 'unsized', (tag.match(/src=\"[^\"]*\/([^\"\/]+)\"/) || [])[1]); } console.log('img', imgs.length, '| unsized', unsized);"
   

   unsized fetching-page-cors.svg
   unsized simple-request.svg
   unsized preflight-correct.svg
   unsized include-credentials.svg
   img 4 | unsized 4

   This is the pre-filter, and it finds candidates only. A missing width or height attribute is a risk, not a shift. The browser decides.

2. 2

   Step 2.

   Open the URL in Chrome, press F12, go to the Performance panel and click the reload and record button. Read the CLS value and the layout shift entries on the timeline.

   CLS  0.00

   Four unsized images, and the recorded load shifted nothing measurable.

3. 3

   Step 3.

   Record a second trace and use the page while it records. Scroll to the bottom, open every menu, click the controls a reader clicks. Stop the recording and read CLS again.

   The number from this run is the one to report. A load-only trace ends before most shifts happen.

4. 4

   Step 4.

   Read the field CLS for the same URL, from the field section of the Performance panel or from PageSpeed Insights.

   CLS  0.05  (p75 of real Chrome users, scope: url)

How to read the result

| What you see | What it means | What to do | | --- | --- | --- | | Lab CLS 0.00 and field CLS 0.05 | Real sessions shift, your load-only trace did not | Re-record while scrolling and clicking, then compare again. | | CLS rises at one point on the timeline | One element moved the content | Click the shift entry, read the moved node, fix that node. | | CLS is 0 on desktop and fails on mobile | The narrow layout is the one that reflows | Re-run with device emulation before closing the ticket. | | Unsized images in step 1, CLS still 0 | The elements were reserved space by CSS instead | Leave them. Record the reason in the ticket so nobody re-opens it. |

Common mistakes

Thresholds

What to check next

• How to test core web vitals: the gate CLS belongs to, with the other two metrics.
• How to check LCP of a page: read from the same recording, in the same panel.
• How to check if images are lazy loaded: a lazy image with no reserved space is a shift waiting for a scroll.
• How to check render blocking resources: late stylesheets restyle the page after the first paint.
• How to check HTTP response headers with curl: confirm the document you traced is the one the server sends.

FAQ

How to check CLS in Chrome?

Performance panel, reload and record, then read the CLS value and the layout shift entries. Each entry links to the node that moved. Record a second trace while you use the page, because a recording that only loads it ends before most shifts happen.

Why does CLS differ between PageSpeed Insights and Search Console?

They report different things. PageSpeed Insights gives you a lab run plus field data for one URL, while Search Console groups similar URLs and reports the group. A URL inside a failing group can measure well on its own.

Does setting width and height on images fix CLS?

It removes one cause. The browser reserves the box before the bytes arrive, so nothing below the image moves. Fonts, injected banners, and content that loads after a click cause shifts that no image attribute touches.

Can I measure CLS without a browser?

No. CLS is computed from paint positions, which only a rendering engine has. A markup scan such as step 1 lists suspects and nothing more.

Verified

The browser figures above come from one Chrome DevTools capture of https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CORS on 2026-09-11, on one machine, with no CPU and no network throttling. That capture recorded a page load with no interaction. Read your own Chrome build from chrome://version and record it with your own numbers.