Comment auditer JavaScript pour le référencement

JavaScript est présent partout sur le web. Étant donné que HTML et CSS sont de nature statique, JavaScript a été largement adopté pour fournir des fonctionnalités dynamiques côté client, ce qui n'est qu'une façon élégante de dire qu'il est téléchargé et exécuté dans un navigateur.

Les exigences du langage sont élevées, avec d'innombrables frameworks/bibliothèques et autres variantes, tous en développement rapide. Il est donc courant – et peut-être inévitable – que la technologie dépasse régulièrement la prise en charge des moteurs de recherche et, par extension, les meilleures pratiques dans le domaine du référencement . Avant d'auditer JavaScript, vous devez garder à l'esprit qu'il existe des problèmes courants susceptibles de se produire et que vous devrez faire des compromis pour satisfaire tous les besoins.

Nous avons divisé notre processus d'audit JavaScript en cinq domaines clés, vous permettant de déterminer :

1. Si un site s'appuie fortement sur JavaScript
2. Si les actifs JavaScript sont mis en cache/mis à jour de manière appropriée
3. Quel est l'impact de JavaScript sur les performances du site ?
4. Si les fichiers JavaScript sont récupérés correctement et efficacement
5. Problèmes JavaScript situationnels : routage de défilement infini et redirections

Mais avant de plonger dedans…

Un rapide 101 sur la structure du site Web

Les sites web actuels sont composés de trois technologies principales :

Langage de balisage hypertexte (HTML)

C'est la structure sur laquelle tout le reste repose, avec une hiérarchie d'éléments représentant tout, des conteneurs génériques au texte, aux liens, aux médias et aux métadonnées.

Il est simple, robuste et sémantiquement ciblé pour permettre une large gamme d'applications.

Bien que les navigateurs formatent raisonnablement le HTML brut, la présentation est mieux gérée par…

Feuilles de style en cascade (CSS)

Il s'agit de la couche de présentation où le HTML peut être stylisé et réorganisé de diverses manières .

Tout élément HTML peut être ciblé, déplacé, coloré, redimensionné et même animé. En effet, il s'agit de la réalisation d' un site web design .

Cependant, à l'exception de certaines fonctionnalités limitées, il reste statique, nous amenant à…

Javascript (JS)

Il s'agit de la couche dynamique qui peut manipuler activement HTML et CSS en réponse à des événements tels que l'interaction de l'utilisateur, l'heure ou les changements de serveur. Cela ouvre massivement ce qui peut être réalisé en termes d' expérience utilisateur .

Lorsque vous visitez un site Web, votre navigateur télécharge le fichier HTML, puis le lit, interprétant et exécutant chaque partie l'une après l'autre. Les ressources externes (CSS/JS/médias/polices) sont téléchargées et les éléments sont assemblés conformément aux directives et instructions associées.

