Reale Daten ansehen, nicht nur eine grüne Note
Wenn Lighthouse 95 zeigt, die Leute aber sagen, die Site sei langsam, vertraue ich keiner einzelnen grünen Note. Zuerst schaue ich mir reale URL-Gruppen in Search Console an und finde dann den Übeltäter in PageSpeed und DevTools.
Den Fehler, den ich zuerst entfernen würde: Das Hero-Bild lazy laden.
Was vorbereiten und welches Ergebnis erwarten
- Ergebnis: Sie wissen, welche Ressource oder welches Skript die Seite verlangsamt, und können den Fix mit Felddaten prüfen, nicht nur mit einem Labortest.
- Öffnen Sie Search Console → Core Web Vitals und trennen Sie Mobile/Desktop. Für die Problem-URL PageSpeed Insights ausführen.
- Halten Sie Quelldaten und Zugriffsrechte vom Output getrennt, damit Sie prüfen können, was die Arbeit an Geschwindigkeit und Core Web Vitals tatsächlich bewirkt hat.
- Ziele für ein gutes Ergebnis: LCP unter 2,5 s, INP unter 200 ms und CLS unter 0,1. Nach dem Fix in Search Console auf start validation klicken.
Das Hauptproblem finden und nacheinander fixen
- Die Problem-URL finden
Öffnen Sie in Search Console die Issue-Gruppe und dann die konkrete URL. Fügen Sie sie in PageSpeed Insights ein und sehen Sie, was das LCP-Element ist.
Проверьте: Es ist klar, worauf der Nutzer am längsten wartet.
Если не сработало: Prüfen Sie die Seite in Chrome DevTools Performance mit einem Mobilprofil.
- Den ersten Screen fixen
Komprimieren Sie das Hero-Bild, setzen Sie Dimensionen und laden Sie das Hauptvisual nicht lazy. Sekundäre Widgets und Third-Party-Skripte verzögern.
<img src="/hero.webp" width="1200" height="700" fetchpriority="high" alt="Techniker repariert eine Klimaanlage">Проверьте: Das Hauptvisual erscheint, ohne auf schweres JS zu warten.
Если не сработало: Ersetzen Sie Video/Animation für den Test durch ein statisches erstes Frame.
- Verschiebungen und Long Tasks entfernen
Setzen Sie width/height für Bilder und Iframes, reservieren Sie Platz für Banner, kürzen Sie schweres JavaScript und teilen Sie Long Tasks auf.
Проверьте: Auf einem Mobilbildschirm springen Elemente beim Laden nicht.
Если не сработало: Deaktivieren Sie Third-Party-Widgets nacheinander und finden Sie den Übeltäter.
- Ein reales Szenario testen
Aktivieren Sie in DevTools langsame CPU und mobiles Netz, laden Sie die Seite neu und zeichnen Sie Performance auf. Vergleichen Sie Vorher und Nachher auf derselben URL.
Проверьте: Der Fix hat die benötigte Metrik verbessert, nicht nur den Gesamtscore.
Если не сработало: Machen Sie die letzte Änderung rückgängig und testen Sie sie isoliert.
Ich fixe zuerst das LCP-Element
Ziele für ein gutes Ergebnis: LCP ≤ 2,5 s, INP < 200 ms, CLS < 0,1. Wenn LCP das Hero-Bild ist, setzen Sie kein `loading=lazy`: Dimensionen, ein modernes Format und `fetchpriority=high`. Bilder unter dem ersten Screen sollten dagegen lazy laden.
Für CLS reservieren Sie Platz für Bilder, Video, Iframes, Chat und Cookie-Banner. Für INP öffnen Sie DevTools → Performance und suchen Long Tasks: Chats, Karten, Slider und mehrere Analytics-Widgets gleichzeitig.
<img src="/assets/hero.avif" width="1440" height="900" fetchpriority="high" alt="Team arbeitet an einem Prozess">Labor und reale Nutzer nicht verwechseln
Notieren Sie URL, Gerät, Datenquelle, LCP, INP und CLS vor der Änderung. Nach dem Fix prüfen Sie PageSpeed und DevTools auf derselben URL erneut und warten auf die Aktualisierung der Search-Console-Felddaten. Wenn Sie nur den Score fixen, aber ein langsames Formular oder einen springenden Button lassen, hat der Nutzer keine bessere Erfahrung.
- Deaktivieren Sie zuerst Third-Party-Widgets nacheinander.
- Laden Sie das Hauptvisual nicht lazy.
- Behandeln Sie Mobile- und Desktop-Daten nicht als eine Metrik.
Ein Test — ein Übeltäter
Deaktivieren Sie zuerst ein Third-Party-Widget, messen Sie erneut und notieren Sie das Ergebnis. Dann stellen Sie es wieder her und prüfen das nächste. Schreiben Sie nicht das gesamte Frontend auf einmal um: sonst rollen Sie zurück und kennen die Ursache immer noch nicht.
Speichern Sie für jede URL-Gruppe `metric`, `device`, `source`, `before`, `after`, `change`, `owner` und `date`. Wenn das Hauptproblem ein schweres Hero ist, optimieren Sie es; wenn es INP ist, kürzen Sie JavaScript. Fixen Sie CLS nicht, indem Sie eine Schrift tauschen, wenn ein Werbeslot die Verschiebung erzeugt.
LCP, INP und CLS: was genau zu prüfen ist
| Kriterium | Frage | Gutes Zeichen |
|---|---|---|
| Eingabe | Was genau geht in die Arbeit an Geschwindigkeit und Core Web Vitals ein? | Öffnen Sie Search Console → Core Web Vitals und trennen Sie Mobile/Desktop. Für die Problem-URL PageSpeed Insights ausführen. |
| Aktion | Was darf das System selbstständig tun? | Nur vorab gelistete Aktionen, ohne Zugriff auf das gesamte Konto |
| Prüfung | Woran erkennen Sie, dass das Ergebnis akzeptiert werden kann? | Ziele für ein gutes Ergebnis: LCP unter 2,5 s, INP unter 200 ms und CLS unter 0,1. Nach dem Fix in Search Console auf start validation klicken. |
| Fehlerfall | Wohin geht ein unklarer Fall? | Vergleichen Sie Field data und Lab data und fixen Sie dann die einzelne schwerste Ressource; ändern Sie nicht CDN, Font und das gesamte JavaScript auf einmal. |
Was sich nach der Einrichtung ändern sollte
Sie wissen, welche Ressource oder welches Skript die Seite verlangsamt, und können den Fix mit Felddaten prüfen, nicht nur mit einem Labortest.
Welche Beschleunigungen den ersten Screen versehentlich schaden
Das Hero-Bild lazy laden.
Nur den Laborscore fixen und reale Daten ignorieren.
Bild- und Iframe-Dimensionen vergessen.
Noch ein Widget hinzufügen, obwohl der erste Screen schon überladen ist.
Wann Geschwindigkeit Architekturarbeit braucht
Sie brauchen einen Spezialisten, wenn die langsamen Stellen CMS, Server-Rendering, ein großes JS-Bundle oder mehrere externe Systeme betreffen.
Was nach der Optimierung prüfen
Warum zeigen PageSpeed und Search Console unterschiedliche Zahlen?
PageSpeed kombiniert einen Labortest mit verfügbaren Felddaten, während Search Console aggregierte reale Besuche über einen Zeitraum nutzt.
Brauchen Sie einen Score von 100?
Nein. Stabiles Performance wichtiger Seiten und gute reale Metriken auf Kundengeräten zählen mehr.
Was sollten Sie zuerst fixen?
Was den Hauptinhalt und den ersten Screen betrifft, dann Layoutverschiebungen und lange interaktive Tasks.
Wann erscheint das Ergebnis in Search Console?
Felddaten aktualisieren sich nicht sofort. Ein Labortest prüft die Änderung sofort, der reale Report braucht neue Besuche.
