VISUAL STABILITY · FOLLOW THE MOVEMENT

Layout Shift Evidence Explorer

Find the burst that moved your page. Inspect each shift, connect it to moved elements, and turn the evidence into a focused repair plan.

Imported evidence only
THE BIG PICTURE

Shift timeline

Largest windowOther unexpected shiftRecent input · excluded

Windows reset at a gap of 1,000 ms or a span of 5,000 ms. Review tags and list filters never change the score.

Event evidence

TimeShift valueMoved elementCountingReview
ONE SHIFT AT A TIME

Inspect & annotate

Movement evidence

Previous rectangleCurrent rectangle

Moved elements show what shifted, not necessarily what caused it. Rectangles are supplied evidence; this diagram is not a page screenshot.

Attach before / after screenshots optional · this session only

PNG, JPEG or WebP, up to 8 MiB and 16 million pixels each. Images stay attached only in this tab and are not included in saved projects.

Moved-element summary

Associated scores can overlap: one shift can move several elements. These rows are not additive and do not prove the root cause.

Preparing example…

Have no recording yet? Get the local capture snippet

On a site you control, review and run this JavaScript in that page’s developer console. In a browser with Layout Instability API support, it records main-document shift entries and downloads JSON when you call stopLayoutShiftCapture(), or after two minutes. It sends no network requests. It does not capture cross-origin iframe shifts or produce a field Core Web Vitals assessment.

The capture contains page path, element labels and rectangles. Review it before sharing. A truncated or partial recording can miss a larger window. Separate navigations and recordings must be analyzed separately.

From a jumpy page to a useful fix

  1. Find the burst. Start with the highest-scoring supplied window. Recent-input shifts remain visible but do not contribute.
  2. Inspect the evidence. Compare rectangles and optional screenshots. Note suspected causes, such as an unreserved slot, then plan a test.
  3. Verify with a new capture. Export the repair brief, make your change and measure again. Marking an event resolved does not remove its original measured value.

JSON supports event arrays, an events/entries recording or a version 2 saved project. CSV needs startTimeMs,value,hadRecentInput, with optional selector, notes, state and JSON-encoded sources/viewport. Exported CSV also carries idJSON/noteJSON to preserve text exactly. Up to 5,000 events and 8 MiB. No live crawling, automatic root-cause detection, Chrome trace import or full-session/field CLS certification. Public pages include approved advertising; see privacy information.

References: CLS and session windows · Layout Instability API.

Using Layout Shift Evidence Explorer

Inspect an imported layout-shift recording with session windows, a selectable timeline, moved-element diagrams and repair notes. Find the largest burst in the supplied evidence.

  1. Try the synthetic newsroom example: its largest supplied window is 0.16; a 0.30 recent-input event remains visible but is excluded.
  2. Import a JSON event array, recording or saved project, or CSV containing startTimeMs, value and explicit hadRecentInput flags. Use the optional local capture snippet on a site you control.
  3. Select a session window or event. Inspect supplied movement rectangles, attach optional screenshots and record a hypothesis, review state and next test. Apply event changes before switching.
  4. Save a JSON project, export a lossless structured event CSV or download a repair brief. Verify repairs by capturing a new recording; review tags do not change the measured score.

Example

The newsroom example groups three unexpected shifts at 800, 1450 and 2080 ms into a 0.16 window. A recent-input event is excluded; later widget and newsletter shifts form separate smaller windows.

Questions & answers

Is this the same as my Google field CLS score?

No. This computes the largest window only within the supplied recording. It does not crawl a site, assess field percentiles, capture cross-origin iframe shifts or certify a complete page lifecycle. Separate navigations must be analyzed separately.

How are windows and recent input handled?

Only positive-value events without recent input count. A new window starts when the gap reaches 1000 ms or the span from the first event reaches 5000 ms. Excluded input and zero-value events do not bridge windows.

Do moved elements identify the cause?

They show affected elements, not necessarily the root cause. Compare supplied rectangles and screenshots, record a hypothesis and test it. Associated element scores overlap when one event has multiple sources, so they must not be added together.

What happens when I mark an event resolved?

The review tag changes, but its measured score is preserved. Import a fresh recording to demonstrate improvement. Editing times, values or recent-input flags changes your working recording; keep an original copy if needed.

What can I open and download?

Import JSON arrays, events/entries recordings, version 2 projects or CSV, up to 5000 events and 8 MiB. Save/reopen a project, export CSV with nested sources/viewport JSON, download a JSON report or a printable HTML repair brief. PNG/JPEG/WebP screenshots are session-only and are not embedded.

How does the capture snippet work?

Review and run the downloaded JavaScript on a site you control in a browser exposing layout-shift entries. Call stopLayoutShiftCapture(), or wait two minutes, to download up to 5000 main-document events. It makes no network requests. Review page paths, element labels and rectangles before sharing.

Help improve this tool

Report a problem or suggest an improvement

Describe the issue without pasting private tool input. Feedback goes to our admin inbox.

Find another tool · Read practical guides