Zeit zum faulen Laden von Iframes außerhalb des Bildschirms!

La carga diferida nativa a nivel del Browser para iframes está aquí

24. Juli 2020

Das native Lazy Loading für gelandete Bilder in Chrome 76 über Wird geladen Attribut y luego llegó a Firefox. Estamos felices de compartir eso
native Lazy Loading für Iframes ist jetzt
standardisiert y también es compatible con los Browser Chrome y Chromium.

<iframe src="https://example.com"
        Wird geladen="faul"
        Breite="600"
Höhe="400"></iframe>

La carga diferida nativa de iframes difiere la carga de iframes fuera de la pantalla hasta que el Nutzername se desplaza cerca de ellos. Esto ahorra datos, acelera la carga de otras partes de la página y reduce el uso de memoria.

Dies Manifestation von <iframe loading=lazy>
zeigt verzögertes Laden von Video-Einbettungen:

Warum sollten wir Iframes träge laden?

Las incrustaciones de terceros cubren una amplia gama de casos de uso, desde reproductores de video hasta publicaciones en redes sociales y anuncios. A menudo, este Inhalt no es inmediatamente visible en la ventana gráfica del usuario. Más bien, solo se ve una vez que se desplazan hacia abajo en la página. A pesar de esto, los usuarios pagan el costo de descargar datos y JavaScript costoso por cada marco, incluso si no se desplazan hasta él.

Basierend auf den Recherchen von Chrome zu iframes außerhalb des Bildschirms wird für Data Saver-Benutzer automatisch verzögert geladenDas verzögerte Laden von Iframes kann zu durchschnittlichen Dateneinsparungen von 2-3%, ersten Farbreduzierungen mit 1-2%-Inhalten im Median und 2%-Verbesserungen bei der Verzögerung der ersten Eingabe (FID) beim 95. Perzentil führen.

Wie funktioniert das native Lazy Loading für Iframes?

das Wird geladen Mit diesem Attribut kann ein Browser das Laden von Iframes und Bildern vom Bildschirm verschieben, bis Benutzer in die Nähe scrollen. Wird geladen unterstützt drei Werte:

• faul: ist ein guter Kandidat für faules Laden.
• eifrig: kein guter Kandidat für faules Laden. Sofort aufladen.
• Wagen: Der Browser ermittelt, ob er faul geladen wird.

Verwendung der Wird geladen Das Attribut in iframes funktioniert wie folgt:

<iframe src="https://example.com" 
Wird geladen="faul" 
Breite="600" 
Höhe="400"></iframe>

<iframe src="https://example.com" 
Breite="600" 
Höhe="400"></iframe>

<iframe src="https://example.com" 
Wird geladen="eifrig" 
Breite="600" 
Höhe="400"></iframe>

Wenn Sie das Attribut überhaupt nicht angeben, hat dies die gleichen Auswirkungen wie das explizite Laden der Ressource mit Begeisterung, mit Ausnahme von Der Lichtmodus
Benutzer, bei denen Chrome die verwenden wird Wagen Wert, um zu entscheiden, ob es faul geladen werden soll.

Wenn du es brauchst dynamisch Erstellen Sie Iframes über JavaScript und stellen Sie sie ein
iframe.loading = 'faul' im element ist auch
unterstützt:

var iframe = Dokument.createElement('iframe');
iframe.src = 'https://example.com';
iframe.Wird geladen = 'lazy';
Dokument.Körper.appendChild(iframe);

Iframe-spezifisches verzögertes Ladeverhalten

Das Ladeattribut wirkt sich anders auf Iframes aus als Bilder, je nachdem, ob der Iframe ausgeblendet ist. (Versteckte Iframes werden häufig zu Analyse- oder Kommunikationszwecken verwendet.) Chrome verwendet die folgenden Kriterien, um festzustellen, ob ein Iframe ausgeblendet ist:

• Die Breite und Höhe des Iframes sind 4px oder weniger.
• Anzeige: keine oder Sichtbarkeit: versteckt Es wird angewendet.
• El iframe se coloca fuera de la pantalla mediante un Positionierung X o Y negativo.
• Dieses Kriterium gilt für beide Laden = faul y Laden = Auto.

Wenn ein Iframe eine dieser Bedingungen erfüllt, betrachtet Chrome ihn als ausgeblendet und lädt ihn in den meisten Fällen nicht verzögert. Nicht ausgeblendete Iframes werden nur geladen, wenn sie sich innerhalb des Ladedistanzschwellenwerts befinden. Chrome zeigt einen Platzhalter für verzögert geladene Iframes an, die noch abgerufen werden.

