Core Web Vitals – désormais intégré à Chrome

Vous êtes-vous demandé quels sont ces chiffres dans DevTools ?

Plus tôt cette année, Google a introduit un aperçu dans le navigateur de Core Web Vitals dans DevTools. Cet article approfondit ce que sont les Core Web Vitals (CWV), pourquoi ils sont importants et comment pouvons-nous les améliorer.

Core Web Vitals (CWV) est un nouvel ajout à l'onglet performances de Google Chrome. Les CWV sont un ensemble de mesures que Google utilise pour évaluer l'expérience utilisateur globale d'une page Web. Ils se concentrent sur trois aspects clés de la performance :

La plus grande peinture de contenu (LCP)

LCP est la mesure de la rapidité avec laquelle la page Web se charge. Un LCP rapide indique que l'utilisateur peut rapidement commencer à interagir avec le contenu le plus important de la page.

D'après la documentation :

Pour offrir une bonne expérience utilisateur, les sites doivent s'efforcer d'avoir un LCP de 2,5 secondes ou moins pour au moins 75 % des visites de pages.

Bonnes pratiques pour optimiser le LCP :

• Optimisez les images et réduisez la taille de leur fichier.
• Réduire les ressources bloquant le rendu.
• Exploitez la mise en cache du navigateur.
• Améliorez les temps de réponse du serveur.
• Utilisez un CDN.
• En savoir plus ici.

Peinture interactive (INP)

INP est la mesure de la réactivité de la page lors d'interactions comme cliquer sur des boutons ou saisir des formulaires. Un INP rapide indique que la page est réactive et ne semble ni lente ni insensible.

D'après la documentation :

Pour offrir une bonne expérience utilisateur, les sites Web doivent s'efforcer d'avoir une interaction avec Next Paint de 200 millisecondes ou moins.

Meilleures pratiques pour optimiser l'INP :

• Réduisez le temps d'exécution de JavaScript.
• Évitez les tâches longues qui bloquent le thread principal.
• Donner la priorité aux tâches critiques et différer les tâches non critiques.
• Optimisez la gestion des événements et le traitement des entrées.
• En savoir plus ici.

Changement de mise en page cumulatif (CLS)

CLS est la mesure de la stabilité visuelle de la page, évaluant la fréquence à laquelle les éléments se déplacent de manière inattendue après le chargement de la page. Un exemple de mises en page inattendues peut être trouvé ici.

Un CLS faible indique que la page est visuellement stable et ne souffre pas de changements de mise en page inattendus qui peuvent perturber l'expérience utilisateur. D'après les documents :

Pour offrir une bonne expérience utilisateur, les sites doivent s'efforcer d'avoir un score CLS de 0,1 ou moins.

Bonnes pratiques pour optimiser CLS :

• Réservez de l'espace pour le contenu dynamique.
• Évitez les images sans dimensions spécifiées.
• Utilisez font-display : remplacez les polices.
• Réduisez les changements de mise en page déclenchés par JavaScript.
• En savoir plus ici.

Pourquoi les Core Web Vitals sont-ils importants ?

Expérience utilisateur : Une bonne expérience utilisateur est cruciale pour le succès d'un site Web. Les Core Web Vitals ont un impact direct sur la façon dont les utilisateurs perçoivent les performances et la convivialité d’un site Web.

Classement des moteurs de recherche : Google a indiqué que les Core Web Vitals sont un facteur de classement. Les sites Web avec de mauvais scores Core Web Vital peuvent être moins bien classés dans les résultats de recherche.

Taux de conversion : Un site Web rapide et stable est plus susceptible de convertir les visiteurs en clients.

Conclusion:

En vous concentrant sur l'amélioration des Core Web Vitals, vous pouvez créer une meilleure expérience utilisateur, améliorer le classement de votre site Web dans les moteurs de recherche et augmenter les taux de conversion de votre site Web.

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!