So beschleunigen Sie eine Website mit Core Web Vitals und echten Daten

Websites werden oft in der falschen Reihenfolge beschleunigt: Jemand installiert ein Optimierungs-Plugin, aktiviert jede Option und sucht dann nach dem Grund, warum das Formular nicht mehr funktioniert. Die richtige Reihenfolge lautet: messen, eine Hypothese aufstellen, eine Änderung vornehmen, die Funktion prüfen und erneut messen.

In einer älteren Version habe ich auch Ansätze beschrieben, die ich heute nicht mehr empfehle, etwa die lokale Einbindung fremder Skripte oder einen allgemeinen Einsatz von AMP und PWA. Sie brachten teilweise bessere Laborwerte, fügten aber das Risiko veralteten Codes, fehlerhafte Updates und eine kompliziertere Wartung hinzu. Eine moderne Website sollte in ihrer Hauptversion schnell sein.

Was Sie heute messen sollten

Für die Core Web Vitals verwendet Google drei stabile Messwerte:

• LCP: Laden des Hauptinhalts; ein guter Wert liegt bei höchstens 2.5 Sekunden.
• INP: Reaktion auf Interaktionen; ein guter Wert liegt unter 200 Millisekunden.
• CLS: unerwartete Layoutverschiebungen; ein guter Wert liegt bei höchstens 0.1.

Die Schwellenwerte gelten für das 75. Perzentil und werden in der offiziellen Übersicht Core Web Vitals für die Google-Suche zusammengefasst. Ergebnisse echter Besucher aus der Search Console oder CrUX haben Vorrang vor einem einzelnen Labortest auf meinem Laptop.

Labortools sind dennoch wichtig: Sie zeigen den Waterfall, den Main Thread, ungenutzten Code und konkrete Kandidaten für Reparaturen. Felddaten zeigen, dass ein Problem besteht; das Labor hilft zu erklären, warum.

Definieren Sie zuerst den Umfang des Problems

1. Vergleichen Sie Mobilgeräte und Desktop.
2. Trennen Sie die Vorlagen: Startseite, Artikel, Dienstleistung, Listing, Formular und Onlineshop.
3. Prüfen Sie schnelle und langsame Länder, Geräte und Traffic-Quellen.
4. Finden Sie URL-Gruppen mit schlechten Felddaten.
5. Erfassen Sie für eine repräsentative Seite einen reproduzierbaren Labor-Trace.

Eine schnelle Startseite bedeutet nicht, dass die Website schnell ist. Ein langsamer Besuch auf einem alten Telefon bedeutet nicht, dass das gesamte System neu geschrieben werden muss.

Maßnahmen mit der häufigsten Wirkung

1. Server und HTML

Messen Sie die Zeit bis zum ersten Byte und teilen Sie sie in DNS, Verbindung, Serverwartezeit und Weiterleitungen auf. Lange Wartezeiten können durch das Hosting, die Datenbank, eine nicht gecachte Seite, eine langsame API oder Weiterleitungsketten entstehen. Aktivieren Sie einen passenden Seiten-Cache für öffentliche Inhalte und einen Objekt-Cache, wo dies sinnvoll ist. Schließen Sie eingeloggte Nutzer, Warenkörbe und Personalisierung korrekt vom Cache aus.

2. Hauptbild

LCP ist häufig das Hero-Bild. Liefern Sie eine Größe passend zur Darstellung aus, verwenden Sie srcset, Komprimierung und modernes WebP oder AVIF mit einem sinnvollen Fallback. Laden Sie das Hauptbild nicht per Lazy Loading; Bilder unterhalb des ersten Viewports dagegen schon. Setzen Sie Bildbreite und -höhe, damit der Browser Platz reserviert und CLS niedrig bleibt.

3. CSS und Schriftarten

