Hybrides Lazy Loading: Eine progressive Migration zum nativen Lazy Loading

In den letzten Wochen haben Sie vielleicht von nativem Lazy Loading gehört oder gelesen, das in den kommenden Monaten zu Chromium 75 kommt.

„Ja, tolle Neuigkeiten, aber wir müssen warten, bis alle Browser es unterstützen.“

Wenn dies das Erste war, was Ihnen in den Sinn kam, lesen Sie weiter. Ich werde versuchen, Sie vom Gegenteil zu überzeugen.

Beginnen wir mit einem Vergleich zwischen nativem Lazy Loading und dem guten alten JavaScript-gesteuerten.

Natives versus JavaScript-gesteuertes Lazy Loading

Lazy Loading ist eine Möglichkeit, die Leistung einer Website oder Webanwendung zu verbessern, indem die Rendering-Geschwindigkeit der Above-the-Fold-Bilder und -iFrames (und manchmal Videos) maximiert wird, indem das Laden von Below-the-Fold-Inhalten verzögert wird.

JavaScript-gesteuertes Lazy Loading

Um Bilder oder Iframes verzögert zu laden, ist es eine sehr gängige Praxis, sie zu markieren, indem das richtige src -Attribut durch ein ähnliches Datenattribut ersetzt wird, data-src , und sich dann auf eine JavaScript-Lösung zu verlassen, um zu erkennen, wann die Bilder/Iframes empfangen werden in der Nähe des sichtbaren Teils der Website (normalerweise, weil der Benutzer nach unten gescrollt hat) und um die Datenattribute in die richtigen zu kopieren und dann das verzögerte Laden ihrer Inhalte auszulösen.

 <img data-src="turtle.jpg" alt="Lazy turtle" class="lazy">

Natives Lazy Loading

Gemäß der nativen Lazy-Loading-Spezifikation (noch in der Entwicklung) müssten Sie, wenn Sie Bilder oder Iframes mit der nativen Lazy-Loading-Funktion Lazy-Loading durchführen möchten, nur das loading=lazy -Attribut zum zugehörigen Tag hinzufügen.

 <img src="turtle.jpg" alt="Lazy turtle" loading="lazy">

Addy Osmani hat ausführlich über dieses Thema in seinem Artikel „Native Image Lazy-Loading For The Web!“ geschrieben. in dem er erklärte, dass das Google Chrome-Team die Funktion bereits entwickelt und beabsichtige, sie in Chrome 75 auszuliefern.

Andere Chromium-basierte Browser wie Opera und Microsoft Edge werden ebenfalls von dieser Entwicklung profitieren, indem sie die gleiche Funktion in ihrem ersten Update auf Basis von Chromium 75 erhalten.

Beginnen Sie mit nativem Lazy Loading

Falls die Bilder Ihrer Website beim Landen der Seite ohne Lazy Loading auf einmal heruntergeladen werden, können Sie (sofern unterstützt) natives Lazy Loading auf Ihrer Website so einfach wie das Hinzufügen eines HTML-Attributs aktivieren. Das loading Attribut teilt Browsern mit, welche Bilder sofort geladen werden müssen und welche träge heruntergeladen werden können, während die Benutzer nach unten scrollen. Das gleiche Attribut kann auf Iframes angewendet werden.

Um Browsern mitzuteilen, dass ein bestimmtes Bild wichtig ist, damit sie es so schnell wie möglich laden können, müssen Sie das loading="eager" -Attribut zum img -Tag hinzufügen. Die beste Vorgehensweise besteht darin, dies für die primären Bilder zu tun – normalerweise für diejenigen, die „above the fold“ angezeigt werden.

 <img src="rabbit.jpg" alt="Fast rabbit" loading="eager">

Um Browsern mitzuteilen, dass ein Bild träge heruntergeladen werden soll, fügen Sie einfach das Attribut loading="lazy" hinzu. Dies ist nur dann eine bewährte Methode, wenn Sie dies nur für sekundäre Bilder tun – in der Regel werden diese unterhalb der Falte angezeigt.

 <img src="turtle.jpg" alt="Lazy turtle" loading="lazy">