Ce processus consistant à rassembler les éléments constitutifs d'un site Web pour produire le résultat final s'appelle le rendu . Ceci est très pertinent pour le référencement, car Google fera quelque chose de similaire aux navigateurs (avec quelques étapes d'analyse supplémentaires) et en tiendra compte lors du classement. En effet, Google tente de reproduire l'expérience de l'utilisateur.

Comment Google gère-t-il JavaScript ?

Google affichera JavaScript. En d'autres termes, il chargera vos actifs JavaScript avec HTML et CSS pour mieux comprendre ce que les utilisateurs verront, mais il y a deux considérations de base :

1. Google souhaite utiliser le moins de ressources possible pour explorer les sites.
2. Plus de JavaScript signifie que plus de ressources sont nécessaires pour le rendu.

En raison de ces problèmes, le service de rendu Web de Google est conçu pour fonctionner aussi efficacement que possible et adopte donc les stratégies suivantes :

• Googlebot affichera toujours une page qu'il explore pour la première fois. À ce stade, il décide s'il doit rendre cette page à l'avenir. Cela aura un impact sur la fréquence d'affichage de la page lors des futures explorations.
• Les ressources sont analysées pour identifier tout ce qui ne contribue pas au contenu essentiel de la page. Ces ressources peuvent ne pas être récupérées.
• Les ressources sont mises en cache de manière agressive pour réduire les demandes réseau, de sorte que les ressources mises à jour peuvent être ignorées initialement.
• L'état n'est pas conservé d'une page à l'autre lors du crawl (ex : les cookies ne sont pas stockés, chaque page est une « nouvelle » visite).

Le point principal ici est que, dans l'ensemble, Google prendra plus de temps pour indexer le contenu rendu via JavaScript, et peut parfois manquer des choses.

Alors, combien de contenu important est affecté ? Quand quelque chose est changé, combien de temps faut-il pour être reflété dans les SERP ? Gardez ces questions à l'esprit tout au long de l'audit.

Un guide en cinq étapes pour un audit SEO JavaScript

Chacun aura sa propre façon d'effectuer un audit de référencement JavaScript, mais si vous ne savez pas par où commencer ou si vous pensez qu'il vous manque quelques étapes de votre processus actuel, lisez la suite.

1. Comprendre à quel point un site dépend de JavaScript

Dans un premier temps, il est important de déterminer si le site s'appuie fortement sur JavaScript et si oui, dans quelle mesure ? Cela vous aidera à déterminer la profondeur de votre analyse ultérieure.

Ceci peut être réalisé via plusieurs méthodes :

• Que ferait JavaScript ?
• Désactiver JavaScript localement via Chrome
• Vérifier manuellement dans Chrome
• Wappalyzer
• Grenouille hurlante

Que ferait JavaScript (WWJSD)

Un outil fourni par Onely qui fournit des comparaisons simples et côte à côte d'une URL en présentant des captures d'écran du code HTML, des balises méta et des liens, avec et sans JavaScript.

Réfléchissez bien si vous souhaitez vérifier sur mobile ou sur ordinateur. Bien que les principes de la priorité au mobile s'appliquent généralement, JavaScript a tendance à être davantage utilisé dans le cadre d'une expérience de bureau. Mais idéalement si vous avez le temps, testez les deux !

Étapes pour analyser l'utilisation de Javascript dans WWJSD :

1. Visitez WWJSD
2. Choisissez mobile ou ordinateur
3. Entrer l'URL
4. Soumettre le formulaire

Désactiver localement via Chrome

Le navigateur Chrome vous permet de désactiver tout code JavaScript sur place et de tester directement :

Étapes pour analyser l'utilisation de JavaScript avec Chrome :

1. Appuyez sur F12 pour ouvrir devtools et sélectionnez l'onglet Éléments s'il n'est pas déjà ouvert
2. Cmd+Maj+P (ou Ctrl+Maj+P)
3. Tapez "désactiver" et sélectionnez *Désactiver JavaScript*
4. Actualiser la page
5. N'oubliez pas de réactiver

Vérifier manuellement dans Chrome

Il existe deux façons de vérifier le code HTML source dans Chrome, car elles fournissent des résultats légèrement différents.

L'affichage de la source affichera le HTML tel qu'il a été initialement reçu, tandis que l'inspection de la sourceprend effet les modifications dynamiques - tout ce qui est ajouté par JavaScript sera apparent.

Source de visualisation : Source d'inspection : Il est préférable de l'utiliser comme un moyen rapide de vérifier un framework JavaScript complet. Le téléchargement initial de la source sera plus court et manquera probablement la plupart du contenu, mais l'inspecteur sera plus complet.

Essayez de rechercher dans les deux un texte que vous soupçonnez d'être chargé dynamiquement - les en-têtes de contenu ou de navigation sont généralement les meilleurs.

Étapes pour analyser manuellement l'utilisation de JavaScript avec Chrome :

Voir la source:

1. Clic droit dans la fenêtre du navigateur
2. Sélectionnez Afficher la source

Inspectez la source :

1. Appuyez sur F12 pour ouvrir les outils de développement
2. Sélectionnez l'onglet Éléments s'il n'est pas déjà ouvert

Wappalyzer

Il s'agit d'un outil qui fournit une ventilation de la pile technologique derrière un site. Il y a généralement une bonne quantité d'informations, mais nous recherchons spécifiquement des frameworks JavaScript :

Étapes d'utilisation de Wappalyzer pour analyser l'utilisation de JavaScript

1. Installer l' extension Wappalyzer Chrome
2. Visitez le site que vous souhaitez inspecter
3. Cliquez sur l'icône Wappalyzer et examinez la sortie

️ Sachez que ce n'est pas parce que quelque chose n'est pas répertorié ici que cela confirme à 100 % qu'il n'est pas utilisé !

Wappalyzer s'appuie sur les empreintes digitales pour identifier un cadre. Autrement dit, trouver des identifiants et des modèles uniques à ce cadre.

Si des efforts ont été déployés pour les modifier, Wappalyzer n'identifiera pas le cadre. Il existe d'autres moyens de confirmer cela qui sortent du cadre de ce document. Demandez à un dev.

Grenouille hurlante

Il s'agit d'une analyse approfondie de la vérification de la visibilité JavaScript. Lorsque le rendu JavaScript est activé , Screaming Frog peut fournir une ventilation complète de l'impact de JavaScript sur un site exploré, y compris la couverture du contenu/lien rendu et les problèmes potentiels. Étapes à suivre pour utiliser Screaming Frog pour analyser les problèmes de Javascript :

1. Dirigez-vous vers le menu Configuration
2. Sélectionnez *Araignée*
3. Sélectionnez l'onglet Rendu
4. Choisissez JavaScript dans la liste déroulante
5. (facultatif) Réduisez le délai d'attente AJAX et décochez-le pour améliorer les performances d'exploration en cas de difficulté

2.Utilisez une actualisation forcée du cache

La mise en cache est un processus qui permet aux sites Web d'être chargés plus efficacement. Lorsque vous visitez une URL pour la première fois, tous les actifs requis sont stockés à divers endroits, tels que votre navigateur ou votre serveur d'hébergement. Cela signifie qu'au lieu de reconstruire des pages à partir de zéro à chaque visite, la dernière version connue d'une page est stockée pour des visites ultérieures plus rapides.

Lorsqu'un fichier JavaScript a été mis à jour, vous ne voulez pas que la version en cache soit utilisée. Google met également en cache de manière assez agressive, il est donc particulièrement important de s'assurer que la version la plus récente de votre site Web est rendue.

Il existe plusieurs façons de gérer cela, comme l'ajout d'une date d'expiration au fichier mis en cache, mais généralement la meilleure solution "à la demande" consiste à utiliser une actualisation forcée du cache .

Le principe est simple : supposons que vous ayez un fichier JavaScript appelé 'main.js' qui contient l'essentiel du JavaScript du site. Si ce fichier est mis en cache, Google utilisera cette version et ignorera toutes les mises à jour ; au mieux, la page rendue sera obsolète ; au pire, il sera cassé.

La meilleure pratique consiste à modifier le nom du fichier pour le distinguer de la version précédente. Cela implique généralement une sorte de numéro de version ou la génération d'un code en prenant les empreintes digitales du fichier.

Pour y parvenir, il existe deux stratégies :

1. Quelques fichiers avec l'horodatage "Dernière mise à jour" ajouté en tant que variable d'URL.
2. Un code unique utilisé dans le nom de fichier lui-même - 'filename.code.js' est un modèle courant comme ci-dessous :

Étapes à suivre:

1. Appuyez sur F12 pour charger les outils de développement Chrome
2. Allez dans l'onglet 'Réseau'
3. Appliquer des filtres
   • Dans le champ *Filter*, filtrez le domaine principal comme ceci : `domain:*.website.com`
   • Cliquez sur le filtre JS pour exclure les fichiers non-JS
4. Examinez la liste des fichiers et évaluez - demandez l'aide du développeur si nécessaire

️ Bien que les fichiers JavaScript pertinents se trouvent normalement sur le domaine principal, dans certains cas, ils peuvent être hébergés en externe, comme sur un réseau de diffusion de contenu (CDN).

Sur les sites hébergés par WP Engine, vous devrez peut-être filtrer '*.wpenginepowered.com' au lieu du domaine principal, comme dans l'exemple ci-dessus. Il n'y a pas de règles strictes ici - passez en revue les domaines dans la liste JS (non filtrée) et utilisez votre meilleur jugement. Voici un exemple de ce que vous pourriez voir : Si la colonne Domaine n'est pas visible, cliquez avec le bouton droit sur un en-tête de colonne existant et sélectionnez Domaine.

3. Identifiez l'impact de JS sur les performances du site

En ce qui concerne les performances du site, il y a quelques points à surveiller.

Délai de traitement

Cela est lié à Core Web Vitals (CWV), dont certains sont représentés dans la visualisation des horaires ci-dessous, qui examine des mesures telles que la plus grande douleur de contenu (LCP), le changement de mise en page cumulé (CLS) et le premier délai d'entrée (FID).

Plus précisément, vous êtes intéressé par les temps de chargement et de script dans le résumé. Si ceux-ci sont excessifs, c'est peut-être un signe de scripts volumineux et/ou inefficaces.

La vue de la cascade fournit également une visualisation utile de l'impact de chaque CWV, ainsi que d'autres composants du site. Pas:

1. Appuyez sur F12 pour ouvrir les outils de développement Chrome
2. Allez dans l'onglet 'Performances'
3. Cliquez sur le bouton d'actualisation dans le panneau
4. Passez en revue l'onglet Résumé (ou Bottom Up si vous voulez plonger en profondeur)

Compression

Il s'agit d'une vérification simple mais importante ; il garantit que les fichiers sont servis efficacement.

Un hôte correctement configuré compressera les actifs du site afin qu'ils puissent être téléchargés par les navigateurs le plus rapidement possible. La vitesse du réseau est souvent le point d'étranglement le plus important (et le plus variable) du temps de chargement du site. Pas:

1. Appuyez sur F12 pour ouvrir les outils de développement Chrome
2. Allez dans l'onglet 'Réseau'
3. Appliquer des filtres
4. Dans le champ 'Filter', filtrez le domaine principal comme suit : `domain:*.website.com`
5. Cliquez sur le filtre JS pour exclure les fichiers non-JS
6. Vérifiez le contenu de la colonne "Content-Encoding". S'il lit 'gzip', 'compress', 'deflate' ou 'br', la compression est appliquée.

️ Si la colonne d'encodage du contenu n'est pas visible :

1. Faites un clic droit sur une colonne existante
2. Passez la souris sur "En-têtes de réponse"
3. Cliquez sur "Encodage du contenu"
4. Couverture

Une augmentation des frameworks d'actifs riches en fonctionnalités (par exemple, Bootstrap, Foundation ou Tailwind) permet un développement plus rapide, mais peut également conduire à de gros morceaux de JavaScript qui ne sont pas réellement utilisés.

Cette vérification permet de visualiser la quantité de chaque fichier qui n'est pas réellement utilisée sur l'URL actuelle.

️ Sachez que du JavaScript inutilisé sur une page peut être utilisé sur d'autres !Ceci est principalement destiné à guider, indiquant une opportunité d'optimisation. Pas:

1. Appuyez sur F12 pour ouvrir les outils de développement Chrome
2. Cmd+Maj+P (ou Ctrl+Maj+P)
3. Cliquez sur "Afficher la couverture"
4. Cliquez sur le bouton d'actualisation dans le panneau
5. Appliquer des filtres
   • Dans le champ *Filtre*, filtrez le domaine principal. Pas de caractères génériques ici ; 'website.com' fera l'affaire.
   • Sélectionnez JavaScript dans la liste déroulante à côté de l'entrée de filtre

Minification

JavaScript est initialement écrit d'une manière lisible par l'homme, avec un formatage et des termes faciles à raisonner. Les ordinateurs ne s'en soucient pas - ils interprètent un fichier entier comme une seule ligne de code et ne se soucient pas du nom des choses tant qu'elles sont référencées de manière cohérente.

Il est donc bon de réduire les fichiers à la plus petite taille possible. C'est ce qu'on appelle la minification et c'est une pratique courante, mais encore parfois manquée.

Repérer les différences est trivial : ^ Minifié = bon ! ^ Non minifié = pas bon !

️ Cela concerne principalement les sites en PRODUCTION.Les sites en développement/test ont tendance à avoir des fichiers non minifiés pour faciliter la recherche des bogues.

Pas:

1. Appuyez sur F12 pour ouvrir les outils de développement Chrome
2. Allez dans l'onglet 'Réseau'
3. Appliquer des filtres
   • Dans le champ "Filtre", filtrez le domaine principal comme suit : domaine :*.siteweb.com
   • Cliquez sur le filtre JS pour exclure les fichiers non-JS
4. Vérifier chaque fichier
   • Cliquez sur le nom du fichier
   • Accédez à l'onglet "Réponse" sur le panneau qui apparaît

Regroupement

Plusieurs fichiers JavaScript peuvent être regroupés en moins de fichiers (ou un !) pour réduire le nombre de requêtes réseau. Essentiellement, plus il y a de fichiers JavaScript extraits du domaine principal, moins il est probable que cette approche soit utilisée.

Ce n'est pas vraiment un dealbreaker la plupart du temps, mais plus le nombre de fichiers JavaScript séparés est important, plus vous pouvez gagner du temps en les regroupant.

Notez que WordPress en particulier encourage les fichiers à être chargés par des plugins au fur et à mesure des besoins, ce qui peut amener certaines pages à charger beaucoup de fichiers JavaScript et d'autres très peu. Il s'agit donc plus d'un exercice d'opportunité qu'autre chose.

Pas:

1. Répétez les étapes 1 à 3 de la minification
2. Notez le nombre de fichiers présents - un à trois est généralement un bon signe

4. Comprendre si les fichiers JavaScript sont récupérés correctement et efficacement

Il y a plusieurs choses à regarder.

Ressource bloquée par robots.txt

Les fichiers JavaScript bloqués dans robots.txt ne seront pas récupérés par Google lors du rendu d'un site, ce qui pourrait entraîner une rupture du rendu ou des données manquantes.

Assurez-vous de vérifier qu'aucun JavaScript n'est bloqué dans robots.txt.

Chargement des scripts

Lorsque des fichiers JavaScript sont inclus sur une page, l'ordre de chargement est important.

Si trop de fichiers sont récupérés avant le contenu destiné à l'utilisateur, il faudra plus de temps avant qu'un utilisateur ne voie le site, ce qui aura un impact sur la convivialité et augmentera le taux de rebond. Une stratégie de chargement de script efficace aidera à minimiser le temps de chargement d'un site.

• Méthode directe : <script src="file.js">

La méthode directe chargera le fichier sur-le-champ. Le fichier est récupéré, téléchargé ou récupéré à partir du cache (c'est à ce moment qu'il apparaît dans l'onglet "Réseau" de devtools), puis analysé et exécuté avant que le navigateur ne continue à charger la page.

• Méthode asynchrone : <script async src="file.js">

La méthode async récupérera le fichier de manière asynchrone. Cela signifie qu'il commencera à télécharger/récupérer le fichier en arrière-plan et continuera immédiatement à charger la page. Ces scripts ne s'exécuteront que lorsque le reste de la page sera chargé.

• Différer la méthode : <script defer src="file.js">

La méthode defer récupérera le fichier de manière asynchrone comme avec la méthode async, mais elle exécutera ces scripts immédiatement lorsqu'ils auront été récupérés, même si la page n'a pas fini de se charger.

Alors, laquelle de ces méthodes est la meilleure ?

Réponse SEO classique, ça dépend. Idéalement, tout script pouvant être asynchrone/différé devrait l'être. Les développeurs peuvent déterminer ce qui convient le mieux en fonction de ce que fait le code et peuvent être persuadés de décomposer davantage les scripts afin qu'ils puissent être gérés plus efficacement d'une manière ou d'une autre.

Les deux types peuvent généralement être placés dans la zone principale <head> du HTML puisqu'ils ne retardent pas le chargement du contenu. Le chargement via la méthode directe est parfois inévitable, mais en règle générale, il doit se produire à la fin du contenu de la page, avant la balise de fermeture </body>. Cela garantit que le contenu de la page principale a été livré à l'utilisateur avant de charger/exécuter des scripts. Encore une fois, ce n'est pas toujours possible (ou souhaitable) mais quelque chose à garder à l'esprit.

Examiner l'impact des scripts tiers

Les sites utilisent souvent des scripts tiers à diverses fins, le plus souvent cela inclut des ressources d'analyse et de publicité. Le point de friction est que ceux-ci chargent souvent leurs propres scripts supplémentaires, qui à leur tour peuvent en charger davantage. Cela peut en principe être examiné via les données du réseau devtools, mais l'image complète peut être difficile à saisir.

Heureusement, il existe un outil pratique qui peut cartographier visuellement les dépendances pour donner un aperçu de ce qui est chargé et d'où : L'objectif ici est d'établir ce qui est chargé et de repérer les opportunités de réduire le nombre de scripts tiers lorsqu'ils sont redondants, ne sont plus utilisés ou ne conviennent pas en général.

Pas:

1. Visitez le test de la page Web
2. Assurez-vous que le test "Performances du site" est sélectionné
3. Entrez l'URL et cliquez sur "Démarrer le test"
4. Sur la page de résumé des résultats, recherchez le menu déroulant "Afficher"
5. Choisissez "Demander une carte"

5. Soyez conscient des problèmes JavaScript situationnels

Cadres JS

Vous aurez sans aucun doute rencontré un ou plusieurs des frameworks JavaScript populaires - React, Vue et Angular en sont des exemples importants.

Ceux-ci s'appuient généralement sur JavaScript pour créer un site Web, en partie ou entièrement, dans le navigateur, par opposition au téléchargement de pages déjà créées.

Bien que cela puisse être bénéfique en termes de performances et de maintenance, cela cause également des maux de tête pour le référencement, la plainte la plus typique étant que cela signifie plus de travail pour Google pour rendre entièrement chaque page. Cela retarde l'indexation – parfois considérablement. De nombreux membres de la communauté SEO pensent que cela signifie "JavaScript = mauvais" et décourageront l'utilisation de frameworks. Il s'agit sans doute de jeter le bébé avec l'eau du bain.

Une alternative très viable consiste à utiliser un service comme Prerender . Cela rendra et mettra en cache votre site pour les robots des moteurs de recherche afin que lorsqu'ils visitent votre site, ils en voient une représentation à jour et complète, garantissant une indexation rapide.

DEFILEMENT infini

Le défilement infini a tendance à être saccadé et pas aussi solide que la pagination , mais il existe de bonnes et de mauvaises façons de le faire.

Vérifiez toutes les URL susceptibles de comporter une pagination, telles que les blogs et les catégories, et recherchez la pagination. Si le défilement infini est utilisé à la place, surveillez la barre d'URL tout en faisant défiler chaque lot de résultats - l'URL est-elle mise à jour pour refléter la « page » lorsque vous faites défiler ?

Si tel est le cas, cela suffit à Google et doit être exploré correctement.

Sinon, cela devrait être corrigé par les développeurs.

Les mises à jour d'URL doivent idéalement être implémentées de manière "propre" comme ?page=2 ou /page/2. Il existe des moyens de le faire avec un hachage (comme #page-2), mais Google ne l'explorera pas pour le moment.

Routage

Si un framework JavaScript (par exemple React, Vue, Angular) est utilisé, vérifiez auprès de Wappalyzer . Il y a quelques URL que vous êtes susceptible de voir :

• https://www.website.com/pretty/standard/route
• https://www.website.com/#/wait/what/is/this
• https://www.website.com/#!/again/what

Le hachage dans les deuxième et troisième exemples peut être généré par des frameworks JavaScript. C'est bien pour la navigation, mais Google ne pourra pas les explorer correctement.

Donc, si vous repérez # (ou une variante de celui-ci) précédant des segments d'URL autrement "corrects", cela vaut la peine de suggérer un changement vers un format d'URL sans hachage.

Redirections

Les redirections JavaScript doivent être évitées en général. Bien qu'ils soient reconnus par les moteurs de recherche, ils nécessitent un rendu pour fonctionner et sont donc sous-optimaux pour le référencement.

Vous pouvez les vérifier en exécutant une analyse Screaming Frog avec le rendu JavaScript activé et en examinant les redirections JS sous l'onglet/filtre JS.

Il peut y avoir des cas où certaines fonctionnalités spécifiques pilotées par JS nécessitent une redirection JS. Tant que ce sont l'exception plutôt que la règle, c'est bien.

Conclusion

Javascript peut poser des problèmes pour le référencement, mais ceux-ci peuvent être minimisés en comprenant et en auditant soigneusement les principaux problèmes potentiels :

1) À quel point un site dépend de JavaScript

2) Si les ressources JavaScript sont mises en cache/mises à jour de manière appropriée

3) Quel est l'impact de JavaScript sur les performances du site

4) Si les fichiers JavaScript sont récupérés correctement et efficacement

5) Problèmes JavaScript situationnels, tels que le routage de défilement infini et les redirections

Si vous avez des questions sur l'audit JavaScript ou le référencement, n'hésitez pas à nous contacter - nous serions ravis de discuter.