Pagespeed optimieren: Ratgeber zu Core Web Vitals und Lighthouse

Hier finden Sie alle Anleitungen zu Core Web Vitals und Website-Performance an einem Ort: was die drei Kennzahlen bedeuten, wie Sie die häufigsten Pagespeed-Warnungen beheben und wie Ihre Plattform im Vergleich abschneidet. Jede Seite erklärt ein Thema in klarer Sprache, mit konkreten Schritten und Codebeispielen.

Der Einstieg ist die Übersicht zu den Core Web Vitals, von dort führen die Wege zu den einzelnen Metriken und zu den konkreten Optimierungen.

Wie Ihre Werte im Vergleich zu ähnlichen Websites dastehen, zeigen die Branchen-Benchmarks mit den gemessenen Core Web Vitals je Branche.

Pagespeed-Empfehlungen: Chancen, Diagnosen und Felddaten

Die meisten Empfehlungen aus PageSpeed Insights und Lighthouse fallen in zwei Gruppen. Chancen sind Änderungen, die die Seite schneller laden lassen, etwa ein Skript später zu laden oder ein Bild zu verkleinern. Diagnosen beschreiben Zustände, die sich verbessern lassen, etwa eine schwache Cache-Richtlinie. Beide stammen aus einem einzelnen Labortest unter festen Bedingungen. Eine Korrektur zeigt sich deshalb im Tool sofort, in den Felddaten echter Nutzer aber erst nach und nach, weil diese ein rollierendes Fenster von 28 Tagen abbilden. Beheben Sie zuerst den Laborbefund und beobachten Sie dann, wie die Felddaten nachziehen.

Core Web Vitals verstehen

• Core Web Vitals: was die drei Kennzahlen sind, welche Werte gut sind und wie Google sie bewertet.
• Core Web Vitals Benchmark: wie WordPress, Wix, Shopify und andere Plattformen bei den Core Web Vitals abschneiden.
• Lighthouse Performance Score: wie der Score berechnet wird und warum er von den Felddaten abweicht.
• PageSpeed Insights richtig lesen: Felddaten, Labordaten, URL und Origin und warum die Beurteilung der Core Web Vitals scheitert.

Die einzelnen Metriken

• Largest Contentful Paint (LCP): wie schnell der Hauptinhalt erscheint.
• Interaction to Next Paint (INP): wie schnell die Seite auf Eingaben reagiert.
• Cumulative Layout Shift (CLS): wie stabil das Layout beim Laden bleibt.
• First Contentful Paint (FCP): wann der erste Inhalt sichtbar wird.
• Time to First Byte (TTFB): wie schnell der Server zu antworten beginnt.
• Total Blocking Time (TBT): wie lange lange Tasks den Haupt-Thread blockieren.
• Speed Index: wie schnell sich der sichtbare Bereich beim Laden füllt.

JavaScript und CSS optimieren

• Nicht verwendetes JavaScript reduzieren: ungenutztes Skript per Code-Splitting und Tree-Shaking entfernen.
• Nicht verwendetes CSS reduzieren: ungenutzte Stylesheet-Regeln beim Build entfernen.
• Renderblockierende Ressourcen beseitigen: den kritischen Pfad für den ersten Seitenaufbau freimachen.
• JavaScript-Ausführungszeit reduzieren: Parse-, Compile- und Laufzeit je Skript senken, TBT und INP verbessern.
• CSS und JavaScript minimieren: Dateien ohne Leerzeichen und Kommentare ausliefern.
• DOM-Größe reduzieren: weniger Elemente, schnelleres Styling, Layout und Interaktionen.
• Erzwungener dynamischer Umbruch (Forced Reflow): Layout-Thrashing in JavaScript finden und beheben.
• Veraltetes JavaScript: unnötige Polyfills und doppelte Module aus dem Build entfernen.
• font-display und Webfonts: Text sofort sichtbar, Schriften ohne Layout-Sprünge laden.

Netzwerk und Drittanbieter

• Textkomprimierung aktivieren: Brotli oder Gzip für HTML, CSS und JavaScript.
• Preconnect und Preload: Verbindungen und kritische Ressourcen früher starten.
• Drittanbieter-Code: was Tags, Pixel und Widgets kosten und wie sie ohne Blockieren laden.
• Seitengewicht: wie schwer eine Seite ist, was üblich ist und was ein Budget bringt.

Plattformen

• Core Web Vitals für WordPress: Bestehensquoten, typische Ursachen und Maßnahmen für WordPress.
• Core Web Vitals für Shopify: Apps, Bilder und Theme: was Händler selbst beheben können.
• Core Web Vitals für Next.js: Hydrierung, Bundles und Bildpriorität im Framework.

Bilder optimieren

• Bildübermittlung verbessern: das Lighthouse-Insight zu Bildern lesen, Komprimierung und GIF als Video.
• Bilder richtig dimensionieren: Bilder in der Größe ausliefern, in der sie angezeigt werden.
• Bilder in modernen Formaten bereitstellen: mit WebP und AVIF deutlich kleinere Dateien.
• Bilder verzögert laden: Bilder außerhalb des sichtbaren Bereichs per Lazy Loading zurückstellen.

Server und Caching

• Browser-Caching aktivieren: statische Assets mit einer effizienten Cache-Richtlinie lange cachen.

Eigene Messdaten: Website Speed Statistiken

Wie die Websites in den Messungen von PerfDelta insgesamt abschneiden, von der Bestehensquote bis zum Seitengewicht, zeigen die Website Speed Statistiken.

Wie die Reports messen und bewerten, beschreibt die Methodik-Seite.

Eigene Seite testen

Am schnellsten finden Sie den passenden Ratgeber über eine konkrete Messung. Mit PerfDelta prüfen Sie Ihre URLs mobil und stationär, mit Feld- und Labordaten nebeneinander und im Vergleich zu Wettbewerbern. Jede Empfehlung im Report verweist auf die passende Anleitung aus diesem Ratgeber.

Gezielt testen: der Core Web Vitals Test für LCP, INP und CLS mit echten Nutzerdaten und der Mobile Pagespeed Test für die Ladezeit auf dem Smartphone.