Welche Auswirkungen könnten wir bei beliebten Iframe-Einbettungen mit verzögertem Laden sehen?

¿Qué pasaría si pudiéramos cambiar la Netz en general para que los iframes fuera de pantalla de carga diferida fueran los predeterminados? Se vería un poco así:

Incrustaciones de videos de Youtube de carga diferida (ahorra ~ 500 KB en la carga de la página inicial):

<iframe src="https://www.youtube.com/embed/YJGCZCaIZkQ"
        Wird geladen="faul" 
        Breite="560" 
        Höhe="315" 
        frameborder="0" 
ermöglichen="accelerometer; autoplay; 
        encrypted-media; gyroscope; 
picture-in-picture" 
allowfullscreen></iframe>

Anekdote: Als wir zum verzögerten Laden von YouTube-Einbettungen für Chrome.com gewechselt sind, haben wir 10 Sekunden gespart, wie schnell unsere Seiten auf Mobilgeräten interaktiv sein können. Ich habe einen internen Fehler bei YouTube geöffnet, um zu besprechen, wie man etwas hinzufügt
Laden = faul zu Ihrem Einbettungscode.

Inserciones de Instagram de carga diferida (ahorra> 100 KB en gzip en la carga inicial):

Instagram-Einbettungen bieten einen Markup-Block und ein Skript, die einen Iframe in Ihre Seite einfügen. Durch das verzögerte Laden dieses Iframes muss nicht das gesamte für die Einfügung erforderliche Skript geladen werden. Da solche Einbettungen in den meisten Artikeln häufig unterhalb des Ansichtsfensters angezeigt werden, scheint dies ein vernünftiger Kandidat für das native verzögerte Laden Ihres Iframes zu sein.

Incrustaciones de Spotify de carga diferida (ahorra 514 KB en la carga inicial):

<iframe src="https://open.spotify.com/embed/album/1DFixLWuPkv3KT3TnV35m3" 
Wird geladen="faul"
Breite="300" 
Höhe="380" 
frameborder="0" 
allowtransparency="wahr" 
ermöglichen="encrypted-media"></iframe>

Obwohl die obigen Einbettungen die potenziellen Vorteile des verzögerten Ladens von Iframes für Medieninhalte veranschaulichen, besteht die Möglichkeit, diese Vorteile auch in Anzeigen zu sehen.

Estudio de caso: carga diferida nativa de los complementos sociales de Facebook

Von Facebook soziale Plugins Ermöglichen Sie Entwicklern, Facebook-Inhalte auf ihren Webseiten einzubetten. Einige dieser Plugins werden angeboten, wie eingebettete Beiträge, Fotos, Videos, Kommentare ... Das beliebteste ist das Als Ergänzung - Eine Schaltfläche, die anzeigt, wer die Seite "gemocht" hat. Standardmäßig werden durch das Einbetten des Like-Plugins in eine Webseite (unter Verwendung des FB JSSDK) ~ 215 KB Ressourcen abgerufen, von denen 197 KB JavaScript sind. In vielen Fällen wird das Plugin möglicherweise am Ende eines Artikels oder am Ende einer Seite angezeigt, sodass das Laden außerhalb des Bildschirms möglicherweise nicht optimal ist.

Dank an Ingenieur Stoyan Stefanov, Alle Facebook Social Plugins unterstützen jetzt das native Laden von iframe Lazy. Entwickler, die sich für das verzögerte Laden über Plugins entscheiden Daten faul
La configuración ahora podrá evitar que se cargue hasta que el usuario se desplace cerca. Esto permite que la inserción siga funcionando completamente para los usuarios que la necesitan, al tiempo que ofrece ahorros de datos para aquellos que no se desplazan hacia abajo en una página. Tenemos la esperanza de que esta Sein la primera de muchas incorporaciones para explorar la carga diferida de iframe nativa en producción.

Warten Sie, können Browser nicht einfach träge Off-Screen-Iframes automatisch laden?

Sie können es auf jeden Fall. In Chrome 77 hat Chrome die Unterstützung für Bilder außerhalb des Bildschirms und das verzögerte Laden von Iframes nativ hinzugefügt, wenn sich ein Benutzer dafür entschieden hat
Der Lichtmodus
(Datenspeichermodus) in Chrome für Android.

