Il est temps de charger paresseusement des iframes hors écran!

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

24 juillet 2020

Le chargement paresseux natif pour les images débarquées dans Chrome 76 via Chargement en cours attribut y luego llegó a Firefox. Estamos felices de compartir eso
chargement différé natif pour les iframes est maintenant
normalisé y también es compatible con los navigateurs Chrome y Chromium.

<iframe src="https://example.com"
        Chargement en cours="fainéant"
        largeur="600"
la taille="400"></iframe>

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

Est manifestation de <iframe loading=lazy>
montre les incorporations vidéo à chargement différé:

Pourquoi devrions-nous charger paresseusement des iframes?

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 Contenu 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.

Basé sur les recherches de Chrome sur iframes hors écran chargement paresseux automatiquement pour les utilisateurs de l'économiseur de données, les iframes à chargement paresseux pourraient entraîner des économies de données moyennes de 2-3%, des réductions de première peinture avec un contenu de 1-2% dans la médiane et des améliorations de 2% du délai de première entrée (FID) au 95e centile.

Comment fonctionne le chargement différé natif pour les iframes?

Les Chargement en cours L'attribut permet à un navigateur de différer le chargement des iframes et des images hors de l'écran jusqu'à ce que les utilisateurs les rapprochent. Chargement en cours prend en charge trois valeurs:

• fainéant: est un bon candidat pour le chargement paresseux.
• désireux: pas un bon candidat pour le chargement paresseux. Chargez immédiatement.
• voiture: le navigateur déterminera s'il se charge paresseux.

En utilisant le Chargement en cours l'attribut dans les iframes fonctionne comme suit:

<iframe src="https://example.com" 
Chargement en cours="fainéant" 
largeur="600" 
la taille="400"></iframe>

<iframe src="https://example.com" 
largeur="600" 
la taille="400"></iframe>

<iframe src="https://example.com" 
Chargement en cours="désireux" 
largeur="600" 
la taille="400"></iframe>

Ne pas spécifier du tout l'attribut aura le même impact que de charger explicitement la ressource avec enthousiasme, sauf pour Le mode lumière
utilisateurs, où Chrome utilisera le voiture value pour décider s'il doit être chargé paresseusement.

Si tu en as besoin dynamiquement créer des iframes via JavaScript, paramétrage
iframe.loading = 'paresseux' dans l'élément est également
prise en charge:

var iframe = document.createElement('iframe');
iframe.src = 'https://example.com';
iframe.Chargement en cours = 'lazy';
document.corps.appendChild(iframe);

Comportement de chargement différé spécifique à Iframe

