Google considère l’expérience de page, ou expérience utilisateur pour classer les pages dans son moteur de recherche. 

Différents signaux valident si une page web est optimisée pour les appareils mobiles ou si le site Web est sécurisé. 

Dans sa démarche d’offrir un “meilleur Web” et des expériences toujours plus riches et centrées sur l’utilisateur, Google a ouvert la porte avec de nouveaux éléments qui influencent le référencement.

Ces signaux portent sur la rapidité de chargement d’une page, la réactivité et la stabilité visuelle. Ils portent le doux nom, de Core Web Vitals et seront pris en compte dans l’algorithme de Google en 2021.

Il est temps pour vous de comprendre ce que signifie la page expérience pour Google, comment l’analyser et finalement améliorer les performance de votre site web

Table des matières

Google et l’expérience utilisateur avant tout

La mission de Google est de fournir la meilleure expérience aux utilisateurs de son moteur de recherche. 

On peut penser ce que l’on veut, mais Google façonne le Web et invite (ou force) les propriétaires de sites Web à suivre les “bonnes” recommandations.

Par exemple, si demain Google suggère que les sites Web doivent arborer un fond rouge, tous les sites auront un fond rouge. 

Mais bien sûr Google ne va pas nous demander de faire un truc qui n’a pas de sens…

Google Red Background is a ranking factor

La mission initiale de Google (en 1998) était d’organiser l’information mondiale et de la rendre universellement accessible et utile.

Comme l’a rappelé le moteur de recherche sur son blog à l’occasion de ses 20 ans, les principes fondamentaux du “Search” sont restés les mêmes, et voici les plus importants:

  • Avant tout, Google se concentre sur l’utilisateur et s’efforce de répondre aux besoins d’information.
  • Les informations fournies doivent être données rapidement, elles doivent être pertinentes et de la plus haute qualité. 

Ceci nous indique que pour optimiser du contenu pour le référencement (sur Google) il faut mettre l’utilisateur au centre et offrir des contenus complets, avec une information structurée et aussi une excellente expérience de page.

Google veut des pages de qualité et qui se chargent vite sur son moteur de recherche.

Regardons en détail le point au sujet de l’expérience de page, et ce que Google entend par là.

C’est quoi l’expérience de page dans les yeux Google

L’expérience de page ou Page Experience pour les anglophones correspond à un ensemble de signaux mesurés par Google afin de vérifier si votre page fournit une bonne expérience lors de la visite d’un internaute.

Par exemple, Google essaie de comprendre si votre page se charge vite et si elle est optimisée pour une navigation sur mobile. 

L’ensemble des signaux suivants sont pris en compte pour mesurer “une bonne expérience de page” dans la recherche Google :

  • Mobile-friendly:  Votre page est optimisée pour un affichage sur téléphone portable
  • Safe-browsing (navigation sécurisée): Votre page ne contient pas de contenu malveillant (malware) ou trompeur (phishing).
  • HTTPS: La page est servie en HTTPS.
  • Contenu facilement accessible: Votre page ne doit pas avoir d’éléments qui obstruent votre contenu principal comme avec l’affichage d’un popup qui couvre l’essentiel du contenu immédiatement après que l’utilisateur soit arrivé sur votre site.
  • Core Web Vitals (Signaux Web essentiels): La page offre une bonne expérience utilisateur, en se concentrant sur les aspects du chargement, de l’interactivité et de la stabilité visuelle.

Les signaux comme Mobile-Friendly, HTTP, la navigation sécurisée et non obstruée sont déjà pris en mis en oeuvre par la plupart sites se classant aux premiers rangs de Google Search.

Cette étude de 2018 montre que 75% des sites Web sont désormais mobile friendly.

Mais est-ce que tous ces sites offrent vraiment une expérience exceptionnelle?

À partir de 2021, les Core Web Vitals (ou Signaux Web essentiels si vous préférez) seront aussi mesurés par Google pour définir l’expérience de page et tiendront compte de la rapidité d’un site Web.

Les signaux de l'experience de page pour Google

Regardons en détail ce qui se cache derrière les acronymes LCP, FID et CLS et qui constituent les métriques de base des Core Web Vitals.

Core Web Vitals, bientôt vital pour le SEO?

