WordPress a publié un article dans sa section développeur proposant d'affiner le comportement de chargement paresseux par défaut de WordPress. Les tests ont révélé que le changement proposé améliorait une Éléments essentiels du Web mesure de performance d'une moyenne médiane de 7 % à 33 %.
Proposition pour améliorer Core Web Vitals dans WordPress
La proposition indique que le contrôle fin de l'attribut de chargement paresseux appartient aux développeurs de thèmes.
Cela dit, il a été constaté qu'en affinant la façon dont le chargement paresseux est ajouté par défaut, on obtient des améliorations significatives dans le Éléments essentiels du Web métrique appelée La plus grande douleur contente t.
Voici comment la proposition décrit l'amélioration :
" Au lieu de charger par défaut toutes les images et tous les iframes, la toute première image de contenu (en tenant également compte des images présentées) ou le contenu iframe ne doit pas être chargé paresseux.
Il s'agit d'une valeur par défaut plus sensible que celle utilisée par la mise en œuvre actuelle, qui, en moyenne et à grande échelle, se traduira par de meilleures performances LCP prêtes à l'emploi, tout en maintenant la bande passante nécessaire faible.
Continuer la lecture ci-dessous
Chargement paresseux et plus grande peinture de contenu
Le chargement différé est un moyen d'accélérer le téléchargement perçu d'une page en retardant le téléchargement d'éléments de page Web tels que des images et des iframes qui ne sont pas nécessaires pour le moment.
En utilisant le chargement différé, des éléments tels que des images qui ne sont pas visibles sur l'écran du navigateur du visiteur du site peuvent être retardés à l'aide d'un attribut HTML appelé attribut de chargement.
Une image est un élément HTML de page Web.
Un attribut HTML est un code qui modifie un élément HTML, comme une image.
L'attribut loading modifie l'image, dans ce cas, en indiquant au navigateur de retarder son téléchargement.
L'attribut de chargement indique au navigateur de retarder le téléchargement d'une image, ce qui permet au navigateur de télécharger des éléments de page plus importants qui sont immédiatement visibles par le visiteur du site Web.
Cela rend la page interactive plus rapidement pour le visiteur du site.
La plus grande peinture de contenu (LCP) mesure la vitesse à laquelle l'image et d'autres éléments se téléchargent dans la fenêtre d'affichage des visiteurs du site (l'écran du navigateur que le visiteur voit).
Continuer la lecture ci-dessous
Une image est généralement codée en HTML comme ceci :
<img src="https://www.searchenginejournal.com/wordpress-core-web-vitals-boost/413627/example.jpg" alt="example text">
L'ajout de lazy load consiste simplement à ajouter l'attribut HTML lazy load :
<img src="https://www.searchenginejournal.com/wordpress-core-web-vitals-boost/413627/example.jpg" alt="example text" loading="lazy">
Comment WordPress 5.9 peut améliorer la plus grande peinture de contenu
Le développeur qui a publié la proposition d'amélioration de LCP a noté qu'à partir de WordPress 5.5, le code de base ajoutait l'attribut de chargement paresseux par défaut à toutes les images et iframes.
Mais ce n'est pas idéal car les images en haut de la page, comme les logos et les images en vedette, doivent être téléchargées pour que la page Web devienne utilisable.
WordPress a implémenté le chargement paresseux comme celui-ci car il n'avait aucun moyen d'exclure avec précision les images les plus importantes de la réception de l'attribut de chargement paresseux.
La raison en est que tous les thèmes sont codés différemment et que ce type d'exclusion granulaire est mieux fait par les développeurs de thèmes pour cette raison.
Bien que l'implémentation actuelle du chargement paresseux par défaut sur WordPress n'était pas idéale, l'ajout du chargement paresseux de cette manière est une nette amélioration par rapport à l'absence d'ajout de l'attribut de chargement du tout.
Ce qui est proposé représente une nette amélioration comme le démontrent les résultats des tests énumérés ci-dessous.
En rapport: Advanced Core Web Vitals : un guide technique de référencement
Comment WordPress améliorera la plus grande peinture de contenu
Ce que l'équipe de développeurs WordPress propose, c'est d'exclure l'ajout de l'attribut de chargement paresseux à la première image ou iframe du code.
Le développeur a testé cette méthode sur les 50 thèmes WordPress les plus populaires et a découvert que son ajout au premier élément d'image ou d'iframe permettait une amélioration moyenne du score LCP Core Web Vitals de 7 % en moyenne.
Le développeur a ensuite testé dans quelle mesure LCP s'est amélioré en ajoutant un chargement paresseux à deux éléments. Les gains de performances ont chuté en moyenne de 2 %, ce qui montre clairement que l'exclusion du chargement différé de plusieurs éléments n'améliore pas davantage le LCP.
Voici quelques-unes des conclusions :
" Le fait d'omettre la première image de contenu d'être chargée paresseux a entraîné une amélioration médiane du LCP de 7 % (1 877 ms contre 2 020 ms avec le comportement de base actuel) et une augmentation médiane des octets d'image de 0 % (368 Ko par rapport à 369 Ko avec le comportement de base actuel ). → L'omission de la première image de contenu entraîne clairement une amélioration du LCP tout en ne régressant pas sensiblement sur les octets d'image enregistrés.
L'omission des deux premières images de contenu du chargement paresseux a entraîné une amélioration médiane du LCP de 5 % (1 927 ms contre 2 020 ms avec le comportement de base actuel) et une augmentation médiane des octets d'image de 2 % (378 Ko par rapport à 369 Ko avec le comportement de base actuel ). → Omettre les deux premières images de contenu produit de moins bons résultats pour les deux métriques que d'omettre uniquement la première, c'est-à-dire qu'il est préférable de ne sauter que le lazy-loading pour la première image de contenu, et donc pas de tests supplémentaires avec un plus grand nombre d'images non paresseuses. chargement sont nécessaires.
Continuer la lecture ci-dessous
Nouveaux résultats du test de chargement paresseux WordPress
- 5 % des thèmes du groupe de test ont obtenu des scores LCP allant de 10 % pires à 21 % pires.
- 42% des thèmes ont amélioré les scores LCP de 10% à 33% de mieux.
- Les tests ont révélé que les avantages étaient meilleurs pour la majorité des thèmes testés.
Selon la proposition WordPress :
" Alors que l'amélioration médiane du LCP sur tous les thèmes n'est que de 7 %, il existe des gains notables plus importants pour un nombre important de thèmes, tandis que les pertes notables sont minimes. "
En rapport: 18 plugins WordPress qui accéléreront votre site
Googler crée un plug-in de preuve de concept
Un committer WordPress Core a créé un patch de preuve de concept (POC) sous forme de plugin, vraisemblablement à des fins de débogage et l'a publié sur GitHub.
Ce n'est pas une version officielle du plugin WordPress, donc c'est ne pas conseillé de se précipiter et de l'installer.
Les versions officielles des plugins sont publiées dans le référentiel de plugins WordPress.
Quand le chargement paresseux raffiné arrivera-t-il ?
La chronologie de l'amélioration du comportement de chargement paresseux est actuellement définie pour WordPress 5.9.
WordPress 5.9 devrait actuellement sortir en décembre 2021.
Continuer la lecture ci-dessous
La proposition pour la fonctionnalité améliorée de chargement paresseux est actuellement en cours de discussion et a jusqu'à présent rencontré une réponse positive dans les commentaires.
Donc, à moins qu'un problème actuellement imprévu ne survienne, il est très possible que des scores améliorés de la plus grande peinture à contenu soient disponibles sur les sites WordPress plus tard cette année.
Citations
O Annonce officielle de la proposition WordPress
Affiner la mise en œuvre du chargement paresseux de WordPress Core
Page WordPress GitHub pour l'amélioration du chargement paresseux
Omettre l'attribut de chargement paresseux sur la première image/iframe de contenu