Eine neue Chrome-Funktion namens "Blink LazyLoad" soll die Leistung drastisch verbessern, indem das Laden von Bildern und Drittanbieter-<iframe>s unterhalb des sichtbaren Bereichs aufgeschoben wird.
Die Ziele dieses kühnen Experiments sind die Verbesserung der Gesamtgeschwindigkeit des Renderns von Inhalten, die im Ansichtsfenster eines Benutzers erscheinen (auch bekannt als "above-the-fold"), sowie die Reduzierung des Netzwerkdaten- und Speicherverbrauchs. ✨
Wenn Sie Ihrem Webseiten-Medien jetzt Lazy Loading hinzufügen möchten, wären Sie schlau, diese nativen Lazy Loading-Attribute einzubinden, aber zum Zeitpunkt dieses Updates (Juli 2019) ist die Unterstützung in stabilen Browsern noch nicht vorhanden. Sie werden sich weiter informieren müssen.
👨🏫 Wie wird es funktionieren?
Es wird angenommen, dass das vorübergehende Verzögern weniger wichtiger Inhalte die wahrgenommene Gesamtleistung drastisch verbessern wird.
Wenn dieser Vorschlag erfolgreich ist, werden während der Ladephase einer Seite automatische Optimierungen durchgeführt.
- Bilder und iFrames werden analysiert, um ihre Wichtigkeit zu beurteilen.
- Wenn sie als nicht wesentlich eingestuft werden, werden sie verzögert oder gar nicht geladen.
- Verzögerte Elemente werden erst geladen, wenn der Benutzer in die Nähe gescrollt hat.
- Bis ein Bild heruntergeladen ist, wird ein leeres Platzhalterbild verwendet.
Der öffentliche Vorschlag enthält einige interessante Details.
- LazyLoad besteht aus zwei verschiedenen Mechanismen: LazyImages und LazyFrames.
- Verzögerte Bilder und iFrames werden geladen, wenn ein Benutzer innerhalb einer bestimmten Anzahl von Pixeln gescrollt hat. Die Pixelanzahl variiert je nach drei Faktoren.
- Ob es sich um einen iframe oder ein Bild handelt.
- Der Datensparmodus ist aktiviert oder deaktiviert.
- Der "effektive Verbindungstyp".
- Sobald der Browser festgestellt hat, dass sich ein Bild unterhalb des sichtbaren Bereichs befindet, sendet er eine Range-Anfrage, um die ersten Bytes eines Bildes abzurufen und seine Abmessungen zu ermitteln. Die Abmessungen werden dann verwendet, um einen Platzhalter zu erstellen.
Das loading-Attribut ermöglicht es Autoren anzugeben, welche Elemente geladen oder nicht geladen werden sollen. Hier ist ein Beispiel, das anzeigt, dass dieser Inhalt nicht wesentlich ist.
<iframe src="ads.html" loading="lazy"></iframe>Es gibt drei Optionen.
on– Zeigt eine starke Präferenz an, das Herunterladen zu verzögern, bis der Inhalt angezeigt werden kann.off– Lädt diese Ressource sofort, unabhängig von der Anzeige.auto– Überlässt die Entscheidung dem Browser (hat die gleiche Wirkung wie die Nichtverwendung desloading-Attributs).
🔒 Implementierung einer sicheren Lazy Loading-Richtlinie
Feature policy: LazyLoad bietet einen Mechanismus, der es Autoren ermöglicht, die LazyLoad-Funktionalität pro Domain zu erzwingen oder abzuwählen (ähnlich wie Content Security Policies funktionieren). Es gibt einen noch nicht zusammengeführten Pull-Request, der beschreibt, wie dies funktionieren könnte.
🤔 Wie sieht es mit der Abwärtskompatibilität aus?
Zum jetzigen Zeitpunkt ist es schwierig zu sagen, ob diese Seitenoptimierungen Kompatibilitätsprobleme für bestehende Websites verursachen könnten.
Drittanbieter-iframes werden für eine Vielzahl von Zwecken wie Werbung, Analysen oder Authentifizierung verwendet. Das Verzögern oder Nichtladen eines entscheidenden iframes (weil der Benutzer nie so weit scrollt) könnte dramatische unvorhersehbare Auswirkungen haben. Seiten, die darauf angewiesen sind, dass ein Bild oder iframe geladen und beim Auslösen von onLoad vorhanden ist, könnten ebenfalls erhebliche Probleme haben.
Diese automatischen Optimierungen könnten die Rendering-Geschwindigkeit von Chrome leise und effizient beschleunigen, ohne nennenswerte Probleme für die Benutzer. Das Google-Team hinter dem Vorschlag misst sorgfältig die Leistungseigenschaften der LazyLoad-Effekte anhand von Metriken, die Chrome aufzeichnet.
💻 Lazy Loading in Chrome aktivieren
Zum Zeitpunkt der Veröffentlichung ist natives Lazy Loading nur in Chrome Canary verfügbar, hinter zwei erforderlichen Flags.
chrome://flags/#enable-lazy-image-loadingchrome://flags/#enable-lazy-frame-loading
Flags können durch Eingabe von chrome://flags in einem Chrome-Browser aktiviert werden.
📚 Referenzen und Materialien
- Öffentlicher LazyLoad-Vorschlag
- HTML Living Standard Pull Request – lazyload attribute
- HTTP Range Requests
- Chrome Platform Status – Feature policy: lazyload
- LazyLoad Frames wurde in Chromium integriert (Minuten nach der Veröffentlichung)
- Calibre Performance Monitoring
Browser-Unterstützung
Diese Daten zur Browserunterstützung stammen von Caniuse, das weitere Details enthält. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version und aufwärts unterstützt.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 77 | 121 | Nein | 79 | 16.4 |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 127 | 127 | 127 | 16.4 |
👋 Zum Abschluss
Während wir die Aufnahme der nächsten Milliarde Nutzer im Web begrüßen, ist es demütigend zu wissen, dass wir gerade erst beginnen, die Komplexität von Browsern, Konnektivität und Benutzererfahrung zu verstehen.
Es erscheint unklug, wenn die Standardeinstellung auf „auto“ statt auf „off“ gesetzt ist. Ich kann mir mehrere Situationen zusätzlich zu den in diesem Beitrag genannten vorstellen, in denen dies zu Problemen führen kann. Ich sehe auch keinen großen Aufwand, es als Opt-in zu gestalten. Ich hoffe, sie überdenken das oder denken es so gründlich durch, dass die Probleme so gering sind, dass sie akzeptabel sind.
Oh, sehr interessant!
Guter Artikel Ben.
Klingt gut für mich. Ich denke, es wird eine sehr gute Verbesserung sein, wenn die Browser sich darum kümmern.
Das erste, was mir einfällt, sind Anzeigenimpressionen. Verlage werden ihre Anzeigenaufrufe drastisch reduzieren, wenn dies standardmäßig so ist.
Matt, diesen Gedanken hatte ich anfangs auch, habe dann aber meine Meinung geändert. Werbetreibende werden das wahrscheinlich schnell erkennen und verlangen, dass die iframes, die ihre Anzeigen hosten, sofort und nicht verzögert geladen werden. Verlage werden dieser Anforderung nachkommen, um den Einnahmestrom aufrechtzuerhalten.
Ich denke, Werbetreibende wären damit einverstanden. Das bedeutet, sie zahlen nicht für Anzeigen, die nie gesehen werden, weil sie unterhalb des sichtbaren Bereichs lagen und der Benutzer nicht nach unten gescrollt hat.
Ich stimme den bisherigen Kommentaren zu, es sollte standardmäßig deaktiviert sein und vom Entwickler für bestimmte Elemente aktiviert werden. Ich freue mich, dass dies endlich Teil des Browsers ist.
Wird immer noch eine Range-Anfrage für Bilder unterhalb des sichtbaren Bereichs gesendet? In vielen Fällen hätten Sie die Platzhaltergröße bereits aus den Bildattributen width/height.