Performance und Core Web Vitals — eine schnelle Weblösung
LCP, INP und CLS — Googles Maße dafür, wie eine Seite tatsächlich erlebt wird
Einleitung
Performance ist kein Feinschliff, den man zum Schluss hinzufügt — sie gehört dazu, ob eine Weblösung für den Benutzer wirklich funktioniert. Die Bekendtgørelse (dänische Ausbildungsverordnung) für die Webentwickler-Ausbildung verlangt denn auch, dass der Auszubildende eine webbasierte Lösung hinsichtlich der technischen Performance optimieren kann. Google hat die wichtigsten Maße für die wahrgenommene Performance in drei Metriken zusammengefasst, den Core Web Vitals, die sowohl zur Bewertung der Benutzererfahrung dienen als auch als Signal in das Ranking der Suchmaschine eingehen.
Die drei Kennwerte — und die Grenzen für 'gut'
Jede Messgröße hat eine Grenze für „gut“, eine Grenze für „schlecht“ und einen Bereich dazwischen, der „verbesserungswürdig“ heißt. Google bewertet eine Seite anhand des 75. Perzentils echter Besuche — das heißt, mindestens drei von vier Besuchen müssen die gute Grenze erreichen, bevor die Seite insgesamt bei dieser Messgröße als gut gilt.
| Ziel | Was es misst | Gut | Schlecht |
|---|---|---|---|
| LCP (Largest Contentful Paint) | Wie schnell der größte sichtbare Inhalt angezeigt ist | 2,5 Sekunden oder weniger | Über 4 Sekunden |
| INP (Interaction to Next Paint) | Wie schnell die Seite visuell auf eine Nutzeraktion reagiert | 200 Millisekunden oder weniger | Über 500 Millisekunden |
| CLS (Cumulative Layout Shift) | Wie viel sichtbarer Inhalt sich während des Ladens unerwartet verschiebt | 0,1 oder darunter | Über 0,25 |
LCP — der wichtigste Inhalt muss schnell angezeigt werden
LCP misst, wann das größte und auffälligste Element im sichtbaren Bereich fertig geladen ist — oft ein Hero-Bild oder eine Überschrift. Die häufigsten Ursachen für einen schlechten LCP sind schwere, nicht optimierte Bilder, ein langsamer Server und Ressourcen, die das Rendern der Seite blockieren, während sie geladen werden. Optimiere Bilder in Größe und Format, lass kritische Ressourcen früh laden und vermeide, dass der wichtigste Inhalt auf Dinge warten muss, die der Nutzer noch gar nicht ansieht.
INP — die Reaktion auf einen Klick
INP löste 2024 die frühere Messgröße FID ab und betrachtet die Reaktionsfähigkeit breiter: Es misst den gesamten Verlauf von einer Benutzeraktion bis dahin, dass die Seite sichtbar reagiert hat, und zwar über den gesamten Besuch hinweg, nicht nur bei der ersten Interaktion. Schwere JavaScript-Aufgaben, die den Hauptthread blockieren, sind der typische Übeltäter — eine Schaltfläche, die nicht sofort reagiert, weil der Browser mit etwas anderem beschäftigt ist. Die Lösung besteht darin, große Aufgaben in kleinere Häppchen aufzuteilen und unnötig schwere Arbeit gerade dann zu vermeiden, wenn der Benutzer interagiert.
CLS — wenn Inhalte vor den Augen des Nutzers springen
CLS entsteht, wenn sich sichtbare Inhalte verschieben, ohne dass der Nutzer etwas getan hat — das klassische Beispiel ist ein Bild ohne angegebene Maße, das seinen Platz erst reserviert, wenn es fertig geladen ist, und den Text darunter nach unten schiebt. Ein anderes Beispiel sind Inhalte, die plötzlich oben auf der Seite eingefügt werden, während man gerade liest oder klickt. Reserviere Platz für Bilder und eingebettete Inhalte im Voraus, und vermeide es, neue Inhalte über dem einzufügen, was der Nutzer bereits ansieht.
- 01Optimiere und skaliere Bilder auf die Größe, in der sie tatsächlich angezeigt werden
- 02Lass nicht kritisches JavaScript und Styling laden, ohne dass sie den wichtigsten Inhalt blockieren
- 03Teile schwere JavaScript-Arbeit in kleinere Stücke auf
- 04Gib bei Bildern und eingebetteten Inhalten immer Breite und Höhe an
- 05Cache das, was sich selten ändert
“Die Nutzerin oder der Nutzer beurteilt nicht deinen Code — sondern, wie schnell sich die Seite nutzbar anfühlt.”
— Gängige Faustregel bei der Web-Performance