Indem Sie einfach das loading zu Ihren Bildern und Iframes hinzufügen, ermöglichen Sie Ihrer Website, natives verzögertes Laden als progressive Verbesserung zu verwenden. Ihre Website wird nach und nach davon profitieren, wenn Ihre Benutzer in den meisten modernen Browsern unterstützt werden.

Dies ist der beste Ansatz, wenn Ihre Website heute kein Lazy Loading verwendet, aber wenn Sie bereits eine JavaScript-gesteuerte Lazy Loading-Lösung implementiert haben, möchten Sie sie vielleicht beibehalten und schrittweise zu nativem Lazy Loading wechseln.

Die ideale Lösung wäre, sofort mit dem nativen Lazy Loading zu beginnen und ein Polyfill zu verwenden, damit es in allen Browsern funktioniert. Leider ist natives Lazy Loading keine Funktion, die wir mit JavaScript polyfillen können.

Keine Verwendung für Polyfill

Wenn eine neue Browsertechnologie für einen einzelnen Browser veröffentlicht wird, veröffentlicht die Open-Source-Community normalerweise ein JavaScript-Polyfill, um die gleiche Technologie für den Rest der Browser bereitzustellen. Beispielsweise verwendet das IntersectionObserver -Polyfill JavaScript- und DOM-Elemente, um Element.getBoundingClientRect() zu koordinieren, um das Verhalten der nativen API zu reproduzieren.

Der Fall des nativen Lazy Loading ist jedoch anders, da ein JavaScript-Polyfill für loading="lazy" verhindern müsste, dass Browser Inhalte laden, sobald sie eine URL im Markup eines Bildes oder Iframes finden. JavaScript hat keine Kontrolle über diese Anfangsphase des Seitenrenderings, daher ist es nicht möglich, natives Lazy Loading mit Polyfill zu versehen.

Hybrides Lazy-Loading

Wenn Sie nicht damit zufrieden sind, natives Lazy Loading nur als progressive Erweiterung zu haben, oder Sie JavaScript-basiertes Lazy Loading bereits implementiert haben und diese Funktion in weniger modernen Browsern nicht verlieren möchten (aber dennoch natives Lazy Loading in Browsern aktivieren möchten die es unterstützen), dann brauchen Sie eine andere Lösung. Wir stellen vor: hybrides Lazy Loading.

Hybrid Lazy Loading ist eine Technik, um natives Lazy Loading in Browsern zu verwenden, die es unterstützen. Andernfalls verlassen Sie sich auf JavaScript, um das Lazy Loading zu handhaben.

„

Um Hybrid-Lazy-Loading durchzuführen, müssen Sie Ihren Lazy-Content mit den data anstelle der echten auszeichnen (z. B. beim JavaScript-gesteuerten Lazy-Loading) und das Attribut loading="lazy" hinzufügen.

 <img data-src="turtle.jpg" loading="lazy" alt="Lazy turtle">

Dann benötigen Sie etwas JavaScript. Zunächst müssen Sie feststellen, ob das native Lazy Loading vom Browser unterstützt wird oder nicht . Führen Sie dann für jedes Element mit dem Attribut loading="lazy" einen der folgenden Schritte aus:

• Wenn natives verzögertes Laden unterstützt wird, kopieren Sie den data-src Attributwert in das src -Attribut;
• Wenn dies nicht unterstützt wird, initialisieren Sie ein JavaScript-Lazy-Loading-Skript oder -Plugin, um dies zu tun, wenn die Elemente in den Darstellungsbereich gelangen.

Es ist nicht sehr schwer, den JavaScript-Code, der zum Ausführen dieser Operationen erforderlich ist, selbst zu schreiben. Sie können anhand der Bedingung erkennen, ob natives verzögertes Laden unterstützt wird:

 if ('loading' in HTMLImageElement.prototype)

