Unterstützung für eingebaute Lazy Image- und Iframe-Uploads ist ins Web gekommen!
Ab Chrome Version 76 können Sie das neue Ladeattribut verwenden, um Ressourcen träge zu laden, ohne dafür zusätzlichen Code schreiben oder eine JavaScript-Bibliothek eines Drittanbieters verwenden zu müssen. Schauen wir uns die Details an.
Dieses Video zeigt
ein Beispiel für diese Funktion:
Warum eingebautes Lazy Loading?
Laut
HTTPArchive sind Bilder auf den meisten Websites der am häufigsten nachgefragte Ressourcentyp und verbrauchen normalerweise mehr Bandbreite als alle anderen. Beim 90. Perzentil senden Websites etwa 4,7 MB Bilder an Desktops und mobile Geräte. Genug
Fotos mit Katzen .
Eingebettete Iframes verbrauchen auch viele Daten und können die Seitenleistung beeinträchtigen. Das Herunterladen unkritischer Bilder und Iframes nur zu dem Zeitpunkt, an dem der Benutzer sie sehen kann, verbessert die Seitenladegeschwindigkeit, minimiert die Belastung der Benutzerkanalbandbreite und reduziert die Speichernutzung.
Derzeit gibt es zwei Möglichkeiten, das Laden von Bildern und Frames außerhalb des Bildschirms zu verzögern:
Mit jeder Option können Entwickler möglicherweise Funktionen zum verzögerten Laden aktivieren. Viele haben Bibliotheken von Drittanbietern erstellt, um Abstraktionen bereitzustellen, die noch einfacher zu verwenden sind. Wenn Sie das verzögerte Laden direkt im Browser unterstützen, ist keine Bibliothek eines Drittanbieters erforderlich. Das integrierte verzögerte Laden stellt auch sicher, dass das verzögerte Laden von Bildern und Frames auch dann funktioniert, wenn JavaScript auf der Clientseite deaktiviert ist.
Attribut wird geladen
Chrome lädt bereits heute Bilder mit unterschiedlichen Prioritäten herunter, je nachdem, wo sie sich im Verhältnis zum Anzeigebereich des Geräts befinden. Bilder unterhalb des Anzeigebereichs werden mit niedrigerer Priorität hochgeladen, aber dennoch so schnell wie möglich hochgeladen.
In Chrome 76 können Sie das
loading , um das Laden von Bildern und Frames vom Bildschirm dauerhaft zu verzögern. Dies kann durch Scrollen erreicht werden:
<img src="image.png" loading="lazy" alt="…" width="200" height="200"> <iframe src="https://example.com" loading="lazy"></iframe>
Unterstütztes
loading Attributwerten:
auto : Standardeinstellung für den verzögerten Lademodus im Browser. Gleich wie fehlendes Attributlazy : Verzögert das Laden einer Ressource, bis die geschätzte Entfernung vom Ansichtsfenster erreicht isteager : Laden einer Ressource sofort, trotz ihres Speicherorts auf der Seite
Diese Funktion wird weiterhin aktualisiert, bis sie in der stabilen Version (nicht früher als Chrome 76) gestartet wird. Sie können es jedoch versuchen, indem Sie die folgenden Flags in Chrome aktivieren:
- chrome: // flags / # enable-lazy-image-load
- chrome: // flags / # enable-lazy-frame-load
Ladedistanzschwelle
Alle Bilder und Rahmen, die auf der Seite sichtbar sind, ohne dass ein Bildlauf erforderlich ist, werden standardmäßig geladen. Diejenigen, die sich unterhalb des Anzeigebereichs des Geräts befinden, werden nur geladen, wenn der Benutzer zu ihnen blättert.
Die Entfernung, in der das Laden beginnt, ist nicht festgelegt und hängt von mehreren Faktoren ab:
Die Standardwerte für verschiedene Arten von Wirkstoffen finden Sie in der
Chromquelle . Diese Metriken und sogar der Ladeansatz beim Erreichen einer bestimmten Entfernung vom Anzeigebereich können sich in naher Zukunft ändern, da das Chrome-Team die Heuristiken verbessert, um zu bestimmen, wann mit dem Herunterladen begonnen werden soll.
In Chrome 77 können Sie mit diesen verschiedenen Schwellenwerten experimentieren,
indem Sie die Verbindungsgeschwindigkeit in DevTools verlangsamen. Währenddessen müssen Sie den effektiven Verbindungstyp im Browser mithilfe des
chrome://flags/#force-effective-connection-type. überschreiben
chrome://flags/#force-effective-connection-type.Bilder hochladen
Das Ladeattribut wirkt sich auf Frames anders aus als auf Bilder, je nachdem, ob der Frame ausgeblendet ist (ausgeblendete Frames werden häufig für Analyse- oder Kommunikationsaufgaben verwendet). Chrome verwendet die folgenden Kriterien, um festzustellen, ob ein Frame ausgeblendet ist:
- Rahmenbreite und -höhe 4px oder weniger
display: none oder visibility: hidden gelten visibility: hidden Eigenschaften- Der Rahmen ist außerhalb des Bildschirms mit negativer X- oder Y-Positionierung
Wenn ein Frame eine dieser Bedingungen erfüllt, betrachtet Chrome ihn als ausgeblendet und wird in den meisten Fällen nicht im verzögerten Modus geladen. Frames, die nicht ausgeblendet sind, werden nur geladen, wenn sie innerhalb des
Ladeschwellenwerts liegen . Für Frames, die noch im verzögerten Lademodus geladen werden, wird ein Platzhalter angezeigt
FAQ
Gibt es Pläne, diese Funktion zu erweitern?
Es ist geplant, den Standardmodus für das verzögerte Laden des Browsers so zu ändern, dass in diesem Modus automatisch alle Bilder und Frames angezeigt werden, deren Laden verzögert werden kann, wenn der
Lite-Modus in Chrome für Android aktiviert
ist .
Ist es möglich, den Abstand zum Bild oder Bild zu ändern, bei dem das verzögerte Laden beginnt?
Diese Werte sind fest codiert und können nicht über die API geändert werden. Sie können sich jedoch in Zukunft ändern, da das Chrome-Team mit verschiedenen Schwellenabständen und Variablen experimentiert.
Können Bilder, die über die CSS-Hintergrundeigenschaft festgelegt wurden, das Ladeattribut erhalten?
Nein, im Moment kann es nur mit Tags verwendet werden.
Wie funktioniert das Ladeattribut mit Bildern, die im Umfang liegen, aber nicht sichtbar sind (wie ein Karussell)?
Im verzögerten Modus werden nur die Bilder geladen, die sich in einem
bestimmten Abstand vom unteren Rand des Anzeigebereichs des Geräts befinden. Alle Bilder über dem Anzeigebereich, unabhängig davon, ob sie aktuell sichtbar sind, werden normal geladen.
Was ist, wenn ich bereits eine Bibliothek oder ein Skript eines Drittanbieters verwende, um das Laden von Bildern oder Frames zu verschieben?
Das Ladeattribut sollte sich nicht auf Code auswirken, der Daten im verzögerten Modus lädt. Es ist jedoch wichtig, einige wichtige Punkte zu berücksichtigen:
- Wenn Ihr Bootloader eines Drittanbieters im verzögerten Modus versucht, Bilder oder Frames zu laden, bevor Chrome sie im normalen Modus lädt, dh in einer Entfernung, die über dem Schwellenwert für die Download-Entfernung des Browsers liegt, werden sie weiterhin verzögert und gemäß den Regeln des normalen Browserverhaltens geladen
- Wenn Ihr Bootloader eines Drittanbieters einen kürzeren Abstand verwendet, um zu bestimmen, wann ein bestimmtes Bild oder ein bestimmtes Bild als der Browser geladen werden soll, stimmt das Verhalten mit den Einstellungen Ihres Bootloaders überein
Einer der wichtigen Gründe, eine Bibliothek eines Drittanbieters parallel zum Laden = "faul" weiter zu verwenden, ist die Bereitstellung einer Polydatei für Browser, die dieses Attribut nicht unterstützen.
Unterstützen andere Browser das integrierte verzögerte Laden?
Das
loading kann als fortschreitende Verbesserung angesehen werden. Browser, die dies unterstützen, können Bilder und Frames im verzögerten Modus hochladen. Diejenigen, die dies nicht unterstützen - laden Sie vorerst Bilder wie gewohnt hoch. Unter dem Gesichtspunkt der browserübergreifenden Unterstützung wird das
loading in Chrome 76 und allen auf Chromium 76 basierenden Browsern unterstützt. Es gibt auch einen
offenen Fehler bei der Implementierung dieser Funktion in Firefox.
Eine ähnliche API wurde in IE und Edge vorgeschlagen und verwendet, konzentrierte sich jedoch darauf, die Download-Prioritäten zu senken, anstatt sie vollständig zu verschieben.
Was tun mit Browsern, die den integrierten verzögerten Download noch nicht unterstützen?
Erstellen Sie eine Polydatei oder verwenden Sie eine Bibliothek eines Drittanbieters, um Bilder im verzögerten Modus auf die Site hochzuladen. Die Ladeeigenschaft kann verwendet werden, um festzustellen, ob die Funktionalität im Browser unterstützt wird:
if ('loading' in HTMLImageElement.prototype) {
Lazysizes ist beispielsweise eine beliebte JavaScript-Bibliothek zum verzögerten Laden. Sie können die Unterstützung für das
loading so definieren, dass diese Bibliothek nur geladen wird, wenn das
loading nicht unterstützt wird. Es funktioniert wie folgt
<img src="hero.jpg" alt="…"> <img data-src="unicorn.jpg" alt="…" loading="lazy" class="lazyload"> <img data-src="cats.jpg" alt="…" loading="lazy" class="lazyload"> <img data-src="dogs.jpg" alt="…" loading="lazy" class="lazyload"> <script> if ('loading' in HTMLImageElement.prototype) { const images = document.querySelectorAll('img[loading="lazy"]'); images.forEach(img => { img.src = img.dataset.src; }); } else { </script>
Demonstration der Arbeit. Probieren Sie es in Browsern wie Firefox oder Safari aus, um den Fallback in Aktion zu sehen.
Die Lazysizes-Bibliothek bietet außerdem
ein integriertes Lade-Plugin , das nach Möglichkeit das integrierte verzögerte Laden verwendet und bei Bedarf die Funktionen der Bibliothek verwendet.
Wie wirkt sich das verzögerte Inline-Laden auf Anzeigen auf einer Seite aus?
Alle Anzeigen in Form von Bildern oder Frames werden wie alle anderen Bilder oder Frames auch im verzögerten Modus geladen.
Wie werden Bilder verarbeitet, wenn eine Webseite gedruckt wird?
Obwohl Chrome 76 keine Funktionalität bietet, gibt es
ein offenes Problem , bei dem beim Drucken einer Seite sofort alle Bilder und Frames geladen werden.
Fazit
Die Verwendung der integrierten Unterstützung für das verzögerte Laden von Bildern und Frames kann die Leistung von Webseiten erheblich verbessern.
Wenn Sie beim Aktivieren dieser Funktion in Chrome
ein ungewöhnliches Verhalten feststellen,
melden Sie einen Fehler .