Lazy-loading ist eine beliebte Technik, um die gefühlte Geschwindigkeit einer Internetseite zu erhöhen. Statt alle Bilder einer Webseite schon beim Laden der Seite mitzuladen, werden nur die Bilder geladen, die auch tatsächlich sichtbar sind. Damit verringert man gerade auf langen Seiten die initial geladene Menge an Bildern.

Bisher hatte das mit etwas Aufwand zu tun, und auf jeden Fall mit JavaScript. Netterweise gibt es da jetzt auch eine deutlich einfachere Lösung.

Die bisherigen Lösungen gingen davon aus, dass irgendeine Form von LazyLoad-JavaScript auf der Seite montiert wurde, und das HTML eines jeden Bildes abgeändert werden musste:

<!-- Load when visible -->
<img src="example-lowres.jpg"
  data-src="example-highres.jpg" class="lazyload"
  alt="" width="240" height="240" />

Google Chrome unterstützt in absehbarer Zukunft ein Attribut namens loading, dass das Ladeverhalten von <img> und <iframe> steuert, ohne zusätzliches Javascript. Genaue Details kann man einem Blog-Post eines Chrome-Entwicklers über Lazy-Loading entnehmen, im HTML sieht das aber schlicht und ergreifend wie folgt aus:

<!-- Load when visible -->
<img src="example.jpg" loading="lazy" alt="" width="240" height="240" />
<iframe src="example.html" loading="lazy"></iframe>

<!-- Load as soon as possible -->
<img src="example.jpg" loading="eager" alt="" width="240" height="240" />
<iframe src="example.html" loading="eager"></iframe>

Damit entfällt in Zukunft in Google Chrome (und allen anderen Browsern, die da nachziehen werden) die Notwendigkeit, JavaScript für Lazy-Loading auf der eigenen Seite zu montieren. Zudem können browser ohne diese Möglichkeit bzw. ohne JavaScript immer noch die selben Inhalte sehen.

Tests mit Chrome

Solange Google Chrome das Feature noch nicht direkt unterstützt, muss man im aktuellen Google Chrome Lazy-Loading noch einmalig einschalten:

  1. In Chrome chrome://flags in die URL-Zeile eingeben
  2. Nach „Lazy“ suchen.
  3. Die beiden nun angezeigten Optionen aktivieren.
  4. Chrome neu starten.

Danach sollte man beim Besuch einer Seite, die mit loading-Attributen versehen ist, beim Öffnen des Inspektors bemerken, dass erst beim Scrollen auf der Seite weiter unten befindliche Bilder nachgeladen werden.

Mit der Gießkanne: Umsetzung in NodeJs

Um in einem gesamten Content-Block jedes <img> und <iframe> mit dem passenden loading-Attribut zu versehen, reicht folgende kleine Funktion:

const lazyloadAttributes = function(html, loading = 'lazy') {
  return html.replace(/(<(?:img|iframe) )/g, '$1loading="' + loading + '" ');
};

…und in PHP

Gleichsam können in PHP z.B. redaktionelle Texte durch diese Funktion durchgeleitet werden, um überall Lazy-Loading hinzuzufügen:

function lazyloadAttributes($html, $loading = 'lazy') {
  return preg_replace('/(<(?:img|iframe) )/is', '$1loading="' . $loading . '" ', $html);
}

Fazit

Eigentlich gibt es wenig Gründe, dass Attribut nicht einzusetzen. Gerade auf länglichen Übersichtsseiten kann das Erlebnis für den Besucher deutlich verbessert werden. Und für Mobilgeräten mit geringer Bandbreite kann der Geschwindigkeitszuwachs immens sein.

Außerdem steht zu erwarten, dass in Zukunft auch Safari und vielleicht sogar Firefox dieses Feature unterstützen werden – während Microsofts Edge ja gerade auf die Browser-Engine von Chrome wechselt, und damit dieses Feature implizit unterstützt.