Comment améliorer la vitesse des pages pour transmettre les éléments essentiels du Web de Google

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é.

Quels sont les éléments essentiels du Web ?

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 plus grande peinture de contenu.
• Interaction avec Next Paint.
• Changement de mise en page cumulatif.

La plus grande peinture de contenu

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.

Interaction avec la peinture suivante

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 :

1. La saisie de l'utilisateur, par exemple un clic ou une pression sur une touche.
2. La prochaine mise à jour visuelle (« paint ») du site Web (que le contenu change ou non importe).

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.

Changement de disposition cumulatif

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.

Qu'est-ce que l'évaluation Core Web Vitals de Google ?

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

Qu’est-ce qui constitue une bonne évaluation des éléments essentiels du Web ?

Google définit des seuils « Bon », « Mauvais » et « Besoin d'amélioration » pour chaque métrique.

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.

Comment accélérer la plus grande peinture de contenu (LCP)

Pour améliorer votre LCP, vous avez besoin que le contenu principal de votre site Web se charge plus rapidement.

1. Exécutez un test de vitesse de site Web gratuit pour comprendre ce qui cause le retard du contenu principal de votre page Web.
2. Recevez et examinez les informations de la pellicule visuelle et les mesures de performances de haut niveau pour découvrir quelles sont vos prochaines étapes.
3. Utilisez ces informations pour optimiser la vitesse de chargement de vos pages.

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 :

• Quel élément de page est responsable de la plus grande peinture de contenu.
• Si le LCP est une image, quelle est l'URL de l'image et quelle priorité de requête a été utilisée par les navigateurs.
• Si le LCP est une image, de quelles autres requêtes dépendait le fichier image.

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.

Comment améliorer l'interaction avec Next Paint (INP)

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 :

• Retard d'entrée.
• Temps de traitement.
• Retard de présentation.

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.

Comment réduire les changements de mise en page cumulatifs

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 :

1. Exécution d'un test de vitesse de page .
2. En cliquant sur le titre de la métrique « Cumulative Layout Shift » pour voir quels éléments de la page ont été déplacés.
3. Correction de l'élément à l'origine du décalage.

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

Comment corriger les changements de mise en page

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

Surveiller la vitesse des pages et les éléments essentiels du Web

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.