Le but des Core Web Vitals est de mesurer l’expérience réelle de l’utilisateur. Ces signaux comprennent les performances de chargement, l’interactivité et la stabilité visuelle de la page.

Les Core Web Vitals sont constitués de 3 signaux majeurs:

Nous resterons avec les termes anglais tout au long de l’article, mais pour ceux qui aiment bien les traductions voici comment on pourrait traduire les Core Web Vitals en Français:

  • Largest Contentful Paint: Temps de rendu du plus grand élément de contenu visible 
  • First Input Delay: Temps pour la première interaction
  • Cumulative Layout Shift: La stabilité visuelle
Core Web Vitals

C’est quoi les Core Web Vitals et ils mesurent quoi exactement?

Allons voir en détail ce qu’il se cache derrière Largest Contentful Paint (LCP), First Input Delay (FID) et Cumulative Layout Shift (CLS).

Largest Contentful Paint (LCP)

Largest Contentful Paint (LCP) mesure les performances de chargement de la page. Pour être plus précis LCP mesure la vitesse de chargement perçue, c’est à dire combien de temps votre page prend pour afficher les premiers éléments important pour l’utilisateur.

Cela ne mesure pas le chargement complet de la page. Il faut bien comprendre la différence.

Pour offrir une bonne expérience à l’utilisateur, les sites doivent s’efforcer de faire en sorte que la plus grande partie du contenu initialement visible s’affiche en 2,5 secondes.

Bien sûr pour être dans les normes de Google. Mais je pense qu’on est tous d’accord que c’est plus agréable un contenu qui s’affiche directement – personne n’aime voir des pages blanches.

Une page Web s’affiche par étape. Ainsi lors des premières étapes le haut de votre page se charge, une fois que les éléments principaux affichés, le LCP sera atteint. Voilà !

Largest Contentful Paint (LCP) mesure les performances de chargement de la page

Un LCP rapide permet de “rassurer” l’utilisateur quant à l’intérêt de votre page. On sait que les premières secondes sont clé pour éviter un “bounce back”.

Attention Google prend en compte le temps passé (Dwell Time) comme signal de référencement, donc il vaut mieux garder un visiteur sur son site.

First Input Delay (FID)

Le First Input Delay (FID) mesure la réactivité du chargement de la page. Il mesure le temps écoulé entre le moment où un utilisateur interagit pour la première fois avec votre page (c’est-à-dire lorsqu’il clique sur un lien ou un bouton) et le moment où le navigateur est effectivement capable de répondre à cette interaction.

Donc si lors d’une interaction avec votre page comme le clic sur un bouton, la page met moins de 100ms à réagir, vous avez un bon FID.

On peut considérer que le FID mesure la frustration de l’utilisateur. En effet, il n’y a rien de plus frustrant que l’envoi d’un formulaire ou le clic sur un bouton qui met des secondes à déclencher l’étape d’après.

Zéro frustration égale un FID proche de zéro. Ou l’inverse…

Cumulative Layout Shift (CLS)

Le Cumulative Layout Shift (CLS) mesure la stabilité visuelle et la fréquence à laquelle les utilisateurs subissent des changements de mise en page inattendus.

Un changement visuel se produit chaque fois qu’un élément visible de votre page change de position.

Par exemple si vous lisez un paragraphe et que soudainement celui-ci disparaît et se voit remplacer par un bouton (qui vient de finir son chargement). Il vous faut scroller plus bas pour reprendre votre lecture.

Le calcul du CLS se base sur différentes examinations et mouvements d’éléments au sein du navigateur pendant le chargement de la page.

Il faut avoir un score proche de zéro pour être considéré comme bon.

Les Core Web Vitals résumés

  • LCP: Le temps pour voir les premiers éléments de la page, donne un sentiment de rapidité.
  • FID: Le temps pour la première interaction (comme un clic), ceci indique une potentielle frustration de l’utilisateur si c’est trop lent.
  • CLS: La stabilité visuelle afin d’éviter les “il est passé où le paragraphe que je lisais” par votre visiteur.

L’impact des Core Web Vitals sur le SEO

Tout d’abord, Google n’utilise pas encore les Core Web Vitals dans son algorithme de recherches. Ces signaux seront pris en compte par le Search en 2021 et la date exacte n’est pas encore connue.

