Webentwicklung
Core Web Vitals optimieren – Die Google Performance-Metriken
Nico FreitagWebentwicklung
Google hat Core Web Vitals eingeführt – drei Metriken die messen, wie schnell und responsiv deine Website ist. Wenn sie schlecht sind, sinken deine Rankings. Wir zeigen wie du sie optimierst.
Die drei Metriken
LCP (Largest Contentful Paint) - Laden
Das größte Element auf der Seite (oft ein Bild oder Text) – wann wird es sichtbar?
- Gut: < 2.5 Sekunden
- Schlecht: > 4 Sekunden
FID (First Input Delay) - Reaktivität
Wie lange dauert es, bis deine Website auf den ersten User-Input reagiert (Klick, Tippen)?
- Gut: < 100ms
- Schlecht: > 300ms
CLS (Cumulative Layout Shift) - Stabilität
Wie viel "springt" deine Website herum während des Ladens? (Bilder laden, Text verschiebt sich, etc.)
- Gut: < 0.1
- Schlecht: > 0.25
LCP optimieren
Problem: Dein größtes Element (Hero Image, Heading, Video) lädt zu langsam.
Lösungen:
1. Bild-Optimierung: Komprimiere Bilder, nutze moderne Formate (WebP)
2. Lazy Loading: Lade Bilder erst wenn sie sichtbar sind
3. CDN: Serviere Bilder von einem CDN (Cloudflare, Akamai), nicht von deinem Server
4. Font-Optimization: Fonts können LCP beeinflussen – nutze preload
5. Caching: Browser-Caching und Server-Caching
```html
<!-- Preload kritisches Bild: -->
<link rel="preload" as="image" href="hero.webp" />
```
FID optimieren
Problem: Deine Website braucht zu lange um auf Clicks zu reagieren.
Lösungen:
1. Code Splitting: Teile dein JavaScript in kleinere chunks
2. Lazy Load Scripts: Lade JavaScript nur wenn notwendig
3. Long Tasks vermeiden: JavaScript-Processing sollte kurz sein
4. Web Workers: Offload Processing zu Web Workers (nicht main thread)
5. Frameworks optimieren: React, Vue – Mach Code-Splitting
```javascript
// Code Splitting in React:
const HeavyComponent = React.lazy(() => import('./HeavyComponent'));
function App() {
return (
<Suspense fallback={<div>Loading...</div>}>
<HeavyComponent />
</Suspense>
);
}
```
CLS optimieren
Problem: Deine Website "springt" herum während des Ladens.
Lösungen:
1. Image Dimensions: Gib immer Breite + Höhe für Bilder an
2. Font Loading: Verhindere font-swapping (FOUT)
3. Ads und Embeds: Reserve Platz für Ads bevor sie laden
4. Dynamische Content: Wenn du Content hinzufügst, reserve Platz
```html
<!-- FALSCH – keine Dimensions: -->
<img src="image.jpg" />
<!-- RICHTIG – mit Dimensions: -->
<img src="image.jpg" width="400" height="300" />
```
Messen: Wie überprüfst du deine Core Web Vitals?
Google PageSpeed Insights: https://pagespeed.web.dev/
- Gibt dir einen Score für deine Seite
- Zeigt Probleme und Lösungen
Google Search Console:
- "Core Web Vitals" Bericht
- Zeigt welche Seiten Probleme haben
Chrome DevTools:
- Lighthouse Tab
- Misst deine Seite in real-time
Was ist ein gutes Ziel?
Ziele:
- LCP: < 2.5s (70+ auf PageSpeed)
- FID: < 100ms (90+ auf PageSpeed)
- CLS: < 0.1 (90+ auf PageSpeed)
Wenn du alle drei Grün hast (75+), hast du gute Performance.
Häufiger Fehler
- "Meine Seite ist schnell auf meinem Computer" – Nein, du brauchst Real Device Testing
- "Core Web Vitals sind nicht wichtig" – Doch, Google rankt danach
- "Ich optimiere später" – Nein, jetzt machen
Fazit
Core Web Vitals sind nicht optional – sie beeinflussen deine Rankings. Mit ein paar Optimierungen können die meisten Websites ihre Vitals verbessern.
Häufige Fragen
Weitere Artikel
Webentwicklung
Next.js vs. WordPress – Welches Framework passt zu deinem Project?
Next.js und WordPress sind zwei völlig verschiedene Technologien. Aber beide werden für Websites benutzt. Welche solltes...
Geo-SEOTechnisches Geo-SEO Checkliste – 20 Punkte zum Überprüfen
Technisches Geo-SEO ist oft vernachlässigt – aber es ist fundamental. Eine Website mit schlechter technischer Geo-SEO wi...