Cet article a été sponsorisé par DebugBear. Les opinions exprimées dans cet article sont celles du sponsor.
Vous voulez rendre votre site Web rapide ?
Heureusement, de nombreuses techniques et guides existent pour vous aider à accélérer votre site Web.
En fait, l’année dernière seulement, plusieurs nouvelles fonctionnalités du navigateur ont été publiées et offrent :
- De nouvelles façons d'optimiser votre site Web.
- De nouvelles façons d’identifier les causes d’un ralentissement des performances.
Le tout dans votre navigateur.
Cet article examine donc ces nouvelles fonctionnalités de référencement du navigateur et comment vous pouvez les utiliser pour réussir l'évaluation Core Web Vitals de Google.
Pourquoi les performances d'un site Web sont essentielles à l'expérience utilisateur et au référencement
Avoir un site Web rapide rendra vos utilisateurs plus heureux et augmentera les taux de conversion.
Mais la performance est aussi un facteur de classement Google.
Google a défini trois mesures d'expérience utilisateur, appelées Core Web Vitals :
- La plus grande peinture de contenu : à quelle vitesse le contenu de la page apparaît-il ?
- Changement de mise en page cumulatif : le contenu se déplace-t-il après le chargement ?
- Interaction avec Next Paint : dans quelle mesure la page est-elle réactive aux entrées de l'utilisateur ?
Pour chacune de ces métriques, il existe un seuil maximum à ne pas dépasser pour réussir l'évaluation Web Vitals.
1. Ajoutez une navigation instantanée avec les « règles de spéculation »
Nouvelles définitions clés :
Lorsque les sites Web sont lents à charger, cela est généralement dû au fait que diverses ressources doivent être chargées à partir du serveur du site Web. Mais et s’il existait un moyen de réaliser des navigations instantanées, où les visiteurs n’ont pas à attendre ?
Cette année, Chrome a lancé une nouvelle fonctionnalité appelée règles de spéculation, qui permet d'atteindre cet objectif. Après avoir chargé la page initiale sur un site Web, d'autres pages peuvent être préchargées en arrière-plan. Ensuite, lorsque le visiteur clique sur un lien, la nouvelle page apparaît instantanément.
Mieux encore, cette fonctionnalité est facile à mettre en œuvre simplement en ajoutant un balise vers le site Web. Vous pouvez alors :
- Pré-afficher automatiquement les pages entières que l'utilisateur est susceptible de visiter ensuite
- Précharger le contenu de la page lorsqu'un utilisateur survole un lien
- Précharger partiellement une page, pour équilibrer la consommation de ressources et la vitesse de navigation
La page suivante se chargera alors beaucoup plus rapidement, ce qui se traduira par une excellente expérience utilisateur et un faible score Largest Contentful Paint.
2. Optimisez l'interaction avec la prochaine peinture avec la nouvelle API de longues images d'animation
Nouvelle définition clé :
L'interaction avec Next Paint (INP) est devenue une métrique Core Web Vitals en mars 2024. Les interactions lentes sont souvent causées par le code JavaScript exécuté sur la page. Cependant, il peut souvent être difficile d'identifier quelles interactions sont lentes et quels scripts provoquent des retards.
C'est pourquoi Google a ajouté l'API Long Animation Frames à Chrome. Il peut attribuer des retards de rendu à des scripts spécifiques exécutés sur votre site Web, vous indiquant ce que vous devez corriger pour améliorer votre score INP.
Utiliser directement l'API est un peu compliqué, mais vous pouvez utiliser la bibliothèque web-vitals.js de Google ou un outil commercial comme DebugBear pour collecter les données.
Avec la fonctionnalité Long Animation Frames, vous pouvez découvrir :
- Quels scripts spécifiques ralentissent votre site Web
- Pourquoi le code est en cours d'exécution (par exemple en réponse à une interaction de l'utilisateur ou en raison d'une tâche en arrière-plan exécutée sur la page)
- Comment le temps de traitement est dépensé (par exemple, exécuter du code ou mettre à jour la mise en page)
3. Afficher les métriques Core Web Vitals dans le nouvel onglet Performances de DevTools
Nouvelle définition clé :
Chrome DevTools est depuis longtemps un excellent outil pour une analyse approfondie des performances techniques. Cependant, il ne fournissait pas toujours un bon aperçu de haut niveau de vos données Core Web Vitals.
Cela a changé maintenant avec le nouvel onglet Performances de DevTools. Vous pouvez désormais voir facilement :
- Un aperçu des Core Web Vitals sur la page actuelle
- Une liste des interactions de page et des changements de mise en page
- Données utilisateur réelles issues du rapport Chrome User Experience (CrUX) de Google
La liste des interactions utilisateur est particulièrement utile pour déboguer les mauvais scores INP, car vous n'avez plus besoin d'enregistrer un profil de performances complet pour vérifier la rapidité d'une interaction.
4. Analysez les plus grands composants de peinture de contenu
De nombreux facteurs ont un impact sur votre score Largest Contentful Paint, qu'il s'agisse du temps de réponse du serveur, du temps passé à télécharger une image ou à attendre que le contenu apparaisse.
Google a publié un nouvel article expliquant lesquels de ces composants ont le plus grand impact sur la base des données réelles des utilisateurs.
Il est intéressant de noter que même si l'accent a été mis sur l'optimisation des images pour les rendre plus rapides à charger, Google a constaté que le chargement d'une image LCP ne représente en réalité qu'environ 10 % de la valeur globale de la métrique LCP. Nous examinons ici les sites Web avec une note LCP moyenne, mais ce résultat est cohérent avec d'autres catégories de sites Web.
En théorie, l'image de la page principale peut être chargée immédiatement après que le serveur a fourni le document HTML au navigateur. Mais il s'avère qu'il y a souvent un délai important avant que l'image commence réellement à se charger, comme le montre le composant « Image Load Delay » qui représente 27 % du score LCP global dans le tableau ci-dessus.
Ces résultats ne peuvent pas être généralisés et appliqués à un site Web spécifique. Au lieu de cela, vous pouvez exécuter un test Lighthouse à l'aide d'un outil tel que PageSpeed Insights. La répartition peut être trouvée sous l’audit du plus grand élément de peinture de contenu.
Vous pouvez également utiliser le test de vitesse de site Web gratuit de DebugBear pour afficher la répartition des composants LCP et obtenir plus d'informations sur ce que vous pouvez faire pour optimiser la métrique.
Cliquez sur la métrique Largest Contentful Paint pour afficher des données de débogage supplémentaires telles que l'URL de l'image, la durée de chargement et la priorité de la demande.
Comment réussir l'évaluation Core Web Vitals de Google
Dans cet article, nous avons examiné certains des nouveaux outils de diagnostic que vous pouvez utiliser pour enquêter sur les problèmes de vitesse de page sur votre site Web, ainsi que les nouvelles technologies de navigateur qui peuvent vous aider à obtenir un site Web plus rapide.
Pour suivre vos optimisations et rester au top de vos métriques Core Web Vitals, vous pouvez utiliser un outil de surveillance des performances de site Web comme DebugBear. Identifiez les optimisations potentielles sur votre propre site Web et comparez votre site à celui de la concurrence pour offrir la meilleure expérience de sa catégorie.
Les outils de surveillance vous aident à repérer les tendances à long terme, à vérifier que les changements que vous avez apportés ont un impact positif et à vous assurer de détecter rapidement l'apparition de nouveaux problèmes.
DebugBear fournit trois types de données sur la vitesse des pages pour vous aider à vraiment comprendre et optimiser la vitesse de vos pages :
Démarrez un essai gratuit pour voir ce que vous pouvez faire pour offrir les meilleures expériences sur votre site Web.
Cet article a été sponsorisé par DebugBear et les points de vue présentés ici représentent le point de vue du sponsor.
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.
