Core Web vitals: un guide pour les mesures de performances Web de Google

Comprendre les principaux vitaux du Web de Google et ses méthodes de promotion

Points de base:

• Core Web vitals est une métrique de performance clé utilisée par Google pour mesurer une expérience utilisateur réelle, visant à simplifier l'évaluation des performances et à aider les propriétaires de sites Web et les développeurs à se concentrer sur les améliorations les plus importantes. Ces trois mesures sont: le dessin de contenu maximal (LCP), la première latence d'entrée (FID) et le décalage de disposition cumulatif (CLS), respectivement, qui évaluent la vitesse de chargement, l'interactivité et la stabilité visuelle.
• LCP Mesure les performances de chargement et rapporte le temps de rendu de la plus grande image ou bloc de texte visible dans la fenêtre. FID Mesurer la vitesse de réponse, enregistrer le temps entre l'utilisateur interagissant avec la page et le navigateur commence à traiter les gestionnaires d'événements. CLS Mesurer la stabilité visuelle et évaluer les mouvements de contenu inattendus - généralement lorsque le DOM change après l'image au-dessus de la publicité AD ou la position de défilement actuelle est chargée.
• Améliorer les métriques Web de base nécessite d'optimiser les aspects du site Web, tels que l'optimisation des images, la mise en œuvre des caches de navigateur, la minimisation des ressources de blocage des rendus et la priorité des chemins de rendu critique. Google fournira des recommandations spécifiques basées sur des rapports de performances pour votre site Web. Les sites Web qui apprécient ces mesures ont tendance à avoir des temps de chargement plus rapides, une meilleure interactivité et une expérience visuelle plus stable, ce qui améliore la satisfaction des utilisateurs et améliore éventuellement le classement des moteurs de recherche.

Google souhaite que les utilisateurs aient une bonne expérience Web, de sorte que les sites Web qui se classent plus élevés dans les résultats de recherche se chargent également plus rapidement. Bien sûr, il s'agit d'une grande simplification, mais en supposant que vous comparez deux sites avec du contenu et du public similaires, les sites Web de chargement plus rapides devraient se classer plus haut dans les résultats. Cependant, la méthode de Google pour mesurer cette métrique a toujours été quelque peu insaisissable, il introduit donc les métriques Web de base pour fournir aux propriétaires de sites Web et aux développeurs une certaine clarté. Malheureusement, "Performance" est un terme général couvrant des dizaines de mesures ...

First octet Temps, commencer à rendu, utilisation du processe Chargement, page Full Chargement, temps d'interaction, Recalculation de style par seconde

, etc. différents outils renvoient différents ensembles de résultats, et il est difficile de savoir par où commencer.

Le programme de métriques Web de Google est conçu pour simplifier l'évaluation des performances et vous aider à vous concentrer sur les améliorations les plus importantes. Les métriques Web de base sont des mesures de performances clés qui reflètent l'expérience utilisateur du monde réel. Certaines mesures sont rapportées par le panneau du phare, Pagespeed Insights et Google Search Console dans Chrome Devtools.

La bibliothèque JavaScript des Vites-Web peut aider à mesurer des mesures plus réalistes de vrais utilisateurs visitant votre site Web. Les résultats peuvent être publiés sur Google Analytics ou d'autres points de terminaison pour une analyse plus approfondie.

Google recommande d'utiliser le 75e centile, qui est d'enregistrer plusieurs résultats pour la même métrique, trier de l'ordre du meilleur au pire, puis analyser les valeurs des trois trimestres. Par conséquent, les trois quarts des visiteurs du site Web connaîtront ce niveau de performance.

Les métriques Web de base actuelles sont le dessin de contenu maximal, le premier retard d'entrée et le décalage de mise en page cumulatif, qui évaluent respectivement le chargement, l'interactivité et la stabilité visuelle.

Dessin de contenu maximal (LCP)

LCP mesure les performances de chargement - vitesse de vitesse de l'affichage du contenu .

Les métriques historiques telles que le chargement des pages et DomContent Télélées ont toujours été problématiques à cet égard, car ils ne reflètent pas toujours l'expérience utilisateur. Par exemple, le spoiler peut apparaître presque immédiatement, mais il peut prendre plus de temps pour apparaître qu'il est chargé d'une autre demande AJAX.

Le dessin de contenu maximal (LCP) rapporte le temps de rendu de la plus grande image ou bloc de texte visible dans la fenêtre. Les temps inférieurs à 2,5 secondes sont considérés comme bons, tandis que les temps supérieurs à 4,0 secondes sont considérés comme mauvais.

Les types d'éléments considérés dans LCP comprennent:

