Contenidos
Le chargement différé au niveau du navigateur natif pour les iframes est ici
Le chargement paresseux natif pour les images débarquées dans Chrome 76 via Chargement en cours
attribut et puis il est venu à Firefox. Nous sommes heureux de partager cela
chargement différé natif pour les iframes est maintenant
normalisé et il est également compatible avec les navigateurs Chrome et Chromium.
< iframe src = " https://example.com "
loading = " paresseux "
width = " 600 "
hauteur = " 400 " > iframe >
Le chargement différé iframe natif diffère le chargement des iframes hors écran jusqu'à ce que l'utilisateur les fasse défiler. Cela enregistre les données, accélère le chargement des autres parties de la page et réduit l'utilisation de la mémoire.
Est manifestation de
montre les incorporations vidéo à chargement différé:
Pourquoi devrions-nous charger paresseusement des iframes?
Les intégrations tierces couvrent un large éventail de cas d'utilisation, des lecteurs vidéo aux publications et publicités sur les réseaux sociaux. Souvent, ce contenu n'est pas immédiatement visible dans la fenêtre utilisateur. Au contraire, il n'est visible qu'une fois qu'ils font défiler la page. Malgré cela, les utilisateurs paient le coût du téléchargement de données et de JavaScript coûteux pour chaque image, même s'ils ne font pas défiler jusqu'à celle-ci.
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.
voiture
Il s'agit actuellement d'une valeur non standard, mais c'est la valeur par défaut dans Chrome aujourd'hui. Chrome a l'intention d'apporter une proposition de cette valeur au tableau des normes.
En utilisant le Chargement en cours
l'attribut dans les iframes fonctionne comme suit:
< iframe src = " https://example.com "
loading = " paresseux "
width = " 600 "
hauteur = " 400 " > iframe >
< iframe src = " https://example.com "
width = " 600 "
hauteur = " 400 " > iframe >
< iframe src = " https://example.com "
loading = " impatient "
width = " 600 "
hauteur = " 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 = 'paresseux' ;
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
ouvisibilité: masqué
Il est appliqué.- L'iframe est positionné hors écran en utilisant un positionnement X ou Y négatif.
- Ce critère s'applique à la fois
chargement = paresseux
ychargement = 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é?
Et si nous pouvions changer le Web en général pour que les iframes de l'écran de chargement différé soient la valeur par défaut? Cela ressemblerait un peu à ceci:
Intégration de vidéos YouTube à chargement différé (économise ~ 500 Ko lors du chargement initial de la page):
<iframe src="https://www.youtube.com/embed/YJGCZCaIZkQ"
loading="lazy"
width="560"
height="315"
frameborder="0"
allow="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.
Si vous recherchez des moyens plus efficaces de télécharger des intégrations YouTube, vous serez peut-être intéressé par le Composant YouTube Lite.
Chargement paresseux des insertions Instagram (enregistre> 100 Ko dans gzip lors du chargement initial):
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.
Lazy Loading Spotify Embeds (économise 514 Ko lors du chargement initial):
<iframe src="https://open.spotify.com/embed/album/1DFixLWuPkv3KT3TnV35m3"
loading="lazy"
width="300"
height="380"
frameborder="0"
allowtransparency="true"
allow="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.
Étude de cas: Chargement paresseux natif des plugins sociaux 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
Les paramètres pourront désormais empêcher le chargement jusqu'à ce que l'utilisateur fasse défiler à proximité. Cela permet à l'intégration de continuer à fonctionner pleinement pour les utilisateurs qui en ont besoin, tout en offrant des économies de données à ceux qui ne font pas défiler une page vers le bas. Espérons que ce soit le premier de nombreux ajouts à l'exploration du chargement différé iframe natif en production.
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 peut détecter le pourcentage de votre trafic provenant des utilisateurs du mode de base en vérifiant le 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
Le chargement différé iframe natif peut être appliqué en tant qu'amélioration progressive. Navigateurs pris en charge 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.
<script src="lazysizes.min.js" async></script>
<iframe frameborder="0"
class="lazyload"
allowfullscreen=""
width="600"
height="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"
class="lazyload"
loading="lazy"
allowfullscreen=""
width="600"
height="400"
data-src="//www.youtube.com/embed/ZfV-aYdU4uE">
</iframe>
<script>
if ('loading' in HTMLIFrameElement.prototype) {
const iframes = document.querySelectorAll('iframe[loading="lazy"]');
iframes.forEach(iframe => {
iframe.src = iframe.dataset.src;
});
} else {
const script = document.createElement('script');
script.src =
'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.2.2/lazysizes.min.js';
document.body.appendChild(script);
}
</script>
Une option pour les utilisateurs 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.
function wp_lazy_load_iframes_polyfill ( $content ) {
if ( function_exists ( 'wp_lazy_loading_enabled' ) && wp_lazy_loading_enabled ( 'iframe' , 'the_content' ) ) {
return $content ;
} return str_replace ( '
Si votre site WordPress utilise la mise en cache (indice: il devrait), n'oubliez pas de reconstruire le cache de votre site par la suite.
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.