Prise en charge native du chargement paresseux pour les iframes à venir sur WordPress 5.7

Felix Arntz, un committer de base WordPress et ingénieur des programmes de développement chez Google, a annoncé la prise en charge à venir des iframes à chargement paresseux. La fonctionnalité est incluse dans la dernière version bêta de WordPress 5.7 et sera officiellement disponible le mois prochain dans l’ensemble de la communauté.

WordPress prend en charge le chargement paresseux des images depuis la version 5.5. Cependant, la prise en charge des iframes n’était pas incluse dans l’ensemble de fonctionnalités initial. Le support du navigateur pour les iframes était répandu à l’époque. Cependant, il n’avait pas encore été officialisé dans le cadre du HTML Living Standard. Peu de temps après, il a été ajouté à la spécification HTML et la discussion a recommencé pour l’ajout du support dans WordPress.

Contrairement aux images, de nombreux utilisateurs ne savent probablement pas qu’ils utilisent des iframes. Le principal cas d’utilisation des iframes concerne les blocs incorporés ou le système d’intégration automatique pour les utilisateurs qui utilisent l’éditeur classique. Par exemple, chaque fois qu’un utilisateur ajoute une vidéo YouTube à son article de blog, le code sous-jacent génère une iframe.

Le code source de l’intégration YouTube montre l’iframe.Ces iframes ajoutent du poids à la taille de la page et ralentissent le temps de chargement.

Le contraire du chargement paresseux est le chargement impatient. Il s’agit de la valeur par défaut sur le Web, qui charge toutes les ressources en masse. Cela conduit également souvent à des pages Web à chargement lent lorsqu’elles contiennent de nombreuses images ou iframes. Le chargement différé ne charge l’image et les sources iFrame que lorsqu’elles apparaissent dans la fenêtre d’affichage d’un visiteur du site. Cela accélère le temps de chargement initial des pages.

WordPress ajoutera uniquement l’attribut loading = « lazy » si une largeur et une hauteur explicites sont définies pour l’iframe. Cela permet d’éviter l’effet de changement de page qui se produit lorsque l’iframe apparaît. Arntz a beaucoup écrit sur cet effet lorsqu’il a annoncé la prise en charge du chargement paresseux des images. Le même problème s’applique aux iframes.

« Un problème d’expérience utilisateur courant dans les sites Web modernes est le soi-disant changement de mise en page, souvent causé par un chargement lent des ressources multimédias telles que les images », a-t-il écrit. « Par défaut, ce n’est qu’après le chargement d’une image que le navigateur peut mettre en page correctement la page, ce qui entraîne le contenu, par exemple sous l’image à décaler. Ce problème peut être facilement résolu en fournissant des attributs de largeur et de hauteur sur les balises img, car le navigateur les utilisera pour déterminer le rapport hauteur / largeur de l’image afin de pouvoir déduire la mise en page avant de charger réellement l’image.  »

Il y a des cas où WordPress n’ajoutera pas l’attribut de chargement, même pour les fournisseurs oEmbed qu’il prend en charge. Le contenu iframe n’est pas fourni par WordPress. Les fournisseurs tiers créent le code HTML et le renvoient au site WordPress individuel. Il appartient à ces tiers de suivre les meilleures pratiques pour ajouter des attributs de largeur et de hauteur.

« Puisque WordPress ne peut pas deviner les dimensions de la ressource intégrée, l’attribut loading = » lazy « ne sera ajouté que si la balise iframe oEmbed est livrée avec les deux attributs de dimension présents », a écrit Arntz.

Actuellement, le filtre s’applique au contenu de l’article, à l’extrait et aux widgets de texte. Peut-être que WordPress étendra cela pour commenter le texte un jour.

Problèmes potentiels avec les publicités

MaAnna Stephenson, la propriétaire de BlogAid, a soulevé une préoccupation pour les utilisateurs qui affichent des publicités sur leur site. Il peut y avoir des scénarios où le chargement paresseux est interdit en termes publicitaires ou présente un conflit technique.

« Cela a-t-il été testé auprès de personnes qui diffusent des annonces sur leur site en utilisant une agence de publicité comme Mediavine et AdThrive ? » elle a demandé. « Les iframes ne peuvent pas être chargés paresseusement, car les publicités utilisent des iframes et ils ont leur propre mécanisme de chargement différé pour la livraison. »

Le problème est qu’il n’y a pas de moyen idéal d’exclure tous les services publicitaires et de les distinguer des autres types d’iframes. D’un point de vue technique, il doit s’agir d’une fonctionnalité tout ou rien.

La gestion des publicités relève carrément du domaine des plugins Il ne faudrait que quelques lignes de code pour créer un plugin pour des services publicitaires spécifiques.

Jeff Starr a également un plugin pour désactiver complètement le chargement différé nommé Disable Lazy Load. Cela pourrait servir de solution provisoire jusqu’à ce que quelque chose de plus spécifique aux besoins des utilisateurs arrive.

Comme ça:

J’aime chargement …