Wenn dies der Fall ist, kopieren Sie einfach den Wert des Attributs src aus data-src . Wenn dies nicht der Fall ist, initialisieren Sie ein Lazy-Loading-Skript Ihrer Wahl.

Hier ist ein Codeausschnitt, der das tut.

 <!-- In-viewport images should be loaded normally, or eagerly --> <img src="important.jpg" loading="eager" alt="Important image"> <!-- Let's lazy-load the rest of these images --> <img data-src="lazy1.jpg" loading="lazy" alt="Lazy image 1"> <img data-src="lazy2.jpg" loading="lazy" alt="Lazy image 2"> <img data-src="lazy3.jpg" loading="lazy" alt="Lazy image 3"> <script> (function() { if ("loading" in HTMLImageElement.prototype) { var lazyEls = document.querySelectorAll("[loading=lazy]"); lazyEls.forEach(function(lazyEl) { lazyEl.setAttribute( "src", lazyEl.getAttribute("data-src") ); }); } else { // Dynamically include a lazy loading library of your choice // Here including vanilla-lazyload var script = document.createElement("script"); script.async = true; script.src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/lazyload.min.js"; window.lazyLoadOptions = { elements_selector: "[loading=lazy]" //eventually more options here }; document.body.appendChild(script); } })(); </script>

Sie können den obigen Code in dieser Live-Demo finden und testen.

Dennoch ist dies ein sehr einfaches Skript, und die Dinge können kompliziert werden, wenn Sie zusätzliche Attribute oder Tags verwenden, um responsive Bilder zu erhalten (z. B. die Attribute srcset und sizes oder sogar die Tags picture und source ).

Eine kleine Hilfe von Drittanbietern

In den letzten vier Jahren habe ich ein Open-Source-Lazy-Load-Skript namens „ vanilla-lazyload “ gepflegt, und ein paar Tage, nachdem Addy Osmani über natives Lazy-Loading geschrieben hatte, reagierte die Community, indem sie mich fragte, ob mein Skript dies könnte wirken als Polyfill.

Wie ich bereits erklärt habe, können Sie kein Polyfill für die native Lazy-Loading-Funktion erstellen, aber ich dachte an eine Lösung, die es Entwicklern erleichtern würde, mit dem Übergang zum nativen Lazy-Loading zu beginnen, ohne dafür JavaScript-Code schreiben zu müssen Ich habe schon erwähnt.

Ab Version 12 von vanilla-lazyload können Sie einfach die Option use_native auf true setzen, um hybrides verzögertes Laden zu aktivieren. Das Skript ist nur 2,0 kB gzippt und bereits auf GitHub, npm und jsDelivr verfügbar.

• Lernen Sie vanilla-lazyload auf GitHub kennen

Demos

Sie können noch heute mit nativem Lazy Loading herumspielen, indem Sie Chrome Canary oder Microsoft Edge Insider ( dev channel ) herunterladen und dann die Flags „Enable lazy image loading“ und „Enable lazy frame loading“ aktivieren. Um diese Flags zu aktivieren, geben Sie about:flags in das URL-Feld Ihres Browsers ein und suchen Sie im Suchfeld nach „lazy“.

Native Lazy Loading-Demo

Um zu analysieren, wie das native Lazy Loading in den Entwicklertools funktioniert, können Sie mit der folgenden Demo anfangen zu spielen. In diesem wird keine einzige Zeile JavaScript verwendet . Ja, es ist einfach nur natives Lazy Loading.

• Testen Sie die native Lazy-Loading-Demo

Was zu erwarten ist: Alle Bilder werden auf einmal abgerufen, aber mit unterschiedlichen HTTP-Antworten. Die mit dem Antwortcode 200 sind die eifrig geladenen Bilder, während die mit dem Antwortcode 206 nur teilweise abgerufen werden, um die anfänglichen Informationen über die Bilder zu erhalten. Diese Bilder werden dann vollständig mit einem 200 -Antwortcode abgerufen, wenn Sie nach unten scrollen.