Les contenus les plus pertinents seront toujours les premiers

Google indique également que les pages contenant les meilleures informations dans l’ensemble, même si l’expérience des pages est inférieure auront un meilleur classement.

La qualité du contenu (et certainement le nombre de backlinks) auront pour l’instant la priorité sur l’expérience de page.

La qualité du contenu a pour l’instant la priorité sur l’expérience de page.

Cependant, dans les cas où de nombreuses pages peuvent être similaires en termes de pertinence, les pages avec la meilleure expérience se classeront devant. 

Dans notre monde de l’information en constante compétition, la page expérience pourrait être le facteur différenciateur dans l’avenir.

Les Top Stories sur mobile

Actuellement, les contenus positionnés dans les Top Stories sur mobile sont exclusivement au format AMP. 

Pour rappel, le format AMP offre des mécanismes permettant un chargement rapide des pages sur mobile, et ce format est aussi soutenu directement par Google.

Les Top Stories sur mobile

Google a également indiqué que les Top Stories accueilleront tous types de pages lorsque les Core Web Vitals seront un signal utilisé par le Search. 

Ce qu’il faut comprendre : Seules les pages avec une excellente expérience utilisateur et un bon temps de chargement seront éligibles pour la section Top Stories, sans forcément utiliser la technologie AMP.

Les outils pour tester et mesurer l’expérience de page et les Core Web Vitals

Voici le tableau récapitulant les outils ou méthodes pour tester les différents signaux déjà utilisés par Google et liés à l’expérience de page.

SignalOutil de test
Mobile FriendlyEntrez l’URL de votre site ou page dans le Mobile-Friendly Test
Safe-browsing (navigation sécurisée)Vérifiez si votre site est sécurisé ici Security Issues report – Search Console Help
HTTPSOuvrez votre site avec Chrome, et si vous voyez un cadenas à côté de l’URL cela signifie que votre site est en HTTPS.
Contenu facilement accessibleAucun outil pour vous aider, mais vous pouvez pratiquer des tests manuels.

Concernant les Core Web Vital, il y a un autre ensemble d’outils que nous allons voir en détails.

Les outils pour mesurer les Core Web Vitals

Web Vitals

Web Vitals est une extension Chrome qui permet de voir en un coup d’oeil comment votre page est mesurée contre les metric LCP, FID, CLS.

Web Vitals est une extension Chrome

Lighthouse

Lighthouse est un outil d’audit automatisé et produit un rapport de diagnostics pour améliorer l’expérience des utilisateurs en vous indiquant les problèmes trouvés sur votre page.

Lighthouse est directement intégré dans les outils de développement Chrome, sous le panneau « Audits ». (Pour ouvrir les outils de développement Chrome, cliquez droit sur une page et ensuite sélectionner “Inspecter”.)

Il est possible d’installer Lighthouse via une extension chrome.

Depuis Lighthouse 6.0, les paramètres liés au Core Web Vitals comme LCP et CSL sont disponibles dans le rapport depuis la section performance.

Lighthouse

Lighthouse indique des opportunités d’amélioration, et comme vous pouvez le voir j’ai du travail à faire sur les performances de ma page.

Page Speed Insights

Page Speed Insights est accessible depuis ce lien et vous donnera des informations la vitesse de chargement d’une page web afin d’optimiser ses performances.

Page Speed Insights

Le Chrome UX Report (CrUX)

Le Chrome UX Report (CrUX) est un ensemble de données publiques sur l’expérience réelle des utilisateurs sur des millions de sites web. 

Ces données sont récupérées par Google lorsqu’un utilisateur accepte d’envoyer des statistiques via Chrome ou autres services. (Vous savez cette checkbox dont on ne connaît pas l’utilité, maintenant on sait…)

Cette base de données est accompagnée d’une API qui permet à tout développeur de récupérer des données de performance et pour n’importe quel site : votre site ou le site web du concurrent.

C’est le seul moyen fiable pour savoir comment vos utilisateurs ressentent les performances de votre site.

Il faudra des notions de développement afin d’exploiter cette base de données et l’intégrer dans vos processus de diagnostic de votre site web.

Pour commencer avec l’API CrUX, c’est par ici.

