Web Performance optimieren: Core Web Vitals, Ladezeit und was Google wirklich bewertet

Google hat mit den Core Web Vitals drei messbare Kennzahlen definiert, die beschreiben, wie sich eine Website für echte Nutzer anfühlt. Seit dem Page Experience Update 2021 fließen diese Werte direkt in das Google-Ranking ein. Sie sind kein weicher Qualitätshinweis mehr, sondern harter Rankingfaktor.

Der erste Wert ist LCP (Largest Contentful Paint): Er misst, wie lange es dauert, bis das größte sichtbare Element einer Seite – meistens ein Bild oder eine Überschrift – vollständig geladen ist. Google definiert einen guten Wert als unter 2,5 Sekunden. Alles über 4 Sekunden gilt als schlecht. LCP ist der wichtigste der drei Werte, weil er die wahrgenommene Ladegeschwindigkeit direkt abbildet.

Der zweite Wert ist INP (Interaction to Next Paint): Seit März 2024 hat INP den alten FID-Wert ersetzt. INP misst, wie schnell eine Seite auf alle Nutzerinteraktionen reagiert – Klicks, Tastatureingaben, Tippen auf dem Smartphone. Ein guter INP liegt unter 200 Millisekunden. Hohe INP-Werte entstehen häufig durch schweres JavaScript, das den Browser-Hauptthread blockiert.

Der dritte Wert ist CLS (Cumulative Layout Shift): CLS misst, wie stark sich Seitenelemente während des Ladens unerwartet verschieben. Springende Layouts frustieren Nutzer und führen zu versehentlichen Klicks. Ein CLS unter 0,1 gilt als gut. Häufige Ursachen sind Bilder ohne definierte Dimensionen, nachladende Werbebanner und Web Fonts, die spät eingeblendet werden.

Für die Messung der Core Web Vitals stehen mehrere professionelle Tools zur Verfügung, die unterschiedliche Perspektiven liefern. Es ist wichtig, beide Arten von Daten zu kennen: Labordaten aus kontrollierten Tests und Felddaten aus echten Nutzer-Messungen.

Google PageSpeed Insights ist die wichtigste Anlaufstelle, weil das Tool direkt die Daten aus dem Chrome User Experience Report (CrUX) zeigt. Das sind echte Messwerte von realen Chrome-Nutzern, die Ihre Seite besucht haben. Gleichzeitig liefert PageSpeed Insights Labordaten und konkrete Optimierungshinweise. Die URL: pagespeed.web.dev. Wichtig: Mobile- und Desktop-Werte werden getrennt gemessen – Mobile ist der entscheidende Wert für Google.

Lighthouse ist in Chrome DevTools integriert (F12 → Lighthouse-Tab) und führt detaillierte Audits durch. Es gibt Scores für Performance, Accessibility, Best Practices und SEO. Lighthouse-Werte sind Labordaten – sie zeigen das Potenzial, aber nicht den realen Nutzererlebnis-Wert. Als Entwicklungswerkzeug ist Lighthouse unverzichtbar.

WebPageTest (webpagetest.org) erlaubt Tests von verschiedenen Standorten weltweit, mit unterschiedlichen Verbindungsgeschwindigkeiten und auf echten Mobilgeräten. Besonders nützlich ist das Waterfall-Diagramm, das exakt zeigt, welche Ressource wann lädt und was andere Ressourcen blockiert. Für tiefe Performance-Analysen ist WebPageTest das mächtigste frei verfügbare Tool.

Chrome DevTools ermöglichen Echtzeit-Profiling im Network-Tab und Performance-Tab. Hier lässt sich sehen, welche JavaScript-Funktionen den Main Thread blockieren, wie groß einzelne Ressourcen sind und welche Ladereihenfolge der Browser wählt.

Die größten Performance-Gewinne lassen sich meistens mit drei Maßnahmen erzielen: Bildoptimierung, JavaScript-Reduzierung und CSS-Optimierung. Diese drei Bereiche machen zusammen den Großteil der übertragenen Datenmenge und der Render-Blockierung aus.

Bildoptimierung umfasst mehrere Ebenen. Erstens: Format. WebP wird von allen modernen Browsern unterstützt und sollte Standard sein. AVIF bietet noch bessere Komprimierung, hat aber noch keine vollständige Browser-Unterstützung. Mit dem <picture>-Element lassen sich beide Formate mit JPEG-Fallback einbinden. Zweitens: Lazy Loading. Das HTML-Attribut loading="lazy" verzögert das Laden von Bildern außerhalb des sichtbaren Bereichs (below the fold). Das Hero-Bild und alle Bilder im sichtbaren Bereich müssen hingegen mit fetchpriority="high" priorisiert werden. Drittens: Responsive Images. Mit srcset und sizes liefert der Browser automatisch die passende Bildgröße für das jeweilige Gerät.

JavaScript-Optimierung beginnt mit der Analyse: Welches JavaScript wird wirklich beim ersten Seitenaufruf benötigt? Code Splitting trennt den Code in kleinere Chunks, die nur dann geladen werden, wenn sie gebraucht werden. Tree Shaking (bei Bundlern wie Webpack oder Rollup) entfernt ungenutzten Code automatisch aus dem Build. Drittanbieter-Skripte wie Social-Media-Widgets, Chat-Tools und A/B-Test-Frameworks sollten regelmäßig auf ihren tatsächlichen Nutzen überprüft werden – jedes davon kostet Performance.

CSS-Optimierung: Critical CSS umfasst die Styles, die für den sichtbaren Bereich des ersten Seitenaufrufs benötigt werden. Diese sollten inline im <head> eingebettet werden, damit der Browser sofort mit dem Rendering beginnen kann. Das restliche CSS wird asynchron nachgeladen. Tools wie PurgeCSS oder UnusedCSS helfen dabei, ungenutzten CSS-Code zu identifizieren und zu entfernen – bei großen Frameworks wie Bootstrap oder Tailwind können das schnell hunderte Kilobyte sein.

Web Performance ist kein einmaliges Projekt, sondern ein fortlaufender Prozess. Jedes neue Plugin, jede neue Bildergalerie, jeder neue Drittanbieter-Dienst kann die Performance verschlechtern. Ohne kontinuierliches Monitoring merken Teams oft erst nach Monaten, dass die Ladezeiten drastisch gestiegen sind.

Die Google Search Console zeigt unter Erfahrung → Seitenleistung die Core Web Vitals-Bewertungen für alle indexierten Seiten auf Basis echter Nutzerdaten. URLs mit schlechten Werten werden explizit markiert. Das ist die wichtigste Grundlage für SEO-relevante Performance-Optimierungen.

Für technische Teams empfiehlt sich zusätzlich ein Monitoring-Tool wie SpeedCurve, Calibre oder das Open-Source-Tool Lighthouse CI, das bei jedem Deployment automatisch einen Performance-Test ausführt und bei Rückschritten warnt. So verhindern Sie Performance-Regressionen, bevor sie live gehen.

Als Faustregel gilt: Messen Sie nach jedem größeren Deployment die Core Web Vitals, setzen Sie Budget-Grenzen (z.B. LCP max. 2,5 s, JavaScript max. 150 KB gzipped) und definieren Sie diese als Qualitätskriterien im Entwicklungsprozess – gleichwertig mit Funktion und Design.