5 Dokumente mit dem Tag „Images“
Images are the most common cause of a slow LCP. A large, uncompressed image in the first viewport will tank the metric even if the rest of the site is impeccable. Fortunately, there is a lot to be done about them, often with minimal effort.
Under the images tag you will find articles on modern formats (WebP, AVIF), proper lazy loading, srcset for different resolutions, LCP image optimisation, and tools like Squoosh or Jpegli.
AVIF-Bilder: Bis zu 40 % Datenersparnis im Vergleich zu WebP
Das AVIF-Format bietet noch bessere Kompression als WebP. Schauen wir uns an, wann es sinnvoll ist, es zu verwenden und wie man einen Fallback für ältere Browser implementiert.
Bildoptimierung: Wenn zwischen Kilobytes und Pixeln Millisekunden entscheiden
Auch Sie, einfache Sterbliche, können Ihre Bilder zähmen und sie dazu bringen, für Sie zu arbeiten, nicht gegen Sie. Verwenden Sie einfach WebP oder AVIF, komprimieren Sie gut und vergessen Sie nicht das Lazy Loading.
CLS: Wie man die Höhe von Elementen beibehält (Bilder, JS-Komponenten, iframes…)
In diesem Text erfahren Sie, warum und wie Sie auf HTML- oder CSS-Ebene die Abmessungen von Elementen sicherstellen müssen, die asynchron in die Seite eingefügt werden, wie z.B. <img>, <iframe> oder JavaScript-Komponenten.
Lazy Loading von Bildern: Ein umfassender Leitfaden zur Verbesserung des LCP
Das verzögerte Laden von Bildern und anderen Elementen empfehlen wir als eine der grundlegenden und gleichzeitig sehr effektiven Methoden zur Optimierung der Seitenladegeschwindigkeit. Wir empfehlen Ihnen, das Laden aller Bilder außerhalb des ersten Viewports konservativ zu verzögern. Achten Sie darauf, das verzögerte Laden nicht auf Bilder anzuwenden, die das LCP-Element sind, da dies die Geschwindigkeit verschlechtern kann.
WebP-Bilder: Wertvolle Kilobyte sparen
Die Ladegeschwindigkeit einer Website ist oft eine Frage von Sekunden. Das Bildformat WebP könnte Ihre geheime Waffe sein, um Kilobyte zu sparen und sich der perfekten Performance anzunähern.