L'attribut load affecte les iframes différemment des images, selon que l'iframe est masqué ou non. (Les iframes cachés sont souvent utilisés à des fins d'analyse ou de communication.) Chrome utilise les critères suivants pour déterminer si une iframe est masquée:

• La largeur et la hauteur de l'iframe sont 4px ou moins.
• affichage: aucun ou visibilité: masqué Il est appliqué.
• El iframe se coloca fuera de la pantalla mediante un positionnement X o Y negativo.
• Ce critère s'applique à la fois chargement = paresseux y chargement = auto.

Si une iframe remplit l'une de ces conditions, Chrome la considère comme cachée et ne la charge pas paresseusement dans la plupart des cas. Les iframes qui ne sont pas masqués ne se chargeront que lorsqu'ils se trouvent dans le seuil de distance de chargement. Chrome affiche un espace réservé pour les iframes à chargement différé qui sont toujours en cours de récupération.

Quel impact pourrions-nous voir dans les intégrations iframe populaires à chargement différé?

¿Qué pasaría si pudiéramos cambiar la la toile 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"
        Chargement en cours="fainéant" 
        largeur="560" 
        la taille="315" 
        frameborder="0" 
permettre="accelerometer; autoplay; 
        encrypted-media; gyroscope; 
picture-in-picture" 
allowfullscreen></iframe>

Anecdote: Lorsque nous sommes passés au chargement paresseux des intégrations YouTube pour Chrome.com, nous avons économisé 10 secondes sur la rapidité avec laquelle nos pages pouvaient être interactives sur les appareils mobiles. J'ai ouvert une erreur interne avec YouTube pour discuter de la façon d'ajouter
chargement = paresseux à votre code d'intégration.

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

Les intégrations Instagram fournissent un bloc de balisage et un script, qui injectent un iframe dans votre page. Le chargement différé de cette iframe évite d'avoir à charger tout le script requis pour l'insertion. Étant donné que ces incorporations sont souvent affichées sous la fenêtre d'affichage dans la plupart des articles, cela semble être un candidat raisonnable pour le chargement paresseux natif de votre iframe.

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

<iframe src="https://open.spotify.com/embed/album/1DFixLWuPkv3KT3TnV35m3" 
Chargement en cours="fainéant"
largeur="300" 
la taille="380" 
frameborder="0" 
allowtransparency="vrai" 
permettre="encrypted-media"></iframe>

Bien que les intégrations ci-dessus illustrent les avantages potentiels des iframes à chargement différé pour le contenu multimédia, il est également possible de voir ces avantages dans les publicités.

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

De Facebook plugins sociaux Permettez aux développeurs d'intégrer du contenu Facebook sur leurs pages Web. Plusieurs de ces plugins sont proposés, tels que des posts intégrés, des photos, des vidéos, des commentaires ... Le plus populaire est le En complément - un bouton qui montre le décompte de ceux qui ont «aimé» la page. Par défaut, l'intégration du plugin Like sur une page Web (à l'aide du FB JSSDK) extrait ~ 215 Ko de ressources, dont 197 Ko en JavaScript. Dans de nombreux cas, le plugin peut apparaître à la fin d'un article ou vers le bas d'une page, donc le charger avec enthousiasme en dehors de l'écran peut ne pas être optimal.

Merci à l'ingénieur Stoyan Stefanov, tous les plugins sociaux de Facebook prennent désormais en charge le chargement paresseux iframe natif. Les développeurs optant pour le chargement paresseux via des plugins paresseux de données
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 être la primera de muchas incorporaciones para explorar la carga diferida de iframe nativa en producción.

Attendez, les navigateurs ne peuvent-ils pas simplement charger automatiquement les iframes hors écran paresseusement?

Ils peuvent certainement. Dans Chrome 77, Chrome a ajouté la prise en charge des images hors écran et des iframes à chargement différé en mode natif lorsqu'un utilisateur a opté pour
Le mode lumière
(Mode d'économie de données) dans Chrome pour Android.

Le mode de base est couramment utilisé dans les régions du monde où la qualité de la connexion réseau et des plans de données n'est pas la meilleure. Chaque octet est important, et par conséquent, les iframes à chargement différé ont le potentiel de faire une différence significative pour ces utilisateurs.

Origins puede detectar qué porcentaje de su circulation proviene de los usuarios del modo básico marcando el navigator.connection.saveData propriété, qui fait partie de la Informations sur le réseau API.

Puis-je charger des iframes paresseux sur plusieurs navigateurs? Oui

La carga diferida de iframe nativa se puede aplicar como una mejora progresiva. Navegadores que admiten chargement = paresseux dans les iframes, il chargera paresseusement l'iframe, tandis que le Chargement en cours L'attribut sera ignoré en toute sécurité dans les navigateurs qui ne le prennent pas encore en charge.

Il est également possible de charger paresseusement des iframes hors écran à l'aide de la bibliothèque JavaScript. Cela peut être souhaitable si:

• nécessitent plus de seuils de chargement différé personnalisés que le chargement différé natif n'offre actuellement
• Nous souhaitons offrir aux utilisateurs une expérience de chargement différé iframe cohérente sur tous les navigateurs.

<scénario src="lazysizes.min.js" asynchrone></scénario>

<iframe frameborder="0"
	  classer="lazyload"
    allowfullscreen=""
    largeur="600"
    la taille="400"
data-src="//www.youtube.com/embed/ZfV-aYdU4uE">
</iframe>

Utilisez le modèle suivant pour détecter la fonction de chargement différé et obtenir des tailles différées lorsqu'elle n'est pas disponible:

<iframe frameborder="0"
	  classer="lazyload"
    Chargement en cours="fainéant"
    allowfullscreen=""
    largeur="600"
    la taille="400"
data-src="//www.youtube.com/embed/ZfV-aYdU4uE">
</iframe>

<scénario>
  si ('loading' dans HTMLIFrameElement.prototype) {
    const iframes = document.querySelectorAll('iframe[loading="lazy"]');

    iframes.forEach(iframe => {
      iframe.src = iframe.base de données.src;
    });

  } else {
    
    const scénario = document.createElement('script');
    scénario.src =
      'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.2.2/lazysizes.min.js';
    document.corps.appendChild(scénario);
  }

</scénario>

Una opción para los usuarios de WordPress

Vous pourriez avoir beaucoup d'iframes dispersés au fil des années de publication de contenu sur un site WordPress. En option, vous pouvez ajouter le code suivant à votre thème WordPress functions.php fichier à insérer automatiquement loading = "paresseux" à vos iframes existants sans avoir à les mettre à jour manuellement individuellement.

Notez que Des travaux sont également en cours sur la prise en charge native des iframes à chargement différé dans le cœur de WordPress. L'extrait de code suivant recherchera les indicateurs pertinents de sorte qu'une fois que WordPress aura la fonctionnalité intégrée, il n'ajoutera plus manuellement le loading = "paresseux" attribut, en s'assurant qu'il est interopérable avec ces modifications et n'entraînera pas un attribut en double.

une fonction wp_lazy_load_iframes_polyfill( $content ) {
si ( function_exists( 'wp_lazy_loading_enabled' ) && wp_lazy_loading_enabled( 'iframe', 'the_content' ) ) {
revenir $content;
}
revenir str_replace( '<iframe ', '<iframe loading="lazy" ', $content );
}
add_filter( 'the_content', 'wp_lazy_load_iframes_polyfill' );

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

conclusion

La prise en charge native des iframes à chargement différé vous permet d'améliorer beaucoup plus facilement les performances de vos pages Web. Si vous avez des commentaires sur le chargement différé iframe natif, n'hésitez pas à soumettre un problème à Chrome Bug Tracker.

Et au cas où vous l'auriez manqué, consultez la collection d'images et de vidéos de chargement paresseux de web.dev pour plus d'idées de chargement paresseux.

Nos remerciements à Dom Farolino, Scott Little, Houssein Djirdeh, Simon Pieters, Kayce Basques, Joe Medley et Stoyan Stefanov pour leurs commentaires.