Felix Arntz, un committer de base WordPress et ingénieur des programmes de développement chez Google, a annoncé un support à venir pour iframes de 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 a pris en charge chargement paresseux pour les 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, c’était ajouté à la spécification HTML, et la discussion a recommencé pour ajout de support dans WordPress.

Contrairement aux images, de nombreux utilisateurs ne savent probablement pas qu’ils utilisent des iframes. Le cas d’utilisation principal 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.

Affichage du code source d'une vidéo YouTube intégrée dans l'éditeur de blocs.
Le code source de l’intégration YouTube montre l’iframe.

Ces iframes ajoutent du poids à la taille de la page et réduisent 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’un visiteur du site. Cela accélère le temps de chargement initial des pages.

WordPress ajoutera uniquement le loading="lazy" attribut 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 quand il annonce 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, seulement après le chargement d’une image, le navigateur peut mettre en page la page correctement, ce qui entraîne le contenu par exemple sous l’image à déplacer. Ce problème peut être facilement résolu en fournissant width et height attributs sur img les balises, 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, le loading="lazy" L’attribut ne sera ajouté que si l’oEmbed iframe tag est livré avec les deux attributs de dimension présents », a écrit Arntz.

Actuellement, le filtre s’applique aux widgets de contenu, d’extrait et de texte de l’article. 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, soulevé une préoccupation pour les utilisateurs qui affichent des annonces 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é. “Ils ne peuvent pas avoir d’iframes chargés différés, 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’existe pas de moyen idéal d’exclure tous les services de publicité 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. Arntz a couvert de tels cas d’utilisation dans le post. Les développeurs peuvent désactiver le chargement différé pour les iframes en gros ou cibler des iframes spécifiques avec PHP de base. 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 paresseux nommé Désactiver la charge différée. Cela pourrait servir de solution provisoire jusqu’à ce que quelque chose de plus spécifique aux besoins des utilisateurs arrive.


Source link