Core Web Vitals fixen (LCP, CLS, INP) — Replit
Core Web Vitals sind ein Ranking-Signal. Schlechte Werte deckeln das Ranking auch bei gutem Content und Links. Korrelieren direkt mit Bounce-Rate und Conversion.
In Replit fixen
Cloud-IDE mit Replit Agent
Replit Agent läuft am besten mit präziser Instruktion und gescoptem Folder. Prompt unten in deinen Replit-Chat einfügen und der Fix rollt in einem Rutsch über das ganze Projekt aus.
Anderes Tool? Wähle deinen Stack:
Der Prompt für Replit
Diesen Text exakt so in deinen Replit-Chat kopieren und einfügen.
In Replit, ask the Replit Agent to make these exact changes across the project: Improve Core Web Vitals 1. Lazy-load offscreen images with loading="lazy" and add explicit width/height to avoid layout shift. 2. Move large third-party scripts to async/defer or load them only after user interaction. 3. Inline critical CSS and preload the LCP image with <link rel="preload" as="image">.
Warum das wichtig ist
Google führte Core Web Vitals 2021 als Ranking-Faktor ein und ersetzte FID 2024 durch INP. Seiten die die Schwellen verfehlen werden in Mobile-Ergebnissen abgestuft — nicht dramatisch, aber messbar, und die Abstufung summiert sich mit anderen Schwächen.
Jenseits von SEO korrelieren die drei Vitals stark mit Conversion-Rate. LCP über 4s verdoppelt die Bounce-Rate auf Mobile ungefähr. CLS über 0.25 lässt User falsche Elemente beim Laden klicken. INP über 500ms fühlt sich kaputt an.
AI-gebaute Apps shippen oft mit unoptimierten Hero-Bildern, 3 MB ungenutztem JavaScript und ohne width/height auf Bildern/iframes. Alle drei torpedieren Vitals. Glücklicherweise sind alle drei Fixes geradlinig.
So nutzt du diesen Prompt in Replit
- 1. Dein Replit-Projekt öffnen.
- 2. Prompt oben mit Copy-Button kopieren.
- 3. In Replit-Chat einfügen und senden.
- 4. Diff reviewen, Änderungen akzeptieren, neu deployen.
- 5. Fix mit der Checkliste unten verifizieren.
Typische Fehler vermeiden
- error_outlineHero-Bild als 3 MB JPEG ohne `<link rel="preload">` ausliefern.
- error_outlineLazy-Loading auf dem LCP-Bild nutzen — wird langsamer, nicht schneller.
- error_outlinewidth und height auf Bildern vergessen, Seite springt beim Laden (CLS).
- error_outlineAnalytics- und Chat-Widgets synchron vor interaktivem Content laden.
- error_outlineTeure Berechnungen beim Page-Load in useEffect ohne Splitting ausführen.
Wie du prüfst ob der Fix geklappt hat
- check_circlehttps://pagespeed.web.dev/ auf deiner Seite ausführen — Core-Web-Vitals-Bewertung muss grün sein.
- check_circleChrome DevTools → Lighthouse → Performance — Ziele: LCP ≤ 2.5s, CLS ≤ 0.1, INP ≤ 200ms.
- check_circleIn Google Search Console → Core-Web-Vitals-Bericht — keine "Schlechten URLs" mehr.
- check_circleAuf echtem Mobilgerät (nicht emuliert) mit 4G-Throttle testen.
Häufige Fragen
Wie stark hebt bestandene CWV das Ranking?expand_more
Messen CWV Lab- oder Feld-Daten?expand_more
Welches Vital ist am schwersten zu bestehen?expand_more
Alle 34 Prompts passend zu deiner Replit-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 Replit-Prompts
Largest Contentful Paint (LCP) verbessern — Replit
Prompt um LCP unter 2.5s zu kriegen — Hero-Bild preloaden, Render-Blocking reduzieren, CDN nutzen.
PerformanceCumulative Layout Shift (CLS) fixen — Replit
Prompt um CLS zu eliminieren — width/height auf Bilder, Platz für Ads reservieren, late-loading Fonts vermeiden.
PerformanceInteraction to Next Paint (INP) verbessern — Replit
Prompt um INP unter 200ms zu kriegen — lange Tasks splitten, schweres JS lazy-loaden, Handler debouncen.
BilderBilder zu WebP oder AVIF konvertieren — Replit
Prompt um JPEG/PNG zu WebP oder AVIF zu konvertieren — 30-50% kleiner bei gleicher Qualität. Hilft LCP und CLS.