7 conseils pour améliorer vos scores Core Web Vitals et vos signaux d'expérience de page

En 2021, Google mettra à jour son algorithme pour intégrer l’expérience de la page en tant que signal de classement.

Le but de ce changement est de prendre en compte l’expérience utilisateur des pages renvoyées dans les SERP, plutôt que les signaux traditionnels et plus objectifs tels que le PageRank et le ciblage sur page qui ont été utilisés historiquement.

À l’approche de cette mise à jour à venir, il est essentiel de comprendre les différentes facettes de l’expérience de page et comment optimiser votre site pour chacune d’elles.

Heureusement, Google a annoncé les différents éléments qui serviront à déterminer l’expérience globale d’une page. Ceux-ci sont:

• Vitaux Web de base: Une combinaison de trois mesures de performances clés – la plus grande peinture de contenu, le délai de première entrée et le décalage de mise en page cumulatif – qui mesurent le chargement visuel, l’interactivité et la stabilité visuelle d’une page lors de son chargement pour les utilisateurs.
• Convivialité mobile: Examine à quel point les sites Web sont faciles à utiliser et à naviguer sur les appareils mobiles, y compris la lisibilité du contenu et si les liens et les éléments sur la page sont cliquables et accessibles.
• Navigation sûre: Évalue si un site présente des problèmes tels que des logiciels malveillants, du phishing et du contenu piraté, pour s’assurer que les utilisateurs peuvent naviguer en toute sécurité.
• HTTPS: Se concentre sur si la connexion d’un site Web est sécurisée et si le site est servi via HTTPS comme recommandé, ou non.
• Interstitiels non intrusifs: Garantit que le contenu crucial sur la page n’est pas obstrué pour les utilisateurs pendant qu’ils naviguent.

Pour vous aider à vous assurer que votre site est prêt pour ce changement, j’ai rassemblé quelques conseils pour optimiser votre site pour les domaines clés de l’expérience de la page.

Ceux-ci couvrent des domaines tels que le chargement visuel plus rapide et plus fluide, une meilleure convivialité mobile et une sécurité de site Web améliorée.

1. Préchargez les ressources clés pour accélérer les temps de chargement visuel

L’un des premiers indicateurs pour un utilisateur qu’une page est en cours de chargement est l’apparence d’un contenu au-dessus du pli.

C’est là que Largest Contentful Paint (LCP) et la première métrique Core Web Vitals entrent en jeu pour mesurer la vitesse à laquelle l’élément principal de la page se charge.

Pour identifier l’élément LCP d’une page, inspectez simplement la page dans Chrome DevTools et elle sera affichée dans le graphique en cascade dans le Performance languette.

Une fois que vous savez ce qu’est l’élément LCP, un moyen simple de voir la progression visuelle de la vitesse de chargement consiste à utiliser le Performance onglet dans Chrome DevTools.

Assure-toi Captures d’écran est sélectionné et commencez à profiler la page pendant son chargement.

Une fois votre profil terminé, le survol du tableau de charge en haut vous montrera une capture d’écran de la page au fur et à mesure de son chargement.

Cela vous aidera à visualiser à quelle vitesse les différents éléments de la page se chargent.

Pour accélérer le chargement de l’élément LCP et du contenu au-dessus de la ligne de flottaison, envisagez d’utiliser des méthodes telles que le préchargement pour indiquer au navigateur de récupérer ces ressources en priorité.

Exemple tiré de MDN Web Docs

2. Optimiser l’activité des threads principaux en minimisant les tâches longues

Il existe de nombreux problèmes différents dans les coulisses qui peuvent obliger un utilisateur à attendre que le navigateur lui réponde en appuyant ou en cliquant sur une page.

C’est ce qui est mesuré par la deuxième métrique Core Web Vitals, First Input Delay (FID).

Bien que cette expérience puisse être frustrante pour les utilisateurs, nous pouvons faire certaines choses pour résoudre ce problème et réduire les temps d’attente entre les interactions humaines et les réponses du navigateur.

Les tâches longues contribuent souvent à ce problème.

Essentiellement, ce sont des morceaux de code JavaScript qui bloquent le thread principal pendant une longue période de temps et provoquent le gel de la page et le fait de ne plus répondre.

Les tâches longues dans Chrome DevTools se trouvent en haut du graphique en cascade sous le Principale onglet et sont mis en évidence par un triangle rouge.

Si vous cliquez sur une tâche longue et allez dans le De bas en haut onglet, cela décompose les différentes activités qui se sont déroulées dans la tâche, telles que la compilation et l’analyse des scripts.

Le correctif requis varie en fonction des activités qui contribuent aux principaux blocages de threads, mais un correctif courant pour résoudre les tâches longues est le fractionnement du code et la diffusion de scripts en petits morceaux.

3. Réservez de l’espace pour les images et les incorporations à charger dans

La troisième métrique Core Web Vitals, Cumulative Layout Shift (CLS), examine la quantité de déplacement de la disposition visuelle d’une page lors du chargement d’une page.

Il s’agit de mesurer un domaine frustrant de l’UX que nous avons probablement tous connu:

Un utilisateur clique sur un lien particulier mais la page se déplace et finit par cliquer accidentellement dans une zone différente de la page.

L’une des causes les plus courantes d’un score CLS élevé, et donc d’une UX médiocre, est de ne pas réserver d’espaces pour les images et les ressources intégrées à charger.

Par exemple, en utilisant la fonctionnalité de captures d’écran Chrome DevTools dans le Performance onglet, nous pouvons voir que la bannière de consentement aux cookies BBC Weather n’a pas d’espace alloué pour charger.

