Performance·Windsurf
PerformanceWindsurf

Fix Cumulative Layout Shift (CLS) — Windsurf

CLS happens when content jumps during load — you click something and hit the wrong element. Google penalizes it; users hate it.

rocket_launch

Fixing this in Windsurf

Codeium agentic AI IDE with Cascade

Windsurf Cascade can walk the entire project and apply multi-file edits in one pass. Paste the prompt below into your Windsurf chat and the fix rolls out across the project in one pass.

Using a different tool? Pick your stack:

LovableCursorBoltv0ReplitWindsurfClaude CodeBase44

The prompt for Windsurf

Copy and paste this into your Windsurf chat exactly as-is.

Using Windsurf Cascade, apply these edits across the project in one pass:

Fix Cumulative Layout Shift

1. Add explicit width and height to all images and video elements.
2. Avoid inserting content above existing content dynamically.
3. Use font-display: swap for web fonts.

Why this matters

CLS is the "janky load" metric. When images load without declared dimensions, the page height jumps — and users often click the wrong button mid-shift.

Core Web Vital — Google rewards CLS < 0.1 and penalizes > 0.25. Easy fix: explicit dimensions everywhere.

How to use this prompt in Windsurf

  1. 1. Open your Windsurf project.
  2. 2. Copy the prompt above with the copy button.
  3. 3. Paste into the Windsurf chat and send.
  4. 4. Review the diff, accept the changes, redeploy.
  5. 5. Verify the fix using the checklist below.

Common mistakes to avoid

  • error_outlineImages without width/height — the #1 cause of CLS.
  • error_outlineLate-loading web fonts that swap and shift text.
  • error_outlineInjecting banner/cookie notices above existing content.
  • error_outlineAdding ads or embeds without reserved space.

How to verify the fix worked

  • check_circlePageSpeed Insights → CLS < 0.1.
  • check_circleDevTools Performance → Experience → Layout Shift events — none over 0.05.
  • check_circleRecord a slow mobile load (4G throttle) — no visible jumps.

Frequently asked questions

How do I set dimensions on responsive images?expand_more
Use `width` and `height` attributes with the raw dimensions, plus CSS `height: auto`. Browser calculates aspect ratio and reserves space.
font-display: swap or optional?expand_more
`swap` is standard but can cause CLS. `optional` prevents shift but may not load the custom font on slow connections. Test both.

Want all 34 prompts tailored to your Windsurf site?

Pantra scans your site in 10 seconds, detects the stack, and generates the exact prompts that apply — only the ones you actually need.

Scan my site

Related Windsurf prompts

Performance

Improve Largest Contentful Paint (LCP) — Windsurf

Prompt to get LCP under 2.5 seconds — preload the hero image, cut render-blocking, use a proper CDN.

Performance

Improve Interaction to Next Paint (INP) — Windsurf

Prompt to get INP under 200ms — split long tasks, lazy-load heavy JS, debounce handlers.

Performance

Fix Core Web Vitals (LCP, CLS, INP) — Windsurf

Prompt to address Google Core Web Vitals thresholds: LCP < 2.5s, CLS < 0.1, INP < 200ms. Works in any AI-coded stack.

Learn more in the Glossaryarrow_forward