Performance·Lovable
PerformanceLovable

Cumulative Layout Shift (CLS) fixen — Lovable

CLS passiert wenn Content beim Laden springt — du klickst und triffst das falsche Element. Google penalisiert es; User hassen es.

rocket_launch

In Lovable fixen

AI Full-Stack-App-Builder (React + Vite + Supabase)

Lovable-Apps shippen schnell, überspringen aber die meisten SEO- und Security-Basics out-of-the-box. Prompt unten in deinen Lovable-Chat einfügen und der Fix rollt in einem Rutsch über das ganze Projekt aus.

Anderes Tool? Wähle deinen Stack:

LovableCursorBoltv0ReplitWindsurfClaude CodeBase44

Der Prompt für Lovable

Diesen Text exakt so in deinen Lovable-Chat kopieren und einfügen.

Fix my Lovable app — please make these exact changes in the Lovable editor:

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.

Warum das wichtig ist

CLS ist die "jankige Load"-Metrik. Wenn Bilder ohne Dimensions laden springt die Seitenhöhe — User klicken oft den falschen Button mitten im Shift.

Core Web Vital — Google belohnt CLS < 0.1 und penalisiert > 0.25. Easy Fix: explizite Dimensions überall.

So nutzt du diesen Prompt in Lovable

  1. 1. Dein Lovable-Projekt öffnen.
  2. 2. Prompt oben mit Copy-Button kopieren.
  3. 3. In Lovable-Chat einfügen und senden.
  4. 4. Diff reviewen, Änderungen akzeptieren, neu deployen.
  5. 5. Fix mit der Checkliste unten verifizieren.

Typische Fehler vermeiden

  • error_outlineBilder ohne width/height — die #1-CLS-Ursache.
  • error_outlineLate-loading Web-Fonts die swappen und Text shiften.
  • error_outlineBanner/Cookie-Notices über existierendem Content injizieren.
  • error_outlineAds/Embeds ohne reservierten Platz.

Wie du prüfst ob der Fix geklappt hat

  • check_circlePageSpeed Insights → CLS < 0.1.
  • check_circleDevTools Performance → Experience → Layout-Shift-Events — keine über 0.05.
  • check_circleSlow-Mobile-Load (4G-Throttle) aufzeichnen — keine sichtbaren Sprünge.

Häufige Fragen

Dimensions auf responsive Bildern?expand_more
`width`- und `height`-Attribute mit Roh-Dimensions, plus CSS `height: auto`. Browser berechnet Aspect-Ratio und reserviert Platz.
font-display: swap oder optional?expand_more
`swap` ist Standard, kann CLS verursachen. `optional` verhindert Shift, lädt Custom-Font bei langsamer Verbindung eventuell nicht. Beides testen.

Alle 34 Prompts passend zu deiner Lovable-Site?

Pantra scannt deine Site in 10 Sekunden, erkennt den Stack und generiert genau die Prompts die passen — nur die du brauchst.

Site scannen

Ähnliche Lovable-Prompts

Performance

Largest Contentful Paint (LCP) verbessern — Lovable

Prompt um LCP unter 2.5s zu kriegen — Hero-Bild preloaden, Render-Blocking reduzieren, CDN nutzen.

Performance

Interaction to Next Paint (INP) verbessern — Lovable

Prompt um INP unter 200ms zu kriegen — lange Tasks splitten, schweres JS lazy-loaden, Handler debouncen.

Performance

Core Web Vitals fixen (LCP, CLS, INP) — Lovable

Prompt um Googles Core-Web-Vitals-Schwellen zu treffen: LCP < 2.5s, CLS < 0.1, INP < 200ms. Funktioniert in jedem AI-Stack.

Mehr im Glossar erfahrenarrow_forward