Comment utiliser Chrome DevTools pour le référencement ?

Google Chrome DevTools est une suite d'outils gratuits intégrés directement dans le navigateur Google Chrome sous la forme de fonctionnalités intégrées, ainsi que de modules supplémentaires (disponibles à l'installation à l'adresse suivante https://chrome.google.com/webstore/) pour tester, analyser et déboguer le code des sites et des applications web. Chrome DevTools est l'un des outils essentiels pour les développeurs, les référenceurs et les analystes web.

Cet article décrit les fonctionnalités de Chrome DevTools qui sont particulièrement utiles pour un spécialiste du référencement.

Les utilisateurs souhaitent un accès rapide aux différentes parties de l'interface DevTools. Il existe de nombreuses façons de l'ouvrir dans le navigateur.

La première méthode, la plus simple, consiste à cliquer avec le bouton droit de la souris sur l'élément de page analysé pour développer le menu contextuel et sélectionner "Inspecter". Cela ouvrira l'onglet "Elements" dans DevTools, où vous pourrez analyser les éléments dans l'arbre DOM.

Une autre façon d'ouvrir Chrome DevTools est de sélectionner une option dans le menu contextuel du navigateur. Pour ce faire, appuyez sur le bouton représentant trois points alignés verticalement dans le coin supérieur droit du navigateur. Dans un deuxième temps, trouvez l'option "Plus d'outils" dans le menu contextuel qui s'ouvre, et après l'avoir survolée, sélectionnez "Outils de développement" dans le sous-menu qui s'ouvre. Cela ouvrira l'outil et activera le même panneau que celui affiché par l'utilisateur la dernière fois qu'il a fermé DevTools.

Windows, Linux ChromeOS

MacOS

Le mode inspecteur est une fonctionnalité de Chrome DevTools qui permet d'afficher rapidement des informations de base sur l'élément sur lequel se trouve le curseur de la souris.

L'outil localise simultanément l'élément dans le code HTML et met en évidence une partie de celui-ci pour que l'utilisateur puisse en avoir un aperçu rapide. L'outil fonctionne également dans l'autre sens : le survol d'un extrait dans la fenêtre DevTools met en évidence l'élément de la page auquel l'extrait fait référence.

