Bon nombre d’outils d’analyse SEO existent. Ici, nous allons discuter de l’outil Lighthouse de Google.
Ce dernier permet plusieurs choses comme accéder aux notes de Google pour 4 critères (sur 100). Mais aussi de connaître les opportunités d’amélioration sur chacun de ces critères. Permettant ainsi d’optimiser son référencement.
Comment Lighthouse de Google fonctionne ?
Cet outil fonctionne en extension de votre navigateur. Une fois installé, vous n’avez plus qu’à l’épingler à votre barre de navigateur, comme ici entouré en rouge :
Vous vous rendez par la suite sur la page que vous souhaitez analyser, et vous appuyez sur l’icône entourée (ci-dessus) en forme de phare.
Un message comme celui-ci va apparaître :
Il ne vous restera plus qu’à appuyer sur « Generate report », et vous arriverez sur un nouvel onglet ressemblant à celui-ci :
Liens pour installer sur votre navigateur :
- Google Chrome : installer Lighthouse sur Google Chrome
- Firefox : installer Lighthouse sur Mozilla Firefox
Qui est concerné par l’utilisation de Lighthouse ?
Lighthouse est un outil complet et très détaillé. Il donne accès à des métriques que seuls des connaisseurs en développement de site Internet peuvent comprendre. Plus généralement, le langage de l’outil est assez poussé. Néanmoins, un webdesigner, un responsable Marketing « touche à tout » peut comprendre certaines remarques faites par l’outil.
Il fonctionne ainsi :
- Il affiche la note sur 100 des 4 scores
- Les métriques et critères à améliorer
- Ceux déjà améliorés.
Lighthouse est finalement l’outil d’audit rapide dont on a besoin lorsqu’on n’a pas les moyens d’avoir de consultants à temps plein pour sa boîte.
Les différents scores pour optimiser son référencement
Le score de performance est ici pondéré par plusieurs critères évalués par Google :
- First Contentful Paint (10%)
Le “First Contentful Paint” (FCP) calcule le temps d’apparition des tous premiers pixels de contenus lors du chargement d’une page Internet. Ici, il doit être le plus bas possible.
- Speed index ((SI) 10%)
Le “Speed index” calcule la vitesse d’apparition du contenu global d’une page.
Dans les améliorations proposées se trouve la réduction de Javascript non utilisé.
- Largest Contentful Paint (25%)
Le “Largest Contentful Paint” (LCP) calcule le temps d’apparition du plus gros contenu d’une page Internet (image, vidéo, bloc de texte, etc.).
Dans les améliorations proposées se trouve l’utilisation de l’extension .WEBP aux images utilisées sur une page, au lieu des traditionnelles .PNG, .JPG et .JPEG. Cela permet d’alléger le site.
- Time to Interactive (10%)
Le “Time to Interactive” (TTI) est la latence avant que le contenu qui s’affiche devienne interactif. C’est-à-dire accessible et approchable par l’utilisateur.
- Total Blocking Time (30%)
Mesuré en millisecondes, ce temps appelé “de blocage”, est l’intervalle de temps entre le tout premier pixel de contenu (FCP) et le temps d’attente à la 1ère interactivité (TTI).
- Cumulative Layout Shift (15%)
Lors du chargement d’une page, il peut arriver que :
- des polices d’écritures doivent s’agrandir en cours d’affichage,
- des images doivent se replacer,
- des boutons apparaître,
- ou encore des liens descendre car le texte du dessus a bougé.
Le “Cumulative Layout Shift” (CLS) calcule le nombre de fois que ces événements peuvent arriver sur une page.
Comme son nom l’indique, ce score indique l’accessibilité du site par le plus grand nombre. On ne se doute pas du nombre de blocages que peuvent expérimenter les utilisateurs. L’accessibilité que Google évalue se base sur 4 critères :
Les blocages et mauvaises expériences associés à ces 4 points lors d’une visite de site Internet viennent pour la plupart de handicap, invalidité. Mais aussi de facteurs externes sur personnes valides, par exemple : la lumière du jour qui peut être gênante, une main prise, etc.
La vision
Les personnes avec une déficience visuelle utilisent notamment :
- une synthèse vocale,
- des thèmes avec un contraste important,
- ou parfois même un lecteur d’écran.
Dans d’autres cas, l’utilisation du braille est nécessaire à la compréhension d’une page Internet. Cela permet notamment d’effectuer des actions, naviguer sur les pages, ou simplement lire le contenu.
Afin de s’améliorer, plusieurs actions sont possibles :
→ Jouer sur le contraste de couleurs entre le fond et l’écriture.
→ Chaque contenu sur une page doivent avoir un ID (identifiant) unique. Les images avec un attribut <alt>, un <title> pour chaque document, etc.
→ Une grande puissance de zoom, etc.
Motricité / Dextérité
Les personnes avec une déficience de motricité/dextérité peuvent avoir du mal à utiliser la souris d’ordinateur, les écrans tactiles, etc. Pour s’aider, elles utilisent des claviers spéciaux, des dispositifs d’accès vocal pour commander une action, etc.
C’est pour cela que plusieurs critères doivent être respectés, dont la bonne lisibilité des boutons d’actions/liens (CTA = Call To Action).
→ Ils doivent avoir un titre lisible où l’action est claire et bien explicitée.
→ Les icônes sans texte ou contexte peuvent gêner à la commande vocale, ou à la simple lecture par machine de l’image. Mais aussi perdre le lecteur à la compréhension du site.
Audition
Concernant les utilisateurs avec une déficience auditive, il est important que les éléments audios soient audio-descriptibles. C’est-à-dire avec des légendes et transcriptions écrites.
Cognitif
Les déficiences cognitives comprennent quant à elles, beaucoup de troubles différents et plus généraux : dysléxie, autisme, TDAH, etc. Les utilisateurs avec ces troubles ne tolèrent que très peu les flashs, les mouvements brusques entre les contenus d’une page, les couleurs vives, etc. Ils utilisent ainsi des contrastes, et thèmes spécifiques afin de notamment prévenir des maux de tête, ou parfois des crises.
Votre site doit ainsi pouvoir être lu malgré ces modifications de contrastes ou de thème, parfois sombre ou en noir et blanc.
Ce score évalue le respect de plusieurs bonnes pratiques à garder son site en bonne santé. Plus particulièrement, la santé de son code. Elles y sont plus générales que pour les autres catégories.
→ L’utilisation du protocole Internet HTTPS (HyperText Transfer Protocol Secure)
→ La mise en avant non gênante à l’expérience utilisateur (UX = User Exeperience) des permissions de géolocalisation ou simple notification.
→ Le respect des ratios d’image notamment pour être responsive (= adapté aux mobiles, tablettes, et autres appareils aux différents formats). Et toujours respecter une bonne résolution d’image.
Ce score SEO s’assure de la bonne optimisation de votre site Internet à pouvoir être « ranké » sur les moteurs de recherches comme Google. Pour cela, il y a plusieurs critères à respecter, comme :
→ Une méta description par page de votre site. Indispensable !
→ Un attribut « href » respecté pour chaque lien afin qu’ils soient tous exploitable par Google.
→ Un attribut « hreflang » adéquat à la bonne langue du site utilisée lors de sa lecture. Même pour des sites multilangues.
→ Une taille suffisamment lisible de police d’écriture. Critère également valable pour le score d’accessibilité.
→ De même pour les éléments d’interactivité qui doivent être suffisamment larges pour être utilisés par un grand nombre. La taille minimale recommandée est 48x48px (px = pixel). Il est aussi important qu’il y ait un maximum d’espace autour de ces éléments pour ne pas tromper ses utilisateurs à cliquer autre part.
Finalement, tous ces scores, et donc critères d’évaluations utilisés par Google partent d’une logique d’expérience utilisateur.
Lorsque l’on visite un site Internet, on apprécie : la vitesse d’apparition des contenus, l’aisance de lecture, les bonnes tailles de contenus, la clarté de contenu, etc.