Ainsi, une fois qu’il se charge, il pousse le contenu visible plus bas dans la fenêtre à environ 3 secondes.

Cependant, dans cet exemple de CNN, nous pouvons voir que la vidéo en vedette sur leur page d’accueil a un espace réservé dans la structure de la page, de sorte que le reste de la mise en page reste inchangé une fois que la vidéo a été chargée.

4.Assurez-vous que les modèles de pages clés sont compatibles avec les appareils mobiles

Après que le trafic mobile a dépassé le trafic de bureau en 2016, il est devenu crucial de s’assurer que les sites Web étaient optimisés pour les appareils mobiles avec lesquels un nombre croissant d’utilisateurs naviguaient.

La mise en page et la convivialité d’un site Web sur un appareil mobile peuvent faire ou défaire l’expérience de l’utilisateur.

Par exemple, les utilisateurs devraient pouvoir voir le contenu important de manière claire et accessible, sans avoir à zoomer.

Un exemple de mauvaise mise en page mobile à gauche, à côté d’un bon exemple à droite.

Il existe deux méthodes principales pour évaluer la convivialité de votre site Web sur les appareils mobiles. La première consiste à surveiller le rapport sur l’utilisabilité mobile dans Google Search Console.

Ce rapport signalera les problèmes tels que le contenu qui ne correspond pas à l’écran et le texte trop petit, et vous montrera une liste des URL concernées pour chaque problème.

La deuxième méthode consiste à exécuter des modèles de pages clés via le test d’optimisation mobile de Google.

C’est un bon moyen de vérifier ponctuellement les pages individuelles.

5. Vérifiez votre site pour les problèmes de sécurité

Outre les performances de chargement et la convivialité mobile, la sécurité du site Web jouera également un rôle dans la détermination de l’expérience de la page.

Google tient à s’assurer que les sites Web présentés dans les SERP sont sûrs pour les utilisateurs, sans risque de problèmes de sécurité.

Les principaux problèmes de sécurité à prendre en compte sont les logiciels malveillants, les logiciels indésirables, le phishing et les contenus trompeurs.

Un moyen simple de vérifier si votre site Web présente ou non des problèmes qui pourraient mettre vos utilisateurs en danger, jetez un œil à la Problèmes de sécurité rapport dans Google Search Console.

Ce rapport se trouve sous le Sécurité et actions manuelles titre.

6.Assurez-vous que les formulaires et les ressources intégrées sont servis via HTTPS

L’intégration de HTTPS en tant que signal d’expérience de page est un autre moyen par lequel Google tente d’assurer la sécurité des utilisateurs lorsqu’ils naviguent.

La diffusion de contenu nécessitant une interaction et une saisie de l’utilisateur via une connexion HTTP non sécurisée présente un risque pour les utilisateurs et les rend plus vulnérables, ainsi que leurs données.

Ceci est particulièrement important à retenir pour les formulaires où les utilisateurs saisissent des informations personnelles, telles que les paiements où les informations de paiement sont partagées.

Un exemple de connexion non sécurisée à gauche, à côté d’une page de paiement avec une connexion sécurisée à droite

Une façon de vérifier ces problèmes consiste à utiliser le Sécurité rapport dans Screaming Frog.

Dans ce rapport, vous pouvez voir le nombre d’instances de formulaires servis sur les URL HTTPS, ainsi que les problèmes de contenu mixte où un mélange de ressources de page est servi via HTTP et HTTPS.

Pour permettre à vos utilisateurs de naviguer en toute sécurité, assurez-vous que votre site dispose d’un certificat SSL à jour et migrez l’une de vos URL et ressources sur la page vers HTTPS.

7. Assurez-vous que les interstitiels ne gênent pas le contenu essentiel

Si un site Web contient des interstitiels intrusifs qui prennent beaucoup de place sur une page et empêchent les utilisateurs d’accéder à un contenu important sur la page, cela peut créer des expériences négatives et frustrantes pour les utilisateurs.

Un exemple d’interstitiel intrusif à gauche, à côté d’un pop-up non intrusif à droite

En examinant manuellement vos pages sur différents appareils ou à nouveau, à l’aide de la fonctionnalité de captures d’écran de Chrome DevTools, vous pouvez visualiser l’impact des interstitiels sur vos utilisateurs.

Pour éviter de perturber les expériences de navigation de vos utilisateurs.

Envisagez de repenser les fenêtres contextuelles et les interstitiels afin qu’ils n’obstruent pas le contenu important de la page, et aussi pour que les utilisateurs n’aient pas à les fermer physiquement pour pouvoir continuer leur parcours sur votre site.

Conclusion

En suivant ces conseils et en intégrant l’optimisation de l’expérience de page dans votre stratégie de référencement, vous pouvez contribuer à améliorer les signaux d’expérience de page de votre site.

Cela aura des effets positifs à la fois à court et à long terme.

Non seulement l’amélioration de l’expérience de la page aidera à pérenniser les performances de votre site Web en le plaçant dans la meilleure position possible pour capitaliser sur la prochaine mise à jour de l’algorithme, mais cela garantira également des expériences positives pour les utilisateurs de votre site Web maintenant.

L’optimisation de l’expérience de page ne consiste pas à répondre à certains critères pour les moteurs de recherche.

Il s’agit de fournir les meilleures expériences possibles aux vrais utilisateurs.

Et c’est un objectif final auquel nous pouvons tous souscrire.

Plus de ressources:

Crédits d’image

Toutes les captures d’écran prises par l’auteur, novembre 2020