Entfernen Sie ungenutzte Styles vorsichtig und halten Sie kritisches CSS klein. Beschränken Sie Schriftarten auf die benötigten Schriftschnitte und Zeichensätze, cachen Sie lokale Dateien lange und laden Sie nur eine wirklich früh benötigte Schriftart vor. Das Vorladen von zehn Schriftarten erzeugt lediglich eine weitere Warteschlange.

4. JavaScript und Interaktion

Teilen Sie große Bundles auf, verzögern Sie nicht kritischen Code und laden Sie Drittanbieter nur bei Bedarf und mit entsprechender Einwilligung. async und defer sind kein Zaubermittel; testen Sie die Reihenfolge und Abhängigkeiten der Skripte. Teilen Sie lange Aufgaben im Main Thread auf und lassen Sie einen Klick nicht auf Analytics warten.

5. Drittanbieter

Chats, Heatmaps, Werbe-Pixel, Videos und A/B-Tools fügen Netzwerk-Anfragen und Prozessorarbeit hinzu. Jedes Skript braucht einen Verantwortlichen und einen geschäftlichen Grund. Laden Sie es nicht synchron im Header, nur weil die Installationsanleitung dann kürzer ist. Analytics kann über Google Tag Manager verwaltet werden, aber der Container selbst kann die Performance nicht retten.

WordPress: weniger Ebenen, mehr Kontrolle

Die WordPress-Dokumentation empfiehlt, die Performance über Hosting, Anzahl und Qualität der Plugins, Bilder, Cache und ein Content Delivery Network zu verbessern. Lesen Sie die Optimierungsübersicht und die separate Erklärung zum Cache.

• Aktualisieren Sie WordPress, PHP, das Theme und Plugins zuerst in der Staging-Umgebung.
• Entfernen Sie ungenutzte Plugins sowie sich überschneidende Cache- oder Minifizierungstools.
• Analysieren Sie Datenbankabfragen und langsame externe Aufrufe.
• Planen Sie die Datenbankwartung, löschen Sie Revisionen oder Metadaten aber nicht blind.
• Testen Sie nach jeder Optimierung Formulare, Suche, Login und den Kaufprozess.

Eine sinnvolle Auswahl von Add-ons bespreche ich in den besten WordPress-Plugins.

Was Sie nicht tun sollten

• Laden Sie die Analytics- oder Werbeskripte anderer nicht nur für einen besseren Score auf Ihren Server herunter; dadurch können Sie Sicherheits- und Funktionsupdates verlieren.
• Setzen Sie für eine sich ändernde Datei keinen einjährigen Cache, ohne ihren Namen zu versionieren.
• Entfernen Sie CSS oder JavaScript aus einem automatisierten Bericht nicht, ohne jede Vorlage zu testen.
• Beurteilen Sie den Erfolg nicht nur anhand von Lighthouse. Google sagt ausdrücklich, dass gute Core Web Vitals allein weder hohe Rankings noch eine hervorragende Nutzererfahrung garantieren.
• Beschleunigen Sie eine Website nicht, indem Sie Inhalte oder eine vom Kunden benötigte Funktion verbergen.

Ein Vier-Wochen-Plan

1. Woche 1: Ausgangsbasis der Felddaten, Labormessungen und Vorlagenliste.
2. Woche 2: Server, Cache, Weiterleitungen und die größten LCP-Ressourcen.
3. Woche 3: Bilder, Schriftarten, CSS, JavaScript und Drittanbieter.
4. Woche 4: Regressionstest, neue Messungen, Monitoring und Dokumentation.

Dokumentieren Sie für jede Änderung das Datum, die URL, den Messwert vorher und nachher, die funktionalen Auswirkungen und eine Rollback-Möglichkeit. Verfolgen Sie außerdem die Conversion-Rate, den Formularabschluss und Fehler; eine schnellere Seite, die weniger verkauft, ist keine abgeschlossene Optimierung.

Beginnen Sie mit der Prüfung der technischen Grundlagen und Analytics der Website in einem technischen Audit und GA4. Wenn Sie Reparaturen nach Wirkung und Kosten priorisieren möchten, kontaktieren Sie mich über Kontakt.