Seite geladen, Bilder noch nicht …
Das Laden von Bildern und iframe-Elementen zu verschieben, bis sie wirklich gebraucht werden, weil der Benutzer beim Scrollen in die Nähe kommt – das läßt den Anfang der Seite (over the fold) schneller »stehen« und wirkt am Ende nachhaltig.
Scrollt der Besucher nicht bis zum Bereich der Bilder, Video- oder iframe-Elemente, erspart loading lazy das Laden von Dateien, die nie sichtbar werden. Der Server wird ebenfalls entlastet, immerhin sind die Bilder auf vielen Webseiten die Hauptlast.
Lazy Loading lag früher voll in den Händen von Javascript, das erkennen musste, wie weit sich der Benutzer vorgearbeitet hatte. Ein EventListener für das Scroll-Event und getBoundingClientRect für die Berechnung der Position versetzen den Browser schnell ins Schwitzen und beim Scrollen hakelt es dann. Eine Erleichterung brachte schon der Intersection Observer, aber es bleibt beim Einsatz von Javascript.
loading eager, loading lazy
Für img und iframe gibt es das Attribut loading, das die Werte auto, eager und lazy annehmen kann. Mit auto ändert sich nichts: Der Browser entscheidet, was er in welcher Reihenfolge lädt.
- eager (eifrig bei der Sache) weist den Browser an, diese Bilder bevorzugt zu laden. Das wird vor allem bei Bildern over the fold eingesetzt.
- lazy weist den Browser an, ein Bild erst zu laden, wenn sich der Benutzer dem Bild beim Scrollen nähert. Die beste Übersetzung für lazy ist also »auf dem letzten Drücker«.
<img loading="lazy" src="black.jpg"
width="720" height="500"
alt="Erst laden, wenn das Bild sichtbar wird">
Safari, der Mac OS-Browser, hat erst spät das Nachladen von Bildern beigesteuert, Firefox hat sich bei iFrames Zeit gelassen. Aber heute unterstützen alle Browser das Nachladen »just in time«.
Loading Loading Images und Drucken
U.U. sind nicht alle Bilder geladen, wenn die Webseite gedruckt wird, weil der Besucher nicht weit genug gescrollt ist.
Lazy Loading in WordPress 5.5
WordPress 5.5 hat das native loading=“lazy“ bereits implementiert und setzt das Attribut automatisch in das img-Tag, um Bandbreite sowohl beim Besucher als auch serverseitig zu sparen.
<figure class="wp-block-image alignwide size-large">
<img loading="lazy" width="1024" height="471"
src="…/null-eins-1024x471.jpg" alt="" class="wp-image-6726"
srcset="…/null-eins-1024x471.jpg 1024w,
…/null-eins-300x138.jpg 300w,
…/null-eins-768x353.jpg 768w,
…/null-eins-1536x707.jpg 1536w,
…/null-eins-1200x552.jpg 1200w,
…/null-eins.jpg 1960w"
sizes="(max-width: 1024px) 100vw, 1024px">
</figure>
Für die bereits vorhandenen Seiten führt WordPress das Attribut nach. Allerdings ist das native lazy loading nicht ganz ohne Nebenwirkungen. Der Browser kann das Layout erst korrekt rendern, wenn die Maße des Bildes feststehen. Ist das Bild ohne width- und height-Attribut gesetzt, kommt es zu einem Layout Shift – das Layout ändert sich nachträglich, der Seiteninhalt verschiebt sich und ein Klick des Benutzers landet an der falschen Stelle.
WordPress setzt darum das loading-Attribut nur dann nachträglich in das img-Tag, wenn width und height-Attribut vorhanden sind.
Intersection Observer
Der IntersectionObserver ist schon länger im Spiel und beobachtet ein beliebiges Element – deutlich effizienter als ein EventListener, der auf das Scrollen achten muss. Auch der Intersection Observer konnte für das Laden der Bilder erst bei Bedarf sorgen. Jetzt ist der Einsatz des Intersection Observers z.B. noch sinnvoll bei Animationen, die erst starten sollen, wenn der Benutzer die Animation erreicht hat, für das lazy loading von Hintergrundbildern und für Browser, die das loading-Attribut nicht von Haus aus unterstützen (IE11).
Ein link rel=“preload“ as=“image“ ist für Elemente mit loading lazy nicht mehr nötig.
Lazy Loading – background-image
Hintergrundbilder machen es dem Browser nicht so einfach. Zuerst muss der Browser anhand des CSS das Layout aufbauen – erst wenn er das HTML-Element für das Hintergrundbild findet, lädt er das Bild.
Damit der Browser das Bild erst lädt, wenn der Benutzer den Block mit dem Hintergrundbild in den sichtbaren Ausschnitt scrollt, schaltet eine Klasse lazy das Hintergrundbild aus.
.hasBackgroundImage {
max-width: 880px;
margin: 2em auto;
background-size: cover;
}
@media (max-width: 719px) {
.hasBackgroundImage {
background-image: url(seashell-small.jpg);
height: 300px;
}
}
@media (min-width: 720px) {
.hasBackgroundImage {
background-image: url(seashell-large.jpg);
height: 400px;
}
}
.lazy {
background-image: none;
}
Der Intersection Observer entfernt die Klasse lazy:
let lazyloadImages = document.querySelectorAll(".lazy");
if ("IntersectionObserver" in window) {
let imageObserver = new IntersectionObserver (function (entries, observer) {
entries.forEach (function (entry) {
if (entry.isIntersecting) {
const image = entry.target;
image.classList.remove ("lazy");
imageObserver.unobserve (image);
}
});
});
lazyloadImages.forEach (function (image) {
imageObserver.observe (image);
});
}
Mehr zu Fotos auf Webseiten
- Fotos und Grafik für das Web optimieren – welches Bilddatenformat für welches Bild JPG, PNG, SVG, WebP, AVIF
- Javascript: Prüfen, ob das Bild geladen ist – wenn die Seite geladen und aufgebaut ist, sind die Bilder noch unterwegs
- figure / figcaption wie geschaffen für Bilder und Bildunterschriften