29 novembre 2023
Cet article a été sponsorisé par DebugBear. Les opinions exprimées dans cet article sont celles du sponsor.
Un site Web rapide offre une expérience plus agréable aux utilisateurs et peut entraîner des taux de conversion plus élevés .
Mais Google prend également en compte la vitesse du site Web dans le cadre des Core Web Vitals et l'utilise comme facteur de classement .
Découvrez comment fonctionne l'évaluation Core Web Vitals de Google et ce que vous pouvez faire pour garantir que votre site Web se charge rapidement et offre une bonne expérience une fois chargé.
Les Core Web Vitals (CWV) de Google visent à mesurer la qualité des sites Web et l'expérience utilisateur.
Pour ce faire, plusieurs nouvelles métriques ont été développées et peuvent être collectées dans le navigateur Chrome.
Trois de ces métriques forment les Core Web Vitals :
La métrique Largest Contentful Paint (LCP) mesure la rapidité avec laquelle le plus gros élément de contenu de la page apparaît sur la page après qu'un visiteur ouvre une page.
Vous pouvez voir un exemple de LCP dans cette pellicule de vitesse de page de rendu DebugBear , qui montre quel contenu serait visible pour les utilisateurs à différents moments.
Film fixe DebugBear montrant comment le contenu d'une page apparaît progressivement sur un site Web, novembre 2023 Ici, le contenu commence à apparaître après seulement 1,27 seconde.
Cependant, l'image de droite est identifiée par Chrome comme l'élément LCP, et cette image n'apparaît que 2,33 secondes après la navigation.
La plus grande peinture de contenu est étroitement liée à deux autres métriques Web Vitals qui ne font pas partie des Core Web Vitals : le délai jusqu'au premier octet et la première peinture de contenu.
Temps jusqu'au premier octet
Le Time to First Byte (TTFB) mesure la rapidité avec laquelle le serveur répond à la demande du document HTML chargé au début du processus de chargement de la page .
Sans le document HTML, le navigateur ne peut afficher aucun contenu ni commencer à charger d'autres ressources.
Première peinture de contenu
Le First Contentful Paint (FCP) examine la rapidité avec laquelle un contenu apparaît sur la page.
Le contenu ici signifie généralement du texte ou une image.
Cependant, lorsque cette étape est atteinte par la page, la plupart du contenu peut toujours ne pas être disponible pour le visiteur.
Le FCP ne peut avoir lieu qu'après le jalon TTFB. À son tour, la plus grande peinture de contenu est toujours supérieure ou égale à la première peinture de contenu.
Cela signifie que TTFB et FCP fixent des limites inférieures au LCP et que l'examen de ces deux mesures peut vous aider à comprendre le comportement de chargement de votre site Web.
L'interaction avec Next Paint (INP) mesure la réactivité d'un site Web aux entrées de l'utilisateur.
Il examine généralement l’interaction la plus lente d’un utilisateur sur une page Web.
INP indique le temps écoulé entre deux horodatages lors d'une interaction avec une page :
Par exemple, cette pellicule montre un clic sur le bouton « Afficher les détails ».
Le clic est géré par le code JavaScript sur la page et l'exécution de ce code prend un certain temps. Pendant le traitement du clic, l’interface utilisateur du site Web reste gelée. Une fois le traitement CPU terminé, le navigateur affiche le nouveau contenu.
Capture d'écran de DebugBear montrant les étapes impliquées dans une interaction de page, novembre 2023 Techniquement, l'interaction avec Next Paint ne fait pas encore partie des principaux éléments essentiels du Web, mais Google a annoncé qu'INP remplacerait l'ancienne métrique First Input Delay en mars 2024.
La métrique Cumulative Layout Shift (CLS) vérifie si le contenu de la page est visuellement stable après son apparition.
Une interface utilisateur instable désoriente les utilisateurs et peut entraîner des interactions involontaires entre les pages.
Cette capture d'écran montre un exemple de changement de mise en page qui se produit pendant le processus de chargement de la page.
Au début, l'image en haut à droite n'est pas encore visible car le navigateur est toujours en train de la télécharger. Une fois l'image affichée, la taille de l'élément d'image est mise à jour. Dans ce cas, l'élément devient plus grand et repousse donc le contenu qui se trouve en dessous sur la page.
Capture d'écran de DebugBear montrant les changements de mise en page sur un site Web, novembre 2023 Le CLS est dit « cumulatif » car l’impact des différents changements s’additionne.
À l’origine, cela durait pendant toute la durée d’ouverture de la page, mais cela donnait injustement une mauvaise note aux applications d’une seule page de longue durée. Google est désormais passé à la définition CLS fenêtrée qui ne prend en compte qu'une fenêtre temporelle pouvant aller jusqu'à cinq secondes.
Google effectue une évaluation Core Web Vitals sur votre site Web et utilise les résultats comme signal de classement .
Si votre site Web ne répond pas aux Core Web Vitals, vous recevrez un avertissement dans divers outils, par exemple l'alerte « Core Web Vitals Assessment : Failed » dans Page Speed Insights .
Captures d'écran des informations sur la vitesse des pages avec un échec d'évaluation Web Vitals, novembre 2023 Les données de l'évaluation Core Web Vitals proviennent du rapport sur l'expérience utilisateur Chrome (CrUX), qui collecte des données utilisateur réelles auprès des utilisateurs de Chrome.
En plus de PageSpeed Insights, Google Search Console vérifie également vos informations Web vitales et explique quelles URL ne sont pas considérées comme « bonnes ».
Capture d'écran de Google Search Console montrant les données Core Web Vitals, novembre 2023 Google définit des seuils « Bon », « Mauvais » et « Besoin d'amélioration » pour chaque métrique.
| Métrique | Bien | A besoin d'amélioration | Pauvre |
| La plus grande peinture de contenu | En dessous de 2,5 s | En dessous de 4 s | Plus de 4 s |
| Interaction avec la peinture suivante | En dessous de 200 ms | En dessous de 500 ms | Plus de 500 ms |
| Changement de disposition cumulatif | En dessous de 0,1 | En dessous de 0,25 | Plus de 0,1 |
Pour bénéficier au maximum de l'avantage du classement, votre site Web doit être noté « Bon » sur les trois Core Web Vitals. À mesure que votre site Web se détériore, cela affecte progressivement votre classement jusqu'à ce que le seuil « médiocre » soit atteint.
Pour améliorer votre LCP, vous avez besoin que le contenu principal de votre site Web se charge plus rapidement.
Résultat d'un test de vitesse du site Web DebugBear, novembre 2023 Vous pouvez ensuite approfondir la métrique spécifique en cliquant sur le titre de la métrique « Largest Contentful Paint » dans le résultat du test.
Cela vous montrera :
Capture d'écran de DebugBear montrant une analyse de la plus grande peinture de contenu, novembre 2023 Les cascades de requêtes montrent quelles ressources ont été chargées sur le réseau et combien de temps leur chargement a pris. Dans ce cas, la cascade de requêtes partielles axée sur l'image LCP montre que l'image dépend du chargement préalable d'un gros fichier JavaScript. Il s'agit d'un problème courant et vous devez chercher à charger les images LCP directement à partir du document HTML.
Le résultat du test DebugBear propose également de nombreuses recommandations automatisées et les classe en fonction de l'impact attendu.
Seuls 64 % des sites Web mobiles offrent actuellement une bonne expérience INP, ce qui en fait une mesure importante à optimiser.
La métrique INP peut être difficile à déboguer car elle dépend d'une interaction utilisateur qui ne peut pas être testée aussi facilement.
Vous pouvez tester manuellement les interactions entre les pages et les mesurer à l'aide du profil de performances Chrome DevTools .
Cela fonctionne bien si vous savez avec quels éléments de page les utilisateurs interagissent généralement. DevTools est également très utile une fois que vous avez identifié une interaction lente, car les outils de développement Chrome vous diront exactement à quoi le navigateur passe du temps pendant cette interaction.
L' outil INP Debugger peut également être pratique car il simule automatiquement les interactions avec différents éléments de la page. Tout ce que vous avez à faire est de saisir l’URL d’un site Web.
Capture d'écran de l'outil gratuit INP Debugger, novembre 2023 Cependant, le débogueur INP ne sera pas en mesure d'identifier toutes les interactions, surtout si elles font partie d'un flux utilisateur plus long. C'est là que la collecte de données de surveillance des utilisateurs réels (RUM) est utile , car elle vous permet de concentrer vos optimisations exactement au bon endroit.
Avec les données RUM, vous pouvez voir exactement avec quels éléments de page la plupart des utilisateurs interagissent et s'ils rencontrent des retards d'interaction.
Capture d'écran des données réelles de surveillance des utilisateurs dans DebugBear, novembre 2023 Vous pouvez également voir une répartition du RUM en ses différents composants :
Le délai d'entrée mesure combien de temps après l'interaction de l'utilisateur, le navigateur a commencé à traiter l'entrée de l'utilisateur. Un délai d'entrée élevé indique que des tâches en arrière-plan ou des gestionnaires d'événements précédents bloquent l'interaction de l'utilisateur.
Le temps de traitement mesure le temps réel passé à traiter les entrées de l'utilisateur. Si cela est lent, vos développeurs doivent examiner quel code s'exécute en réponse à l'interaction et comment ce code peut être optimisé.
Le délai de présentation mesure le temps écoulé entre l'événement géré et la prochaine peinture. Ce nombre peut être élevé si le rendu de la page est complexe ou si d'autres traitements du processeur ont été mis en file d'attente pendant la gestion de l'interaction.
Semblable à INP, le décalage cumulatif de mise en page peut être difficile à corriger, car cela se produit souvent lorsque l'utilisateur fait défiler la page vers le bas ou lorsque du contenu supplémentaire apparaît après que l'utilisateur a cliqué sur un élément de l'interface utilisateur.
Si le changement de mise en page se produit lors du chargement initial de la page, il est facile de l'identifier par :
Par exemple, ici, du contenu supplémentaire a été chargé, entraînant une modification de la mise en page.
Capture d'écran montrant le changement de disposition des tests en laboratoire dans DebugBear, novembre 2023 Pour corriger les changements de mise en page, assurez-vous que des espaces réservés de taille appropriée sont en place si certains contenus n'apparaissent que plus tard dans le processus de chargement de la page.
Vous pouvez également veiller à ce que les autres contenus soient chargés plus tôt : si le contenu est prêt dès que la page commence à s'afficher, il n'y a pas de changement de mise en page.
Si votre score CLS est difficile à reproduire, vous pouvez utiliser la surveillance des utilisateurs réels de DebugBear pour voir ce qui provoque des changements de disposition pour vos utilisateurs réels.
En plus d'examiner les distributions de haut niveau, vous pouvez également examiner les expériences des utilisateurs individuels et ce qui a conduit à des changements de disposition pour eux.
Capture d'écran montrant le changement réel de disposition des utilisateurs dans DebugBear, novembre 2023 Si vous avez du mal à réussir l'évaluation Core Web Vitals, la surveillance DebugBear peut vous aider à identifier les problèmes sur votre site Web et à vous assurer de recevoir des alertes en cas de problème.
Démarrez simplement un essai gratuit et entrez les URL de votre site Web. Consultez toutes les mesures de vitesse de vos pages en un coup d’œil sur le tableau de bord. DebugBear assure également le suivi des scores Lighthouse et des données Google des utilisateurs réels qui ont un impact sur les classements.
Capture d'écran montrant les mesures clés de vitesse des pages dans DebugBear, novembre 2023 En plus de tester en permanence votre site Web dans un environnement de laboratoire contrôlé, vous pouvez également installer un extrait d'analyse sur votre site pour suivre les expériences utilisateur réelles.
DebugBear affichant les graphiques Core Web Vitals des utilisateurs réels, novembre 2023 En plus de la présentation de haut niveau de Web Vitals, DebugBear RUM vous permet de décomposer les expériences utilisateur par vitesse de page, pays ou navigateur Web.
Capture d'écran de DebugBear montrant une analyse TTFB d'un utilisateur réel, novembre 2023 Disposer de rapports de laboratoire détaillés et de données utilisateur réelles vous permet de devancer les données Google CrUX qui ont un impact sur les classements et sont signalées avec un délai de 28 jours. DebugBear fournit des informations puissantes sur vos Core Web Vitals et vous aide à communiquer avec le reste de votre équipe et votre direction.
Prêt à commencer à optimiser votre site Web ? Inscrivez-vous à DebugBear et obtenez les données dont vous avez besoin pour offrir d'excellentes expériences utilisateur.
Crédits images
Image en vedette : Image de DebugBear. Utilisé avec autorisation.
Découvrez les secrets de la gestion d'un programme d'affiliation réussi. De l'intégration des affiliés à la création d'une stratégie de communication, la deuxième partie de cette série vous couvre.
Boostez la gestion globale de votre site Web avec des outils d'IA. Découvrez les avantages de l’exploitation de la technologie IA pour le contenu, le référencement, la recherche et bien plus encore.
Regardez ce webinaire à la demande et voyez iQuanti partager des informations exploitables pour mesurer le succès au sein des canaux croisés de la recherche organique et payante.