Ein neues Website-Projekt steht an und eins ist klar: Der größte Erfolgsfaktor für dieses Projekt heißt Performance!
Die Performance-Steigerung kann auf verschiedenen Ebenen passieren, und viele Optimierungen sind schnell erledigt und gehören zur Routine. Doch folgende Frage taucht dennoch schnell auf: Was ist die beste Variante, um Inhalte wie Bilder und iFrames erst dann zu laden, wenn sie wirklich benötigt werden?
Inzwischen gibt es eine große Anzahl an unterschiedlichen JavaScript Libraries, die Lazy Loading implementieren. Diese sind aber nicht mehr notwendig, weil der Browser dies bereits ohne externe Abhängigkeiten unterstützt – Natives Lazy Loading ist somit endlich einsatzbereit! Ich zeige Schritt für Schritt, wie der Einsatz funktioniert und wie Natives Lazy Loading mit bestehenden Lösungen kombinierbar ist.
Browser Support
Ja, auch ich habe mich anfangs gefragt: “Ist es denn wirklich schon einsatzbereit?” Aber ich kann jetzt guten Gewissens sagen: “Ja! Das ist es!” Denn:
- <img loading=lazy> wird bereits von den den meisten beliebten Browsern (Chrome, Edge, Firefox und Opera) unterstützt.
- Die Implementierung für Safari ist in Arbeit. (https://bugs.webkit.org/show_bug.cgi?id=200764).
- Browser, die das loading Attribut nicht unterstützen, ignorieren es einfach ohne Nebenwirkung – du kannst für diese Browser allerdings eine andere Lösung verwenden.
Eine genaue und aktuelle Auflistung aller unterstützter Browser sind auf Can I Use zu finden.
Implementierung
Das Loading Attribut wird aktuell für Bilder und iFrames berücksichtigt. Folgende Werte sind möglich:
- auto: Standardmäßiges Verhalten des Browsers. Es verhält sich gleich, wie wenn das loading Attribut nicht definiert ist.
- lazy: Die Ressource wird nicht direkt geladen, sondern erst kurz bevor es sich im sichtbaren Bereich befindet.
- eager: Die Ressource wird direkt geladen, egal wo es sich auf der Website befindet.
⚠️ Obwohl es für Chromium Browser verfügbar ist, wird der Wert auto aktuell nicht in der Spezifikation erwähnt. Daher würde ich vorerst von der Verwendung abraten.
Es ist ganz einfach, Lazy Loading für ein Bild oder ein iFrame zu aktivieren.
<img src="image.webp" loading="lazy" alt="...">
<iframe src="https://website.org" loading="lazy"></iframe>Wenn du den <picture> Tag verwendest - was sehr zu empfehlen ist - musst du das loading Attribut nur beim Fallback verwenden. Der Browser erledigt den Rest und lädt das richtige Bild aus <source> erst dann, wenn es wirklich benötigt wird.
<picture>
<source media="(min-width: 800px)" srcset="image-default.jpg 1x, image-large.jpg 2x">
<img src="image-fallback.jpg" loading="lazy">
</picture>Verwendung mit bestehender Lösung
Es gibt hervorragende JavaScript Libraries, die diese Aufgabe bisher übernommen haben. Vor Allem lazysizes und lozad haben eine große Beliebtheit erlangt.
Mit einer einfachen Abfrage ist es möglich, eine solche Lösung für Browser zu implementieren, welche das native nachladen noch nicht unterstützen.
if ('loading' in HTMLImageElement.prototype) {
// Natives Lazy Loading wird vom Browser unterstützt.
} else {
// Natives Lazy Loading wird nicht vom Browser unterstützt.
}Eine ausführlichere Erklärung für die Verwendung in Kombination mit lazysizes findest du auf web.dev.
Content Reflowing
1 - Die zwei Attribute width und height definieren:
<img src="image.webp" loading="lazy" alt="..." width="200" height="200">
2 - Die Breite und Höhe als Inline-Style definieren:
<img src="image.webp" loading="lazy" alt="..." style="width: 200px; height: 200px">
3 - Die Maße per CSS definieren:
<img src="image.webp" loading="lazy" alt="..." class="lazy-image">
.lazy-image {
width: 200px;
height: 200px;
}
4 - Eine sogenannte Aspect Ratio Box (https://css-tricks.com/aspect-ratio-boxes/) verwenden und das Bild bzw. iFrame absolute darin zu positionieren.Responsive ist mittlerweile ein Begriff, den bereits viele verinnerlicht haben. Daher würde ich von den ersten zwei Varianten abraten. Mit der letzten Variante habe ich bereits viele gute Erfahrungen gesammelt und kann diese durchaus empfehlen.
Meine Empfehlung
Für neue Projekte empfehle ich die native Implementierung sehr, da sich dadurch die Größe deiner JS Datei(en) verkleinert und die initiale Ladezeit der Website reduziert, was die Performance steigert. Die Implementierung ist einfach und unkompliziert und durch die Handhabung vom Browser wird es definitiv der richtige Weg für die nächsten Jahre sein.