Hybrid-Lazy-Loading-Demo

Um zu analysieren, wie Hybrid Lazy Loading funktioniert, können Sie mit der nächsten Demo beginnen. Hier wird [email protected] verwendet und die Option use_native auf true gesetzt:

• Testen Sie die Hybrid-Lazy-Loading-Demo

Was Sie erwartet : Probieren Sie die Demo auf verschiedenen Browsern aus, um zu sehen, wie sie sich verhält. Bei Browsern, die natives Lazy Loading unterstützen, wäre das Verhalten dasselbe wie in der nativen Lazy Loading-Demo. Bei Browsern, die natives Lazy Loading nicht unterstützen, werden die Bilder heruntergeladen, wenn Sie nach unten scrollen.

Bitte beachten Sie, dass vanilla-lazyload die IntersectionObserver-API im Hintergrund verwendet, sodass Sie sie im Internet Explorer und weniger aktuellen Versionen von Safari mit Polyfill ausfüllen müssten. Es ist jedoch keine große Sache, wenn kein Polyfill bereitgestellt wird, da vanilla-lazyload in diesem Fall einfach alle Bilder auf einmal herunterladen würde.

Hinweis : Weitere Informationen finden Sie im Kapitel „To Polyfill or Not To Polyfill“ der Readme-Datei von vanilla-lazyload .

Probieren Sie Hybrid Lazy Loading auf Ihrer Website aus

Da natives Lazy Loading bald für einige Browser verfügbar ist, warum geben Sie ihm nicht heute eine Chance, indem Sie hybrides Lazy Loading verwenden? Folgendes müssen Sie tun:

HTML-Markup

Das einfachste Bild-Markup wird durch zwei Attribute erstellt: src und alt .

Bei den Above-the-Fold-Bildern sollten Sie das src -Attribut beibehalten und das loading="eager" -Attribut hinzufügen.

 <img src="important.jpg" loading="eager" alt="Important image">

Bei Below-the-Fold-Bildern sollten Sie das src -Attribut durch das data-Attribut data-src ersetzen und das loading="lazy" -Attribut hinzufügen.

 <img data-src="lazy.jpg" loading="lazy" alt="A lazy image">

Wenn Sie responsive Bilder verwenden möchten, machen Sie dasselbe mit den Attributen srcset und sizes .

 <img alt="A lazy image" loading="lazy" data-src="lazy.jpg">

Wenn Sie lieber das picture -Tag verwenden, ändern srcset , sizes und src auch in den source Tags.

 <picture> <source media="(min-width: 1200px)"> <source media="(min-width: 800px)"> <img alt="A lazy image" loading="lazy" data-src="lazy.jpg"> </picture>

Das picture -Tag kann auch verwendet werden, um das WebP-Format für Ihre Bilder selektiv zu laden.

Hinweis : Wenn Sie mehr über die Verwendung von vanilla-lazyload erfahren möchten , lesen Sie bitte den HTML-Abschnitt „Erste Schritte“ der Readme-Datei.

JavaScript-Code

Zunächst müssen Sie vanilla-lazyload auf Ihrer Website einbinden.

Sie können es von einem CDN wie jsDelivr laden:

 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/lazyload.min.js"></script>

Oder Sie können es mit npm installieren:

 npm install vanilla-lazyload@12

Es ist auch möglich, ein async Skript mit automatischer Initialisierung zu verwenden; Laden Sie es als ES-Modul mit type="module" oder laden Sie es als AMD mit RequireJS. Weitere Möglichkeiten zum Einbinden und Verwenden von vanilla-lazyload im Skriptabschnitt „Erste Schritte“ der Readme-Datei.