Der Basismodus wird häufig in Regionen der Welt verwendet, in denen die Qualität der Netzwerkverbindung und der Datenpläne nicht die beste ist. Jedes Byte ist wichtig, und daher können faul ladende Iframes für diese Benutzer einen signifikanten Unterschied bewirken.

Origins puede detectar qué porcentaje de su der Verkehr proviene de los usuarios del modo básico marcando el navigator.connection.saveData Eigentum, das Teil der ist Netzwerkinformationen API.

Kann ich Iframes über mehrere Browser hinweg verzögert laden? Ja

La carga diferida de iframe nativa se puede aplicar como una fortschreitende Verbesserung. Navegadores que admiten Laden = faul In Iframes wird der Iframe faul geladen, während der Wird geladen Das Attribut wird in Browsern, die es noch nicht unterstützen, ignoriert.

Es ist auch möglich, Off-Screen-Iframes mit der JavaScript-Bibliothek Lazysizes zu laden. Dies kann wünschenswert sein, wenn:

• erfordern mehr benutzerdefinierte Schwellenwerte für das verzögerte Laden, als das native verzögerte Laden derzeit bietet
• Wir möchten den Benutzern eine konsistente Erfahrung beim langsamen Laden von iframe über alle Browser hinweg bieten.

<Skript src="lazysizes.min.js" asynchron></Skript>

<iframe frameborder="0"
	  Klasse="lazyload"
    allowfullscreen=""
    Breite="600"
    Höhe="400"
data-src="//www.youtube.com/embed/ZfV-aYdU4uE">
</iframe>

Verwenden Sie das folgende Muster, um die Funktion zum verzögerten Laden zu erkennen und verzögerte Größen zu erhalten, wenn diese nicht verfügbar sind:

<iframe frameborder="0"
	  Klasse="lazyload"
    Wird geladen="faul"
    allowfullscreen=""
    Breite="600"
    Höhe="400"
data-src="//www.youtube.com/embed/ZfV-aYdU4uE">
</iframe>

<Skript>
  wenn ('loading' im HTMLIFrameElement.prototype) {
    const iframes = Dokument.querySelectorAll('iframe[loading="lazy"]');

    iframes.forEach(iframe => {
      iframe.src = iframe.dataset.src;
    });

  } else {
    
    const Skript = Dokument.createElement('script');
    Skript.src =
      'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.2.2/lazysizes.min.js';
    Dokument.Körper.appendChild(Skript);
  }

</Skript>

Una opción para los usuarios de WordPress

Möglicherweise sind viele Iframes über Jahre verteilt, in denen Inhalte auf einer WordPress-Site veröffentlicht wurden. Optional können Sie Ihrem WordPress-Theme den folgenden Code hinzufügen functions.php Datei zum automatischen Einfügen Laden = "faul" zu Ihren vorhandenen Iframes, ohne sie einzeln manuell aktualisieren zu müssen.

Beachten Sie, dass Derzeit wird auch an der nativen Unterstützung für das verzögerte Laden von Iframes im WordPress-Kern gearbeitet. Das folgende Snippet sucht nach den relevanten Flags, sodass WordPress, sobald die Funktionalität integriert ist, die nicht mehr manuell hinzufügt Laden = "faul" Attribut, um sicherzustellen, dass es mit diesen Änderungen interoperabel ist und nicht zu einem doppelten Attribut führt.

Funktion wp_lazy_load_iframes_polyfill( $content ) {
wenn ( function_exists( 'wp_lazy_loading_enabled' ) && wp_lazy_loading_enabled( 'iframe', 'the_content' ) ) {
Rückkehr $content;
}
Rückkehr str_replace( '<iframe ', '<iframe loading="lazy" ', $content );
}
add_filter( 'the_content', 'wp_lazy_load_iframes_polyfill' );

Si su sitio de WordPress utiliza almacenamiento en Zwischenspeicher (pista: debería), no olvide reconstruir el caché de su sitio después.

Fazit

Durch das Backen der nativen Unterstützung für das verzögerte Laden von Iframes können Sie die Leistung Ihrer Webseiten erheblich verbessern. Wenn Sie Kommentare zum verzögerten Laden von nativem Iframe haben, können Sie gerne ein Problem an senden Chrome Bug Tracker.

Und falls Sie es verpasst haben, sehen Sie sich die Sammlung von Bildern und Videos zum verzögerten Laden von web.dev an, um weitere Ideen zum faulen Laden zu erhalten.

Wir danken Dom Farolino, Scott Little, Houssein Djirdeh, Simon Pieters, Kayce Basques, Joe Medley und Stoyan Stefanov für ihre Bewertungen.