• <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173949835734928.jpg" class="lazy" alt="Core Web Vitals: A Guide to Google's Web Performance Metrics"> <p> Logos et les menus ne bougent pas - ce sont des éléments stables. L'annonce est ajoutée au DOM et sa position de départ ne change pas, il est donc également stable. Cependant, l'image du héros bougera: </p> <ol> <li> L'image du héros est 360 x 510 pixels dans la fenêtre de 360 ​​x 720 pixels. Par conséquent, son score d'impact est (360 x 510) / (360 x 720) = 0,71 </li> <li> Il se déplace verticalement de 90 pixels dans la hauteur de la fenêtre de 720 pixels, donc sa fraction de distance est de 90/720 = 0,125 </li> </ol> <p> Par conséquent, le CLS est de 0,71 x 0,125 = 0,089 </p> <p> Les scores CLS inférieurs à 0,1 sont considérés comme bons, tandis que ceux supérieurs à 0,25 sont considérés comme mauvais. Dans ce cas, le CLS se trouve dans une plage acceptable car bien que la zone affectée soit grande, la distance pour se déplacer est relativement faible. Cependant, une plus grande publicité nécessite une nouvelle attention. </p> <p> L'algorithme CLS n'enregistre aucun décalage de mise en page dans les 500 millisecondes d'interaction utilisateur, ce qui peut déclencher des modifications de l'interface utilisateur ou un redimensionnement de la fenêtre. Par conséquent, votre page ne sera pas pénalisée pour les mises à jour d'interface, les transitions et les animations nécessaires aux opérations, telles que l'ouverture d'un menu complet à partir de l'icône du hamburger. </p> <p> Le panneau de rendu (menu & gt; Plus d'outils & gt; rendu) dans Chrome Devtools fournit l'option de zone de décalage de mise en page. Sélectionnez la boîte et actualisez la page - le décalage de mise en page est mis en surbrillance en bleu. Vous pouvez également modifier la vitesse du réseau dans le panneau réseau pour ralentir le chargement. </p> <p> FID / TBT peut être amélioré par: </p> <ol> <li> Réserver l'espace pour les éléments d'image, de vidéo et d'IFRAME en utilisant les propriétés <code>width et height, les propriétés CSS aspect-ratio ou les anciennes pointes de remplissage (selon le cas)
• Évitez Fout (clignotement de texte non style) et Foit (clignotement du texte invisible) lors du chargement des polices de réseau. Précharger ou utiliser des polices alternatives de taille similaire aidera
• N'inservez pas les éléments DOM au-dessus du contenu existant pendant le chargement des pages initiaux, tels que l'enregistrement des newsletter et des boîtes de notification similaires
• Utilisez CSS transform et opacity pour des animations moins coûteuses.

priorité de performance

Les métriques Web de base se développeront au fil du temps, mais l'évaluation des mesures LCP, FID et CLS peut aider à identifier les problèmes les plus critiques. Résolvez d'abord des puzzles rapides et simples - ils ont généralement le plus grand retour sur investissement:

• Activer la compression du serveur et http / 2 ou http / 3
• Assurez-vous que le cache du navigateur est utilisé en définissant l'en-tête d'expiration HTTP
• Précharge des ressources le plus tôt possible
• Merger et comprimer CSS et JavaScript
• supprimer les ressources inutilisées
• Envisagez d'utiliser CDN ou un meilleur hébergement
• Utilisez la taille et le format de l'image appropriés
• Optimiser les tailles d'image et de fichiers vidéo (les CDN professionnels peuvent aider)

Core Web Metrics FAQ

• Quelles sont les métriques Web de base? Les métriques Web de base sont un ensemble de mesures centrées sur l'utilisateur introduites par Google pour mesurer les performances de chargement, l'interactivité et la stabilité visuelle des pages Web. Ils sont essentiels pour évaluer l'expérience utilisateur globale d'un site Web.
• Quels sont les trois indicateurs de page Web de base? Les trois métriques Web de trois principaux sont les suivantes: Drache maximale de contenu (LCP), premier retard d'entrée (FID) et décalage de mise en page cumulatif (CLS).
• Pourquoi les métriques Web de base sont-elles importantes pour les propriétaires de sites Web? Les métriques Web de base sont très importantes car elles affectent directement l'expérience utilisateur. Les sites Web qui apprécient ces mesures ont tendance à avoir des temps de chargement plus rapides, une meilleure interactivité et une expérience visuelle plus stable, ce qui améliore la satisfaction des utilisateurs et améliore éventuellement le classement des moteurs de recherche.
• Comment mesurer les métriques de la page Web de base de mon site Web? Il existe une variété d'outils qui peuvent être utilisés pour mesurer les métriques Web de base, y compris les rapports de Google PageSpeed ​​Insights, Lighthouse et Chrome User Experience. Ces outils donnent un aperçu des performances d'un site Web basé sur les mesures LCP, FID et CLS.
• Comment améliorer les métriques de la page Web de base de mon site Web? Améliorer les métriques Web de base nécessite d'optimiser les aspects du site Web, tels que l'optimisation des images, la mise en œuvre de la mise en cache des navigateurs, la minimisation des ressources de blocage des rendements et la hiérarchisation des chemins de rendu critique. Google fournira des recommandations spécifiques basées sur des rapports de performances pour votre site Web.
• Les métriques Web de base affecteront-elles le classement des moteurs de recherche? Oui, les métriques Web de base sont des facteurs de classement dans l'algorithme de recherche de Google. Google a déclaré qu'à partir de mai 2021, les signaux d'expérience de page (y compris les métriques Web de base) seront inclus dans le classement des résultats de recherche. Les sites Web qui reflètent une meilleure expérience utilisateur dans ces mesures peuvent avoir un avantage dans les classements de recherche.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!