Google hat die Core Web Vitals zum zentralen Ranking-Faktor gemacht. Langsame Websites verlieren nicht nur Besucher, sondern auch Google-Positionen. In diesem Artikel erkläre ich dir aus meiner täglichen Arbeit als Webentwickler, was die wichtigsten Metriken bedeuten, wie du sie konkret verbesserst und welche Maßnahmen den größten Effekt haben.
Die drei Core Web Vitals erklärt
Google misst drei zentrale Leistungswerte deiner Website, basierend auf echten Nutzerdaten (nicht Labortests):
LCP — Largest Contentful Paint
Misst, wie schnell das größte sichtbare Element im Viewport geladen wird — meistens ein Hero-Bild oder ein großer Text-Block. Ziel: unter 2,5 Sekunden. Aus meiner Erfahrung ist LCP die Metrik, bei der die meisten Websites scheitern. Die häufigste Ursache: unkomprimierte Bilder. Ein 3 MB großes JPEG als Hero-Bild ist immer noch erschreckend häufig — auch 2026.
INP — Interaction to Next Paint
INP hat 2024 die alte FID-Metrik (First Input Delay) ersetzt und misst, wie schnell die Seite auf Nutzer-Interaktionen reagiert — Klicks, Taps, Tastatureingaben. Ziel: unter 200 Millisekunden. Problematisch wird INP bei Seiten mit viel JavaScript: Slider-Plugins, komplexe Formulare oder übermäßig viele Event-Listener können die Reaktionszeit in den roten Bereich treiben.
CLS — Cumulative Layout Shift
Misst, ob Inhalte während des Ladens springen — also ob sich ein Button plötzlich verschiebt, weil darüber ein Bild nachgeladen wird. Ziel: Score unter 0,1. Die häufigsten CLS-Verursacher: Bilder ohne definierte Höhe/Breite im HTML, dynamisch eingefügte Werbebanner, und Web-Fonts, die Textumbrüche verursachen (FOUT — Flash of Unstyled Text).
Die häufigsten Performance-Killer
In meiner täglichen Arbeit als Webentwickler sehe ich immer wieder dieselben Probleme. Hier die Top 8 Performance-Killer, sortiert nach Häufigkeit:
1. Unkomprimierte Bilder: Immer noch der Killer Nummer eins. WebP oder AVIF statt JPEG/PNG spart 30–50 % Dateigröße bei gleicher Qualität. Jedes Bild sollte in mehreren Größen vorliegen (srcset-Attribut) — ein 2000px-Bild auf einem 375px-Smartphone zu laden ist Ressourcenverschwendung.
2. Zu viele WordPress-Plugins: 20+ Plugins sind keine Seltenheit. Jedes Plugin kann eigene CSS- und JS-Dateien laden — auf jeder Seite, ob gebraucht oder nicht. Mein Richtwert: Unter 15 Plugins, und regelmäßig prüfen, welche wirklich nötig sind.
3. Kein Browser-Caching: Statische Ressourcen (Bilder, CSS, JS, Fonts) sollten mit langen Cache-Zeiten ausgeliefert werden. Ohne Caching lädt der Browser alles bei jedem Besuch neu — das ist wie jeden Tag den Kühlschrank auszuräumen und neu einzuräumen.
4. Render-blockierendes CSS und JavaScript: CSS und JS im <head> blockieren das Rendering der Seite. Lösung: Critical CSS inline, restliches CSS mit media="print"-Trick asynchron laden. JavaScript mit defer oder async einbinden.
5. Fehlende Bildgrößen im HTML: Wenn <img>-Tags keine width und height haben, kann der Browser den Platz nicht reservieren → CLS-Problem. Immer Dimensionen angeben.
6. Web-Fonts: Google Fonts extern laden verursacht eine zusätzliche DNS-Anfrage und blockiert oft das Rendering. Besser: Fonts lokal hosten (DSGVO-konform!) und mit font-display: swap laden.
7. Kein CDN: Bei überregionalen Websites kann ein Content Delivery Network die Ladezeit für entfernte Nutzer deutlich reduzieren. Cloudflare bietet einen kostenlosen Tier, der für die meisten KMU-Websites ausreicht.
8. Langsames Hosting: Die Server-Geschwindigkeit (TTFB — Time to First Byte) ist fundamental. Günstiges Shared Hosting mit überfüllten Servern bremst alles aus. Ab ca. 10 €/Monat bekommt man bei Anbietern wie Hetzner, IONOS oder All-Inkl ordentliche Performance.
Praktische Optimierung Schritt für Schritt
Meine empfohlene Reihenfolge — vom größten zum kleinsten Hebel:
Schritt 1: Bilder optimieren. Alle Bilder zu WebP konvertieren. srcset für responsive Größen. Lazy Loading für Bilder unterhalb des Viewports (loading="lazy").
Schritt 2: JavaScript ausmisten. Jedes Script hinterfragen: Brauche ich das? Kann ich es defer laden? Gibt es eine leichtere Alternative? Tracking-Scripts (Analytics, Facebook Pixel etc.) besonders kritisch prüfen — sie sind oft die größten Bremsen.
Schritt 3: Caching einrichten. Bei WordPress: WP Rocket oder LiteSpeed Cache. Bei Custom-PHP: .htaccess-Regeln für statische Ressourcen. Mein .htaccess-Generator erstellt die nötigen Regeln automatisch.
Schritt 4: Fonts lokal hosten. Google Fonts herunterladen und lokal einbinden. Das spart den externen Request und ist gleichzeitig DSGVO-konform (nach dem Urteil LG München I, 2022).
Schritt 5: GZIP/Brotli aktivieren. Text-basierte Dateien (HTML, CSS, JS) können um 60–80 % komprimiert werden. Die meisten Hoster haben das standardmäßig aktiv — aber prüfe es.
Performance messen und überwachen
Die drei wichtigsten Tools für die Messung:
Google PageSpeed Insights: Kombiniert Lab-Daten (Lighthouse) mit echten Felddaten (CrUX). Gibt dir einen Score und konkrete Verbesserungsvorschläge. GTmetrix: Detailliertere Analyse mit Wasserfall-Diagramm — zeigt genau, welche Ressource wie lange braucht. Chrome DevTools: Das Lighthouse-Tab für lokale Analysen während der Entwicklung.
Mein Tipp: Teste nicht nur die Startseite, sondern auch Unterseiten — besonders Blog-Artikel mit vielen Bildern und Produktseiten in Onlineshops. Die Startseite ist oft optimiert, aber die Unterseiten werden vergessen.
Eine Sekunde zusätzliche Ladezeit kann die Conversion-Rate um bis zu 20 % senken — und das merkt auch Google. Performance-Optimierung ist kein einmaliges Projekt, sondern ein laufender Prozess.
Brauchst du Hilfe bei der Performance-Optimierung deiner Website? Als Webentwickler analysiere ich deinen Ist-Zustand, identifiziere die größten Bremsen und optimiere gezielt. Die meisten Websites können mit 2–3 Stunden Arbeit eine deutliche Verbesserung erzielen.
Passende Leistungen & Tools
