Das neue native Video- und Audio-Lazy Loading von Google Chrome könnte das Web schneller machen

/de/images/Google-Chrome-lazy-loading-for-videos-and-audio.jpg

Google Chrome und andere Chromium-basierte Browser, darunter Edge und Vivaldi, könnten bald native Unterstützung für Lazy Loading von Video und Audio erhalten. Diese Änderung wurde von Helmut Januschka vorgeschlagen, einem unabhängigen Entwickler, der für seine früheren Beiträge zu Chromium bekannt ist.

Die Lazy-Loading-Funktion gibt es in Chrome schon seit Jahren, aber bisher war die native Unterstützung auf Elemente wie Bilder und Iframes beschränkt, nicht auf Video und Audio. Das ändert sich bald, da Chromium-basierte Browser von Haus aus Lazy Loading für Video und Audio unterstützen, was das Web schneller machen könnte, insbesondere wenn Sie Webseiten mit vielen Medien durchsuchen.

/de/images/Chromium-automatic-lazy-loading.jpg

Für diejenigen, die es nicht wissen: Wenn Sie ein Bild oder Video träge auf eine Website laden und es in Chrome oder einem anderen Browser besuchen, werden die Medien nicht abgerufen oder vollständig initialisiert, sobald der Browser die Seite rendert. Videos oder Bilder werden nur geladen, wenn sie in Ihrer Nähe sichtbar sind, entweder wenn Sie zu dem Bereich scrollen, in dem ein Video eingebettet ist.

Ohne verzögertes Laden lädt Chrome Medien möglicherweise viel früher, was bedeutet, dass die Website viel langsamer wäre, da der Browser zunächst alles auf der Seite herunterladen muss. Mit „loading=“lazy“ lädt oder lädt Chrome das Video erst dann herunter, wenn Sie tatsächlich den Bereich erreichen, in dem es eingebettet ist. Wenn Sie nicht so weit scrollen, wird das Medium möglicherweise nie geladen.

Die meisten Websites nutzen JavaScript bereits zum verzögerten Laden von Videos oder Audiodaten, was zwar gut funktioniert, jedoch nicht die optimale Vorgehensweise für die Leistung darstellt, da es sich nicht gut in den nativen Preload-Scanner des Browsers und die integrierten Ladeheuristiken integrieren lässt.

„Ohne native Unterstützung müssen Entwickler benutzerdefinierte JavaScript-Lösungen mithilfe von Intersection Observer implementieren, um zu erkennen, wann Medienelemente in das Ansichtsfenster gelangen, und dann das src-Attribut dynamisch festzulegen“, schrieb Entwickler Helmut Januschka in einem Beitrag zum Chrome-Status. „Dieser Ansatz ist fehleranfällig, erhöht die Komplexität und lässt sich nicht in den Preload-Scanner des Browsers integrieren.“

Wie Windows Insight erstmals entdeckte, besteht die Lösung von Helmut Januschka darin, Chromium um vollwertiges natives Lazy Loading für Video und Audio zu erweitern, ähnlich wie es bereits für Bilder und Iframes integriert ist.

Wenn diese Funktion in Chrome Stable eingeführt wird, können Entwickler stattdessen ein HTML-Attribut verwenden: „loading=“lazy“ direkt auf oder.

Dies bedeutet, dass Video und Audio nativ verzögert geladen werden, anstatt sich auf JavaScript zu verlassen, was einen Engpass darstellen oder mit dem Preload-Scanner von Chrome nicht gut funktionieren kann.

„Native Lazy Loading ermöglicht es dem Browser, das Laden von Ressourcen mit netzwerkbewussten Schwellenwerten zu optimieren, die Interaktion mit Autoplay- und Preload-Attributen richtig zu handhaben und das Blockieren von window.onload für Offscreen-Medien zu vermeiden“, bemerkte Januschka.

„Dies entspricht dem bestehenden Lazy-Loading-Verhalten für ![] und