Quels sont les éléments essentiels du Web et comment peuvent-ils améliorer votre expérience utilisateur? –
Core Web Vitals est une initiative de Google qui vise à fournir des «conseils unifiés pour les signaux de qualité» sur les pages Web. Ils sont destinés à fournir des informations exploitables pour aider les administrateurs de sites Web à optimiser leur expérience utilisateur.
Google prévoit d’utiliser Core Web Vitals comme signaux dans son index de classement de recherche. Initialement prévue pour mai 2021, la mise à jour a maintenant été reportée en juin. Si vos Web Vitals ne sont pas encore en ordre, il est maintenant temps d’agir avant que les modifications de recherche n’arrivent.
Sommaire
Les trois métriques
Le projet plus large Web Vitals cible plusieurs facettes de l’expérience Web. Pour Core Web Vitals, Google se concentre sur trois mesures spécifiques. De mauvais scores sur ces signes vitaux peuvent exposer un site avec une expérience utilisateur frustrante.
Voici les trois métriques dont vous devez être conscient:
- La plus grande peinture de contenu (LCP) – Cette métrique mesure les performances de chargement de la page. Un LCP de moins de 2,5 secondes est «bon»; tout ce qui dépasse 4,0 secondes est «médiocre».
- Premier délai d’entrée (FID) – Le premier délai d’entrée mesure le temps nécessaire pour qu’une page devienne sensible aux interactions de l’utilisateur telles que les clics et les défilements. Un bon site sera interactif dans un délai de 100 ms; un mauvais site prend plus de 300 ms.
- Décalage cumulatif de la disposition (CLS) – CLS est une mesure de la quantité de «décalage de mise en page» qui se produit pendant le chargement d’une page. Le décalage de mise en page se produit lorsque des éléments de page chargés de manière asynchrone, tels que des images et des bannières publicitaires, apparaissent après le reste de la page, ce qui fait que le contenu en dessous saute visiblement vers le bas. Cet effet discordant peut frustrer et dérouter les utilisateurs.
L’optimisation de ces métriques améliore l’expérience utilisateur en réduisant le temps de chargement et la latence sur la page. Réduire le décalage de mise en page améliore la cohérence visuelle de votre page. Chaque métrique est facilement mesurable et devrait apporter des améliorations immédiates dans le monde réel pour votre site.
L’objectif recommandé par Google est d’atteindre les «bons» seuils sur le 75e centile des chargements de votre page. Une page sera considérée comme «réussissant» les tests Core Web Vitals si elle peut atteindre ce niveau de conformité. Les sites qui tombent systématiquement en dessous du seuil du 75e centile pourraient éventuellement se retrouver moins bien classés dans les résultats de recherche, après la mise en ligne du changement d’indexation de Google.
Mesurer les valeurs vitales du Web de base
Vous disposez de plusieurs options pour vous aider à optimiser vos performances Web Vitals. Le premier choix pour les développeurs est le rapport Lighthouse disponible dans les outils de développement F12 de Google Chrome.
Accédez à votre site Web dans Chrome. Lancez les outils de développement et passez à l’onglet Phare. Cliquez sur le bouton «Générer un rapport» pour commencer l’analyse de Lighthouse. Cela peut prendre plusieurs secondes.
Une fois le rapport chargé, faites défiler jusqu’à la section Performances. Six mesures sont affichées, y compris les trois qui composent les Core Web Vitals. Dans Chrome, «First Contentful Paint» correspond à «Largest Contentful Paint» et «Time to Interactive» équivaut à «First Input Delay».
Si l’une de ces mesures est de couleur orange ou rouge, vous devrez peut-être faire du travail pour améliorer la position de votre site. Lighthouse affichera des suggestions sous chaque numéro. Certains changements peuvent être des gains rapides et faciles qui vous donnent plusieurs points supplémentaires pour quelques minutes de travail.
Vous devez exécuter Lighthouse deux fois, une fois en mode Bureau, puis à nouveau avec le bouton radio Mobile sélectionné. Les rapports Mobile et Desktop sont sélectionnés sur la page de destination de l’onglet Phare, où le bouton «Générer un rapport» est affiché. Les métriques sont évaluées différemment selon le type d’appareil; La recherche Google respectera également cette segmentation. Si votre site mobile fonctionne mieux que votre expérience de bureau, vous constaterez peut-être que votre site Web commence à se classer plus haut lorsqu’il est consulté à partir d’un smartphone (ou vice versa).
Plusieurs systèmes de gestion Web de Google exposent également les données Core Web Vitals. Vous pouvez afficher vos statistiques dans le rapport d’expérience utilisateur Chrome, PageSpeed Insights et votre tableau de bord Google Search Console.
Vérifier ces outils est important, même si vous obtenez de bons scores en utilisant Lighthouse. Les propriétés Google calculent votre score Web Vitals en fonction de réel données utilisateur anonymisées, via le rapport d’expérience utilisateur Chrome. Il est donc important de vérifier que les statistiques de Google correspondent réellement aux tests Lighthouse exécutés sur votre machine.
Des écarts peuvent facilement se produire si vous ne testez pas régulièrement avec votre base d’utilisateurs. Dans l’ensemble, les développeurs ont tendance à utiliser du matériel haut de gamme qui simplifie le travail des sites Web les plus complexes. Cela peut vous donner un score Lighthouse encourageant qui ne reflète pas votre expérience utilisateur réelle. Google peut produire un nombre très différent si la majorité de vos utilisateurs visitent depuis un smartphone de milieu de gamme fatigué.
Ajout de votre propre instrumentation
Ce ne sont pas seulement les outils de Google qui peuvent mesurer les principaux éléments vitaux du Web. Le projet fournit également une bibliothèque npm que vous pouvez intégrer avec le JavaScript de votre site. Cela vous permet de mesurer par programme les performances de Web Vitals. Vous pouvez ensuite envoyer les données collectées à votre propre service d’analyse.
La bibliothèque expose une fonction de mesure pour chacun des Web Vitals (par ex. LCP
pour la plus grande peinture de contenu). L’appel de la fonction mesurera la valeur de la métrique. Les fonctions acceptent un rappel qui recevra la valeur une fois la mesure terminée.
import {getLCP} from "web-vitals"; getLCP(lcp => { console.log(lcp); callAnalyticsService({lcp}); // use custom analytics });
La métrique peut mettre un certain temps à rapporter ses données. Certaines mesures dépendent de l’interaction réelle de l’utilisateur avec la page. Si l’utilisateur ne clique ou ne fait jamais défiler, la mesure ne sera pas effectuée.
N’appelez pas chaque fonction de mesure plus d’une fois au cours d’une même session. Chaque appel enregistre un observateur de performance; les appels consécutifs n’inviteront pas à une mesure immédiate et pourraient entraîner une utilisation excessive de la mémoire.
Votre rappel peut être appelé plusieurs fois. Un changement sera signalé chaque fois que la valeur de mesure est mise à jour. Certaines métriques surveillent en permanence la page et s’ajusteront tout au long de sa durée de vie. Votre fonction sera appelée à chaque fois qu’une nouvelle valeur est déterminée.
Mesure avec les API de navigateur
Mis à part le web-vitals
npm, vous pouvez utiliser directement les API de navigateur sous-jacentes si vous souhaitez une approche pratique des tests de performances. Cela vous permet d’affiner exactement la façon dont les mesures sont effectuées, mais cela pourrait vous conduire à vous éloigner des spécifications Web Vitals.
L’API Performance Observers est un mécanisme de navigateur qui vous permet de vous connecter aux événements de performance se produisant sur la page. La bibliothèque Web Vitals utilise cette API en interne. Vous pouvez attacher vos propres observateurs de performances pour recevoir les nouveaux événements directement depuis le navigateur. Chaque observateur reçoit une métrique à surveiller.
const observer = new PerformanceObserver(entries => { for (const entry of entries.getEntries()) { console.log(`New LCP entry at ${entry.startTime}`); } }); observer.observe({type: "largest-contentful-paint"});
Cet extrait de code montre comment configurer votre propre système de mesure pour la métrique Largest Contentful Paint. Le rappel passé au PerformanceObserver
reçoit une liste d’entrées d’observateurs de performance. Ceux-ci décrivent les transitions d’état des performances qui se produisent dans le navigateur.
Résumé
Obtenir un bon score sur Core Web Vitals indique que votre site est optimisé pour les trois aspects fondamentaux qui font une bonne expérience utilisateur. La réduction du temps de chargement, du temps d’interactivité et du changement de mise en page permet d’éliminer les frictions UX. Cela augmente les chances que les utilisateurs reviennent sur votre site.
Les Core Web Vitals actuels ne sont pas statiques. Des métriques supplémentaires pourraient être ajoutées au fil du temps. Cela serait basé sur les commentaires de la communauté des développeurs et sur l’observation dans le monde réel des problèmes de performances courants. Les trois mesures actuelles ont été choisies car elles sont «pertinentes pour toutes les pages Web» et ont le plus grand impact global sur l’expérience utilisateur.