Le panel Performance du Chrome DevTools

Le panneau Performance de Chrome DevTools comporte une nouvelle section Expérience qui peut vous aider à détecter les changements de présentation inattendus.

Cette section est utile pour trouver et corriger les problèmes d’instabilité visuelle de votre page qui contribuent au décalage cumulatif de la mise en page (CLS).

Le panel Performance du Chrome DevTools

Les signaux web essentiels depuis Google Search Console

Un rapport sur les « Signaux web essentiels » est disponible depuis Google Search Console.

Ce rapport vous indique les groupes de pages de votre site qui nécessitent une attention particulière, sur la base de données réelles provenant du CrUX.

web.dev

web.dev vous permet de mesurer les performances de votre page dans le temps. Les données sont les même que celle du rapport Page Speed Insight.

Note sur les données réelles vs les données simulées

Vous avez remarqué que les outils fournissent des données réelles et/ou des données simulées (Lab Tools vs. Field Tools).

Les données réelles sont celles issues des statistiques collectées par Google et recueillent des mesures anonymes sur les temps de performance des personnes qui visitent vos pages. 

Les données réelles sont donc une meilleure indication que celle simulées.

Maintenant que vous connaissez tous les outils pour tester les performances, essayons de voir comment les utiliser de manière cohérente.

Optimiser la user experience et les Core Web Vitals étape par étape

Pour débuter avec l’optimisation de votre site web, Google recommande de suivre les étapes suivantes:

Etape 1 – Commencer avec Google Search Console 

Allez dans Google Search Console et ouvrez le rapport sur les “Core Web Vitals” afin d’identifier les pages qui nécessitent une attention particulière.

Les pages sont regroupées par type de problème. Ici on peut voir que toutes les pages de mon site ont un LCP (première affichage) un peu trop élevé.

Comme j’utilise un CMS (WordPress), si je règle le problème pour une page, toutes les pages devront voir le problème résolu.

Etape 1 - Commencer avec Google Search Console

Etape 2 – Analyser les pages avec PageSpeed Insights

Depuis la Search Console vous pouvez cliquer directement sur le bouton ouvrant PageSpeed Insights.

Vous trouverez ainsi un premier rapport et des suggestions d’amélioration.

Etape 2 - Analyser les pages avec PageSpeed Insights

Dans mon cas il semblerait des ressources CSS et Javascript bloquent la première visualisation de ma page. Je devrais voir en détail ce qui se passe de ce coté la.

Etape 3 – Plus de données avec Lighthouse

Lancez maintenant le test avec Lighthouse. Certains conseils d’amélioration affichés par Lighthouse se croisent avec ceux de PageSpeed Insight. 

Vous trouverez également des informations supplémentaires.

Etape 3 - Plus de données avec Lighthouse

Etape 4 – Prioritiser avec web.dev

Vous pouvez également lancer l’audit de votre page via web.dev/measure. Ce rapport vous donne une vue des éléments par ordre de priorité.

C’est pratique quand on ne sait pas par quoi commencer.

Etape 4 - Prioritiser avec web.dev

Etape 5 – Régler les problèmes de votre site

Suite à cette première analyse, vous avez maintenant identifié de nombreux problèmes à régler.

Chaque site web a ses propres problèmes. Essayons d’étudier les plus courants et aussi de définir les bonnes pratiques d’optimisation d’un site web.

Conseils et bonnes pratiques pour l’optimisation de votre site web

Les problèmes d’optimisation des sites web sont souvent dûs à un problème technique. 

Pour les problèmes liés à la page (côté client), comme le CSS et Javascript, un développeur web sera utile pour modifier le code.

Pour les problèmes liés à votre CMS ou infrastructure (côté serveur), il faudra un développeur backend ou un DevOps.

Vous comprendrez qu’il faut un certain bagage technique pour résoudre la plupart des problèmes d’optimisation, ou contacter un spécialiste en développement web.

Néanmoins certains points d’amélioration sont assez simples. Parcourons-les en premiers.

Optimiser les problèmes de performance web pour les non développeurs

