Why it matters
Cumulative Layout Shift is the Core Web Vital people find hardest to reason about: the score isn't how far things moved, but the share of the screen that moved multiplied by the furthest distance anything moved, added up within session windows. A 1200-pixel image that loads without dimensions near the top can cost more than a dozen small shifts below the fold, and a cookie banner inserted above the content moves everything on screen at once.
This simulator renders your page in a sandboxed frame and then plays a timeline you write: an image finishing loading, a banner inserted before the main content, the web font swapping in, an ad slot removed, a user tap. After each event it measures every element's position in the real browser layout, takes the union of the moved areas inside the viewport as the impact fraction and the largest move as the distance fraction, and multiplies them, exactly as the Layout Instability spec scores a shift. Shifts within half a second of input don't count, shifts are grouped into session windows, and the worst window is your CLS, rated against Google's 0.1 and 0.25 thresholds. Turn on the fixes to see the score with image dimensions reserved and inserted content shown as an overlay.
How it works
- InputThe HTML, CSS and what loads after first paint
- In your browserReplayed in a frame; every shift measured as the browser does
- OutputCLS, the worst session window and the fix for each shift
Where it fits in a designer's workflow
- Plan
- Design
- Build
- Test
- Launch
By the numbers
Show the numbers as a table
| Time | Event | Impact × distance | Score | Moved |
|---|---|---|---|---|
| 0.6 s | load img.hero 1200x675 | 71.4% × 25.3% | 0.1808 | h1 ↓177px, p.lead ↓177px, img.thumb ↓177px, details.faq ↓177px, p ↓177px |
| 0.9 s | insert before main: <div class="cookie">We use cookies to run the bas… | 91.9% × 8.0% | 0.0735 | main ↓56px |
| 1.4 s | style body: font-family: Georgia, serif | 0.5% × 4.0% | 0.0002 | button ←28px |
| 2.6 s | input | No shift | 0 | — |
| 2.8 s | insert append .faq: <p>8 to 10 weeks, then a delivery slot of your ch… | Within 500 ms of input: not counted | 0 | — |
| 3.2 s | load img.thumb 400x300 | No shift | 0 | — |
How to use it
- Paste the page's HTML and CSS.
- Describe what happens after the first paint, one event per line.
- Read each shift's score and the fix.
- Apply the fixes and compare.
FAQ
How is a layout shift scored?
Impact fraction times distance fraction. Impact is the share of the viewport covered by moved elements, before and after the move. Distance is the furthest any element moved, divided by the viewport's larger side.
What's a good CLS?
0.1 or less is good, up to 0.25 needs improvement, and above that is poor, measured at the 75th percentile of real visits.
What are session windows?
Shifts less than a second apart are grouped, up to five seconds per group. CLS is the largest group's total, so a long page visit isn't punished for scattered small shifts.
Why don't some shifts count?
Shifts within 500 ms of a tap, click or key press are expected responses to the user, so they're excluded.
Are the scores the same as Chrome's?
They use the same formula on a real layout, but only for the elements and events you describe. Real pages also shift from late CSS, ads and scripts; check field data in Search Console or CrUX.
