SparkCore
Core Web Vitals verbessern mit leichteren Medien
LCP und CLS hängen oft an schweren Bildern. Kleinere Dateien und feste Abmessungen helfen sofort.
Kurz gesagt
- Gut ist: LCP 2,5 Sekunden oder schneller, INP 200 Millisekunden oder schneller, CLS 0,1 oder niedriger.
- Bilder betreffen vor allem LCP und CLS, INP hängt stärker an JavaScript.
- Laden Sie Ihr erstes großes Bild nie per Lazy Load und geben Sie jedem Bild width und height.
Quick Wins
- Komprimieren Sie Hero- und Produktfotos
- Verwenden Sie moderne Formate
- Vermeiden Sie überdimensionierte Uploads
Was sind Core Web Vitals und welche Werte sind gut?
Core Web Vitals messen, wie sich eine Seite für Besucher anfühlt. LCP misst, wie schnell das größte sichtbare Element erscheint. INP misst, wie schnell die Seite auf Klicks und Tippen reagiert. CLS misst, wie stark das Layout beim Laden verrutscht. Ein guter Wert ist LCP von 2,5 Sekunden oder weniger, INP von 200 Millisekunden oder weniger und CLS von 0,1 oder niedriger. Messen Sie am besten mit echten Besucherdaten, nicht nur mit einem Labortest.
- LCP: 2,5 Sekunden oder weniger
- INP: 200 Millisekunden oder weniger
- CLS: 0,1 oder niedriger
Wie verbessern Sie LCP auf WordPress?
Auf vielen Seiten ist das LCP-Element ein großes Bild, etwa ein Hero-Bild oder ein Produktfoto. Machen Sie diese Datei daher so klein wie möglich und liefern Sie sie in einem modernen Format aus. Laden Sie sie nicht per Lazy Load: Sie ist sofort im Bild und muss gleich starten. Ein schneller Server und Seitencache verkürzen die Wartezeit bis zum ersten Byte, und auch das zählt für LCP. Laden Sie außerdem kein Bild hoch, das viel größer ist als sein Platz.
- Komprimieren Sie das Hero- und die Produktfotos
- Verwenden Sie WebP oder AVIF mit einem Fallback
- Setzen Sie kein Lazy Loading auf das erste Bild
Wie vermeiden Sie mit Bildern Layoutverschiebungen (CLS)?
Layoutverschiebungen entstehen, wenn der Browser die Größe eines Bildes nicht kennt. Der Text springt dann nach unten, sobald das Bild eintrifft. Geben Sie deshalb jedem Bild width und height. Der Browser reserviert dann vor dem Laden den passenden Platz. WordPress ergänzt diese Attribute bei Bildern aus der Mediathek meist selbst. Prüfen Sie aber Ihre eigenen Blöcke, Theme-Bestandteile und Ihren Code. Reservieren Sie Platz auch für Banner, Anzeigen und Schriftarten, die später laden.
Was können Sie für INP tun und wo hilft Caching?
INP hängt vor allem von JavaScript ab. Schwere Skripte von Themes, Plugins und Trackern halten den Hauptthread beschäftigt. Entfernen Sie, was Sie nicht verwenden, und verzögern Sie das Laden des Rests. Bilder spielen hier eine kleine Rolle. Caching hilft vor allem bei LCP. Eine gecachte Seite ist schneller fertig, und ein CDN bringt Dateien näher an den Besucher. Messen Sie nach jeder Änderung erneut und passen Sie jeweils nur eine Sache an, sonst wissen Sie nicht, was gewirkt hat.
Häufige Fragen
Meistens LCP, weil das größte Element oft ein Bild ist. Komprimieren Sie diese Datei, wählen Sie ein modernes Format und laden Sie sie nicht per Lazy Load. Danach ist CLS an der Reihe: Geben Sie jedem Bild width und height.
Nein. Lazy Loading ist für Bilder unterhalb des sichtbaren Bereichs gedacht. WordPress setzt loading lazy automatisch auf Bilder. Das erste große Bild, oft das LCP-Element, laden Sie dagegen sofort, sonst wird Ihr LCP langsamer.
Bilder sind nur ein Teil der Geschichte. Langsames Hosting, schwere Skripte, nicht gecachte Seiten und verrutschendes Layout fallen ebenfalls ins Gewicht. Sehen Sie in Ihrem Bericht pro Metrik nach, welches Element oder Skript die Ursache ist.