Voici une liste de points qui sont accessibles à tout le monde:

  • Compressez vos images 
  • Remplacez les GIF animés par des vidéos pour accélérer le chargement des pages
  • Utilisez des formats d’image de nouvelle génération comme WebP ou JPEG 2000 (mais malheureusement ces formats ne sont pas encore supporté par tous les navigateurs)
jpg vs jpg2000

Ce sont des bonnes pratiques qui pourront déjà optimiser votre site web.

Allez plus loin avec ce guide sur les images.

Optimiser les problèmes de performance web pour les utilisateurs avancés

Si vous êtes développeur ou un utilisateur aguerri, qui n’a pas peur de mettre les mains dans le système, voici quelques recommandations et bonnes pratiques:

  • Réduire la taille de chaque page à moins de 500KB (page + toutes les ressources).
  • Maintenir le nombre total de ressources par page à moins de 50 (idéal pour les mobiles).
  • Envisager la mise en œuvre de page AMP, qui peut résoudre de nombreux problèmes de chargement sur les téléphones mobiles
  • Lazyloader vos images
  • Utiliser un CDN pour vos images et autres assets

Et pour continuer avec les points critiques qui nécessitent le support d’un développeur, détaillons des problèmes courants liés aux performances.

Utiliser une image pour desktop et une autre pour mobile

Il est possible de créer des variations d’une même image et de les indiquer dans le code HTML. Ainsi en fonction de la taille de l’écran, la bonne image à la bonne taille sera affichée.

<img src="flower-large.jpg" srcset="flower-small.jpg 480w, flower-large.jpg 1080w" sizes="50vw">

Eliminer les ressources bloquantes

Il y a certains Javascript et CSS qui ne sont pas utiles lors des premiers instants du chargement de votre page. 

Identifier ces ressources avec la Chrome DevTools depuis le tab Coverage. Celui-ci vous indique les ressource qui sont exécutées et celles qui sont “juste” chargées. 

Les ressources “juste”chargées pourront être exécutées plus tard avec l’attribut async or defer.

Ainsi les premiers éléments se chargeront plus rapidement et votre LCP sera amélioré.

Enlever les CSS et JS inutiles

Dans vos fichiers CSS et JS il y a des bouts de code qui ne sont jamais utilisés, et malgrés cela ils sont “lus” entièrement lors du chargement de votre page. Ce sont donc des données chargées et traitées inutilement.

Le tab Coverage de la Chrome DevTools vous sera encore utile pour comprendre le pourcentage de code non nécessaire dans vos fichiers CSS ou Javascript.

Ensuite il faudra aller vérifier dans chaque fichier le code, et l’enlever si nécessaire.

Compresser vos ressources du côté serveur

Lighthouse détecte les fichiers qui n’ont pas de compression (content-encoding) de type br, gzip ou deflate. 

Pour ces fichiers il est recommandé de les compresser. Cette opération doit se faire du coté serveur comme par exemple dans votre CMS.

Minifier vos CSS et JS

Le CSS et JS peuvent être minifier, c’est à dire afficher sur une ligne et donc prendre moins de place. C’est une opération assez simple et peut être réalisée avec un outil en ligne

Minifier vos CSS et JS

Inclure toujours des attributs de taille sur vos images et éléments vidéo

Cette approche garantit que le navigateur peut allouer la bonne quantité d’espace dans le document pendant le chargement de l’image.

Tester avant mettre en ligne vos changements

Le dernier conseil: tester correctement vos modifications. Ne changez pas directement sur votre site web de production.

Pour résumer

L’amélioration de la page expérience est un sujet assez complexe et implique des connaissances techniques pour pouvoir le résoudre.

Vous devez vous demander si cela en vaut la peine et investir du temps dans une amélioration qui n’influence pas forcément votre référencement.

Gardez en tête que Google mise tout sur l’expérience utilisateur, et que sur le long terme ses facteurs prendront de l’ampleur. 

Lors de vos prochains projets, commencez dès le début à penser optimisation.

Note du rédacteur: Aucune optimisation n’a encore été apporté à mon site web, mais ces recherches m’ont donné envie d’aller plus loin. Dès que je découvre des nouvelles astuces, outils ou plugins WordPress pour aider avec l’optimisation, je mettrais à jour cette page. Donc si le sujet vous intéresse, rejoignez la newsletter pour rester informer.

(2 commentaires)

Join the conversation