Fügen Sie dann in den JavaScript-Code Ihrer Website/Webanwendung Folgendes ein:

 var pageLazyLoad = new LazyLoad({ elements_selector: "[loading=lazy]", use_native: true // ← enables hybrid lazy loading });

Hinweis : Das Skript hat viele andere Einstellungen, die Sie verwenden können, um das Verhalten von vanilla-lazyload anzupassen , z. B. um den Abstand des Bildlaufbereichs zu vergrößern, von dem aus das Laden der Elemente beginnt, oder um Elemente nur zu laden, wenn sie für a im Ansichtsfenster bleiben gegebene Zeit. Weitere Einstellungen finden Sie im API-Abschnitt der Readme-Datei.

Alles zusammen, mit einem async Skript

Um alles zusammenzufassen und ein async Skript zu verwenden, um die Leistung zu maximieren, beziehen Sie sich bitte auf den folgenden HTML- und JavaScript-Code:

 <!-- In-viewport images should be loaded normally, or eagerly --> <img src="important.jpg" loading="eager" alt="Important image"> <!-- Let's lazy-load the rest of these images --> <img data-src="lazy1.jpg" loading="lazy" alt="Lazy image 1"> <img data-src="lazy2.jpg" loading="lazy" alt="Lazy image 2"> <img data-src="lazy3.jpg" loading="lazy" alt="Lazy image 3"> <!-- Set the options for the global instance of vanilla-lazyload --> <script> window.lazyLoadOptions = { elements_selector: "[loading=lazy]", use_native: true // ← enables hybrid lazy loading }; </script> <!-- Include vanilla lazyload 12 through an async script --> <script async src="https://cdn.jsdelivr.net/npm/[email protected]/dist/lazyload.min.js"></script>

Das ist es! Mit diesen sehr einfachen und einfachen Schritten haben Sie Hybrid Lazy Loading auf Ihrer Website aktiviert!

Wichtige Best Practices

• Wenden Sie Lazy Loading nur auf die Bilder an, von denen Sie wissen, dass sie wahrscheinlich "below the fold" angezeigt werden. Laden Sie eifrig die über dem Falz, um die Leistung zu maximieren. Wenn Sie Lazy Load einfach auf alle Bilder auf Ihrer Seite anwenden, verlangsamen Sie die Renderleistung.
• Verwenden Sie CSS, um Platz für die Bilder zu reservieren, bevor sie geladen werden. Auf diese Weise werden sie den Rest des Inhalts unten verschieben. Wenn Sie dies nicht tun, wird eine größere Anzahl von Bildern über der Falte platziert, bevor sie sollten, was sofortige Downloads für sie auslöst. Wenn Sie dafür einen CSS-Trick benötigen, finden Sie ihn im Abschnitt Tipps und Tricks der Readme von vanilla-lazyload .

Vor-und Nachteile

Einpacken

Ich freue mich sehr, dass natives Lazy Loading für Browser verfügbar ist, und ich kann es kaum erwarten, bis alle Browseranbieter es implementieren!

In der Zwischenzeit können Sie entweder Ihr HTML-Markup für die progressive Verbesserung anreichern und natives Lazy Loading nur dort erhalten, wo dies unterstützt wird, oder Sie können sich für hybrides Lazy Loading entscheiden und sowohl natives als auch JavaScript-gesteuertes Lazy Loading erhalten, bis der Tag kommt, an dem natives Lazy Loading es wird von den meisten Browsern unterstützt werden.

Versuche es! Vergessen Sie nicht, vanilla-lazyload auf GitHub zu starten/anzuschauen, und teilen Sie mir Ihre Gedanken im Kommentarbereich mit.

Weiterführende Literatur zu SmashingMag:

• Jetzt sehen Sie mich: Wie man mit IntersectionObserver aufschiebt, faul lädt und handelt
• Lazy Loading JavaScript-Module mit ConditionerJS
• Front-End-Performance-Checkliste 2019 (PDF, Apple Pages, MS Word)
• Wie die Verbesserung der Website-Leistung helfen kann, den Planeten zu retten