Common Cumulative Layout Shift mistakes that still ship

I keep a short list of CLS mistakes that survive code review. None of them are exotic. They come from treating a quiet desktop load on office Wi-Fi like a stability review. I still reach for curl first when something feels off. Curl will not tell me the hero shoved the headline. A real browser pass will.

SlaySlop's Cumulative Layout Shift check "Checks for visual instability during page load." The mistakes below fight that observation point.

Outcome if you catch these early

You get tickets that name pages and suspect nodes instead of "make it smoother somehow." Agencies that keep this boring tend to keep clients. The call stays about evidence, not vibes.

Boundaries

Read-only public scan. Permission required. Not a pentest. CLS sits under Performance next to LCP and Lighthouse performance. Closing a CLS finding does not invent a good LCP. SlaySlop does not edit the target. Only scan hosts you are authorized to assess.

Mistake 1: images and embeds without reserved space

Heroes, iframes, and video posters without width and height (or CSS aspect-ratio space) are still the classic shift. The design looked aligned. The live DOM waited on the image and then reflowed. I have shipped this. It is embarrassing every time.

Mistake 2: late banners and consent UI

Cookie banners, promo bars, and support widgets that inject after first paint shove content the user was already reading. Reserving space or overlaying without pushing the document is the boring fix. Deleting the banner from staging only is not.

Mistake 3: web fonts that reflow text late

Swap strategies that look fine in a brand review can still shift metrics during load. Decide font display behavior deliberately. Measure on the live host. Do not declare victory from a design tool screenshot.

Mistake 4: local Lighthouse as production proof

A green lab run on a quiet laptop is useful. It is not the same as SlaySlop's live public check. Site compare language notes Lighthouse as a lab snapshot while SlaySlop—keeps checking a live URL over time. Fix your strings. Use both tools; substitute neither.

Mistake 5: homepage-only confidence

Campaign landings with third-party embeds often shift more than /. If your handoff script only opens the homepage, you shipped a glance.

# Permissioned: confirm which templates you are about to discuss
for path in "/" "/pricing" "/blog/example-post"; do
  printf '%s => ' "$path"
  curl -sI "https://www.example.com$path" | awk 'NR==1{print}'
done

Mistake 6: collapsing every Performance weirdness into one ticket

CLS, LCP, interaction readiness, and viewport configuration are different sensors. Mixing them into "perf weirdness" wastes a week. Product language attaches evidence to findings. Borrow that packaging.

Mistake 7: fixing in the CDN purge only

Purging cache without reserving dimensions brings the same shift back on the next cold load. Temporary "remove the banner for launch day" notes expire in silence unless a rescan exists.

Happy path that avoids the list

1. Enumerate public templates in the SOW.
2. Run a permissioned SlaySlop scan.
3. Open CLS evidence on the cited pages.
4. Check LCP and viewport configuration on the same pass.
5. Name owners and rescan dates before portal access goes out.

CLS mistake watchlist
missing_dimensions: yes|no
late_banner: yes|no
font_reflow: yes|no
local_only_lighthouse: yes|no
templates_covered: home|landing|article|mixed
owner:

Client calls that go sideways

The awkward call usually starts with "but PageSpeed said green last month." Bring the SlaySlop evidence. Open the cited URL on a phone if you can. Let the shift argue for you. Soft product mention only when it helps: ranked findings with page evidence beat a hallway memory of "felt fine."

Mistake 8: fixing the ticket title only

Renaming a ticket from "CLS" to "Polish UI" does not change the live DOM. Neither does marking it done because someone "optimized images" without a cold-load reproduce step. Require a before/after note with the cited URL and the node that stopped moving.

Documentation culture is part of the bug

Sometimes the theme is fine and the runbook is wrong. The runbook says "inject the promo bar with JavaScript after load for flexibility." A tired engineer applies the runbook to every template. The mistake shipped as documentation culture. Fix the runbook in the same change window when you reserve space. Otherwise the next launch reintroduces the shove while "following the docs."

Process that survives launch week looks like a checklist you can hand to someone who was not on the build. Not like a hero engineer who remembers which embed was sketchy.

Related next step

When a finding fires, reproduce on the permissioned public URL before changing global CDN settings at random. Soft read: Cumulative Layout Shift and the checks catalog.