Malte Ubls Liste für
8 Techniken zur Optimierung des Bildladens, um sowohl die für das Laden von Bildern im Web verwendete Bandbreite als auch die CPU-Auslastung für die Bildanzeige zu minimieren.
- Fluid breite Bilder in CSS, nicht zu vergessen die Attribute
heightundwidthin HTML, damit Sie beim ersten Rendern das richtige Seitenverhältnis erhalten. - Verwenden Sie
content-visibility: auto; - Senden Sie AVIF, wenn Sie können.
- Verwenden Sie die Syntax für responsive Bilder.
- Setzen Sie weit entfernte Expires-Header für Bilder und haben Sie eine Cache-Busting-Strategie (z. B. Ändern des Dateinamens).
- Verwenden Sie
loading="lazy" - Verwenden Sie
decoding="async" - Verwenden Sie Inline-CSS/SVG für einen unscharfen Platzhalter.
Anscheinend gibt es nur ein Werkzeug, das alles kann: eleventy-high-performance-blog.
Meine Gedanken
- Wenn Sie
lazyladen, müssen Sie dann wirklich auch diecontent-visibilty-Sache machen? Sie scheinen sehr verwandt zu sein. - Das Servieren von AVIF ist *normalerweise* gut, aber es scheint weniger eindeutig zu sein als WebP es war. Sie müssen sicherstellen, dass Ihre AVIF-Version *sowohl* besser *als auch* kleiner ist, was sich im Moment wie ein manueller Prozess anfühlt. **Update**: Mir wurde gesagt, dass AVIF tatsächlich zuverlässiger kleiner (zumindest als JPG) als WebP insgesamt ist. Ich denke trotzdem, dass Vorsicht geboten ist. Das lässt mich die Wahl des Formats noch mehr an Cloud-Anbieter auslagern wollen, die im kleinsten von ihnen produzierbaren Format liefern.
- Die Dekodierungs-Sache wirkt seltsam. Ich werde sie auf jeden Fall nutzen, wenn es ein kostenloser Performance-Gewinn ist, aber wenn es *immer* eine gute Idee ist, sollte der Browser es dann nicht einfach *immer* tun?
- Ich bin nicht ganz davon überzeugt, dass unscharfe Platzhalter in der gleichen Kategorie von Notwendigkeit wie der Rest dieses Zeugs sind. Fühlt sich eher wie ein Trend an.