Loading Lazy

Anfang 2020 ist das HTML-Attribut loading in den Standard übernommen worden. loading lazy weist den Browser an, Bilder erst zu laden, wenn sie in den ViewPort kommen, um den Seitenaufbau zu forcieren und Bandbreite zu sparen.

18-12-15 SITEMAP

Das Laden von Bildern zu verschieben, bis sie wirklich gebraucht werden – erst dann, wenn der Benutzer beim Scrollen in die Nähe der Bilder kommt – 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, erspart dieses Verhalten das Laden von Bildern, die nie sichtbar werden. Der Server wird ebenfalls entlastet, immerhin sind die Bilder auf vielen Webseite die Hauptlast.

Lazy Loading lag früher voll in den Händen von Javascript, das erkennen musste, wie weit der Benutzer sich vorgearbeitet hatte. Ein EventListener für das Scroll-Event und getBoundingClientRect für die Berechnung 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 Bilder, iframes und Video gibt es das Attribut loading, das die Werte auto, eager und lazy annehmen kann. Mit auto ändert 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 dann letztendlich 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">

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.

Während Chrome, Firefox, Opera und Edge schon mit dem Loading-Attribut des img-Tags ausgestattet sind, hinkt Safari (von IE11 reden wir gar nicht erst) hinterher. Da kann ein Polyfill Dampf machen: loading-attribute-polyfill

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 (z.B. Safari).

Ein link rel=“preload“ as=“image“ ist für Elemente mit loading lazy nicht mehr nötig.

Lazy Loading – background-image

Beim img-Tag lädt der Browser das Bild, sobald die URL zur Verfügung steht.
Hintergrundbilder machen es dem Browser nicht gerade 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. Findet der Browser das Element nicht, lädt er das Bild auch nicht.

Damit der Browser das Bild erst lädt, wenn der Benutzer es in den sichtbaren Ausschnitt kommt, 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

Externe Quellen

2019-11-16 SITEMAP BLOG