Lorsque le mode Inspecteur est activé (l'icône Inspecteur est en surbrillance), un clic gauche sur l'élément inspecté permet d'afficher des informations sur les styles CSS de l'élément dans Chrome DevTools. Ces données sont affichées sous la fenêtre de prévisualisation du code de la page dans l'onglet "Styles".

La fonction Mode Inspecteur de Chrome DevTools est un outil principalement utile pour localiser des éléments cachés sur une page (par exemple, à l'aide du code CSS). Il permet également de vérifier si les différents éléments du site ont été correctement implémentés.

Mode appareil - permet de simuler les performances d'un site web sur différentes résolutions et différents appareils.

Cet outil vous permet de vérifier la mise en page d'une page à n'importe quelle hauteur et largeur d'écran. Outre cette fonction de base, il permet également de simuler automatiquement la résolution d'écran des modèles d'appareils mobiles les plus courants et de configurer la taille de la fenêtre pour votre propre appareil.

En outre, le mode appareil vous permet de limiter la vitesse de votre connexion Internet à une plage appropriée pour l'appareil que vous simulez.

Le principal avantage de cet outil du point de vue du référencement est la possibilité de vérifier la mise en page pour un nombre illimité de résolutions d'écran. Cela vous permet de vérifier les éléments qui causent le problème commun signalé par Google Search Console dans le rapport sur l'utilisabilité mobile. Les éléments cliquables sont trop proches les uns des autres.

Elements - est un onglet des DevTools de Google Chrome qui permet d'inspecter le code HTML d'une page dans l'arborescence DOM. Grâce à cet outil, l'utilisateur peut voir comment chaque élément est imbriqué et rechercher des parties individuelles du code.

Cette dernière option est particulièrement utile pour les spécialistes du référencement. En effet, elle permet de vérifier rapidement la présence d'éléments tels que les données structurées Schema.org dans le code, ainsi que d'éléments aussi basiques que la balise ou .

Pour lancer une recherche dans l'onglet "Éléments", utilisez les touches CTRL + F. Vous pouvez ensuite rechercher le code HTML dans la boîte de recherche qui s'ouvre.

Console - permet d'exécuter du code JavaScript alors que la page web est déjà entièrement chargée. Cette fonction est particulièrement utile pour tester le code JS avant de le mettre en œuvre directement sur le site.

Une autre caractéristique très importante de l'onglet Console est la possibilité d'afficher des journaux et des invites concernant le fonctionnement du code JavaScript. Cette fonction permet à l'utilisateur de vérifier si le code JavaScript intégré dans la page fonctionne correctement. Pour les erreurs JavaScript, l'onglet Console affiche des informations détaillées sur le fragment de code qui a généré l'erreur, ainsi que sur la cause de l'erreur.

Il s'agit d'un outil utile dans le travail de tout spécialiste du référencement pour vérifier les erreurs dans la performance du site. Cela se traduit directement par la capacité à fournir des recommandations de mise en œuvre détaillées.

Network - est un onglet de DevTools qui permet d'analyser les ressources des pages téléchargées par le navigateur. Cet outil vous permet surtout de :

L'onglet "Réseau" dans Chrome DevTools est un excellent outil pour rationaliser le travail d'un spécialiste SEO au niveau de la vérification du bon fonctionnement de pages spécifiques d'un site web.

Les journaux de l'onglet "Réseau" représentent un tableau indiquant l'état des ressources demandées. Il contient les éléments suivants :

En cliquant avec le bouton gauche de la souris sur le nom de la ressource demandée dans la colonne "Nom" des journaux de l'onglet "Réseau", l'utilisateur peut accéder aux données relatives aux en-têtes de requête et de réponse HTTP.

La dernière colonne de l'onglet "Réseau" fournit des informations détaillées sur le téléchargement et le chargement d'une ressource spécifique. Si vous passez votre souris sur la ligne contenant le graphique en cascade, vous pouvez voir des informations détaillées sur l'heure d'envoi de la requête, le temps de réponse du serveur, etc.

La simulation du chargement d'une page sans une ressource spécifique est un excellent moyen de voir si le fait de bloquer ou de retarder le chargement d'une ressource spécifique de la page affectera la fonctionnalité globale de la page et l'expérience de l'utilisateur.

Pour bloquer la requête d'un navigateur pour une ressource particulière, localisez cette ressource dans la colonne "Nom" du tableau de la cascade et cliquez avec le bouton droit de la souris sur le nom de cette ressource. Sélectionnez "URL de la demande de blocage"dans le menu contextuel qui s'ouvre.

Chaque fois que la page est rechargée, la ressource ne sera pas demandée par le navigateur jusqu'à ce qu'elle soit décochée dans l'onglet "Blocage des requêtes réseau" situé sous le tableau des cascades, ou que la session de navigation en cours soit fermée.

Il est également possible de bloquer les requêtes pour toutes les URL d'un domaine donné. Pour ce faire, localisez une des ressources appartenant au domaine à bloquer dans la colonne "Nom" du tableau de la cascade. Dans l'étape suivante, il suffit de cliquer avec le bouton droit de la souris sur le nom de cette ressource et de sélectionner "Domaine de demande de blocage"dans le menu contextuel qui s'ouvre.

De cette manière, toutes les ressources appartenant au domaine seront bloquées pour les requêtes du navigateur.

La simulation d'une bande passante Internet limitée est une fonctionnalité utile de l'onglet "Réseau", qui vous permet d'évaluer la vitesse de chargement du site Web sur des appareils dotés d'une connexion Internet lente (par exemple : smartphones).

Pour imposer des restrictions de bande passante au navigateur, localisez le bouton de menu (trois points alignés verticalement) dans la partie supérieure droite de la fenêtre DevTools dans l'onglet DevTools de Chrome. Sélectionnez "Autres outils", puis "Conditions réseau" dans le menu contextuel qui s'ouvre.

La fonction "Network throttling" est assortie de profils prédéfinis :

En outre, les utilisateurs peuvent définir leurs propres paramètres de limitation de la bande passante.

Pour désactiver le cache dans le navigateur, sélectionnez "Désactiver le cache" dans l'onglet "Conditions du réseau" et actualisez la page en cours d'analyse.

Il permet non seulement d'identifier les ressources qui posent un problème de chargement de la page ou de simuler l'absence de certaines ressources, mais aussi de localiser les problèmes sur la page qui génèrent des erreurs dans Google Analytics (ex : mauvaise affectation d'une source à une session).

Performance - vous permet de voir exactement comment une page web se charge dans certaines conditions, c'est-à-dire en fonction de la largeur de bande Internet et de l'unité centrale.

En outre, cet outil vous permet de déterminer les éléments de la page qui ont un impact direct sur les mesures de Core Web Vitals (première peinture de contenu, plus grande peinture de contenu, décalage cumulatif de la mise en page).

Performance visualise également le chargement du site web image par image en donnant à l'utilisateur la possibilité de prévisualiser chacune d'entre elles.

Les fonctions cachées dans l'onglet "Performance" sont d'excellents outils qui peuvent être utilisés par le spécialiste SEO pour localiser les éléments affectant les métriques de Core Web Vitals et également pour vérifier la mise en œuvre correcte des recommandations visant à améliorer ces métriques.

Les éléments décrits dans cet article ne représentent qu'une fraction des fonctionnalités offertes par Chrome DevTools, ce qui illustre parfaitement la puissance et l'utilité de cet outil. Connaître les fonctionnalités cachées dans ce module gratuit et savoir les utiliser dans son travail quotidien est sans aucun doute une grande valeur ajoutée pour tout développeur, spécialiste SEO et analyste web.