PageSpeed ​​Insights utilise désormais Lighthouse 8.4.0 qui propose deux nouveaux audits. L’ajout le plus important aide les éditeurs à diagnostiquer un problème répandu qui a un impact négatif sur la métrique Largest Contentful Paint. Ce nouvel audit aidera les éditeurs à obtenir de meilleurs scores LCP (Largest Contentful Paint).

La plus grande peinture de contenu

Il y a eu un problème de longue date avec Largest Contentful Paint (LCP) que la dernière version de Lighthouse, 8.4.0 aidera à diagnostiquer.

Il a été découvert que le chargement paresseux d’images était une bonne approche pour rendre plus rapidement la partie principale du contenu visible et interactive sur un appareil mobile.

Avant le chargement paresseux, les images qui se trouvaient sous le pli (non visibles dans la fenêtre d’affichage de l’écran du navigateur) se téléchargeaient en arrière-plan.

Cela a eu pour effet de ralentir la visibilité et l’interactivité du contenu qui se trouvait dans la fenêtre d’affichage du visiteur du site.

Lorsque des images situées en dehors de la fenêtre d’affichage mobile se chargent en arrière-plan, elles ralentissent en fait le rendu de la partie visible de la page Web.

En ajoutant l’attribut Lazy Load HTML aux images, le navigateur saura ne pas télécharger les images (qui sont en dehors de la fenêtre d’affichage) jusqu’à plus tard.

Cela a pour effet d’augmenter la vitesse de la page.

Mais le chargement paresseux des éléments qui se trouvent dans la fenêtre d’affichage Largest Contentful Paint a un effet négatif et c’est l’une des choses que Lighthouse 8.4.0 résout.

Impact négatif du chargement paresseux de toutes les images

WordPress 5.4 a introduit le chargement paresseux natif des images. Avant de mettre en œuvre le changement, les développeurs ont testé les améliorations de vitesse et ont découvert que l’ajout de l’attribut HTML de chargement différé à toutes les images entraînait un gain de vitesse.

Cependant, il s’agissait d’une implémentation imparfaite de l’attribut de chargement paresseux, car WordPress ajoutait désormais l’attribut de chargement paresseux à l’image en vedette, qui est un élément qui se trouve généralement dans la fenêtre d’affichage d’un visiteur du site lorsqu’il visite une page Web.

Cela a ajouté un impact négatif sur la métrique LCP (Largest Contentful Paint) et a introduit une expérience utilisateur légèrement négative.

Les gains résultant de l’ajout d’une charge paresseuse ont dépassé les pertes du coup à la métrique LCP, donc WordPress a procédé avec cela.

Google a cependant remarqué qu’après la mise en œuvre du chargement paresseux dans le noyau de WordPress, les scores Lowest Contentful Paint (LCP) ont commencé à baisser un peu.

Dans un article que Google a publié sur Web.dev à propos de l’effet sur les performances d’un chargement trop paresseux, ils ont recherché les données de sites Web réels et ont découvert que les sites avec trop de chargement paresseux souffraient de mauvais scores LCP.

Ils ont découvert que les implémentations agressives de chargement paresseux en étaient la raison et ils ont appris qu’il s’agissait d’un problème spécifique aux sites WordPress.

Google a confirmé que les scores de WordPress pour LCP étaient en effet en baisse.

Les auteurs ont conclu :

« … la technique de chargement paresseux utilisée par WordPress aide très clairement à réduire les octets d’image mais au prix d’un LCP retardé. »

Lighthouse 8.4.0 ajoute un audit de chargement différé LCP

Les éditeurs ont peut-être vu leurs scores LCP (Largest Contentful Paint) chuter et ne pas comprendre pourquoi ils se détérioraient. Lighthouse 8.4.0 résout ce problème en ajoutant un audit spécifiquement pour diagnostiquer ce problème.

Toutes les images de la fenêtre d’affichage Largest Contentful Paint, la partie de la page Web qu’un visiteur voit en premier, ne doivent pas être chargées paresseusement.

Lighthouse 8.4.0 détectera s’il y a des éléments dans la fenêtre LCP qui sont chargés paresseusement.

Une page de développeur Chrome décrit le fonctionnement de Lighthouse 8.4.0 :

« Lighthouse détectera désormais si l’élément Largest Contentful Paint (LCP) était une image chargée paresseusement et recommandera de supprimer l’attribut de chargement. »

La page officielle du développeur Lighthouse 8.4.0 décrit la nouvelle fonctionnalité :

« Détecter quand l’élément LCP est chargé paresseux. Les images au-dessus de la ligne de flottaison qui sont chargées paresseusement s’affichent plus tard dans le cycle de vie de la page, ce qui peut retarder la plus grande peinture de contenu.

Lié: Un guide SEO technique pour les métriques de performance Lighthouse

Nouvel audit de la fenêtre d’affichage mobile

Lighthouse 8.4.0 ajoutera également un nouvel audit qui détecte s’il n’y a pas de balise méta de fenêtre d’affichage mobile dans la section d’en-tête.

Ceci est important car l’échec de l’ajout de cette balise Meta peut entraîner un score de délai de première entrée inférieur.

La documentation explique l’importance de ce nouvel audit :

« Dans une étude récente des données de HTTP Archive, plus de la moitié des sites qui ont reçu un score de 90 ou plus dans Lighthouse, mais qui ont échoué à au moins un Core Web Vital, n’avaient pas de fenêtre d’affichage mobile et échouaient au FID. Par conséquent, la section Performances de Lighthouse recommandera désormais d’ajouter une fenêtre comme celle-ci si aucune n’est trouvée :

<meta name="viewport" content="width=device-width">"

Le phare 8.4.0 est en ligne

Lighthouse 8.4.0 est désormais disponible dans PageSpeed ​​Insights et déclenchera le nouvel avertissement LCP s’il trouve un élément chargé paresseux dans la fenêtre d’affichage Largest Contentful Paint.

Chrome Dev Tools comprendra Lighthouse 8.4.0 dans Chrome 95, dont la sortie est actuellement prévue pour le 19 octobre 2021.

Citations

Lisez la page du développeur Chrome pour Lighthouse 8.4.0

Quoi de neuf dans Lighthouse 8.4

Les effets sur les performances d’un trop grand chargement paresseux

Phare v8.4 Page GitHub

LAISSER UN COMMENTAIRE

S'il vous plaît entrez votre commentaire!
S'il vous plaît entrez votre nom ici