Pour tout webmaster, assister à une chute soudaine ou progressive du trafic organique n’est pas une expérience très agréable.
C’est là que DevTools peut s’avérer utile afin de compléter votre liste d’outils tiers.
Pour ouvrir DevTools, vous pouvez cliquer avec le bouton droit de la souris sur une page web et cliquer sur « inspecter » ou aller sur le menu dans le coin supérieur droit du navigateur et sélectionner Autres outils > Outils pour les développeurs.
Nous allons examiner trois façons d’utiliser DevTools pour diagnostiquer les chutes de trafic.
Spoofing de lieux pour les contrôles locaux des SERPs
La possibilité de reproduire des résultats de recherche provenant de divers endroits, en particulier si votre client possède un brick & mortar et plus spécifiquement, la possibilité de reproduire des résultats de recherche provenant de divers endroits, peut s’avérer très importante.
Le spoofing de lieu peut également s’avérer utile pour les entreprises e-commerce, car les requêtes « d’intention d’achat » liées à un produit peuvent avoir plusieurs interprétations communes et parfois un produit peut être disponible localement.
Le spoofing dans différentes villes vous permet de vous faire une idée de la manière dont Google traite la requête et de savoir si vous êtes perdant dans le trafic sur certains éléments des SERPs comme le Map Pack.
DevTools est livré avec une liste prédéfinie de lieux, mais vous pouvez également ajouter des lieux personnalisés via les coordonnées GPS.
Vous pouvez trouver des coordonnées GPS sur des sites web tiers, tels que LatLong, ou par le biais de Google Maps.
Identifier les problèmes de blocage de rendu
Bien que ce problème ne soit pas banal, il a fait son apparition lors de quelques audits de chute de trafic que j’ai effectués au cours des 18 derniers mois. Une fois résolu, il a été corrélé avec une amélioration des performances.
Dans l’onglet Réseau de DevTools, vous pouvez facilement identifier les ressources JavaScript et CSS qui « bloquent le rendu », par exemple celles qui sont chargées avant le DOM (Document Object Model).
Vous pouvez également identifier les CSS et JavaScript non critiques grâce à l’onglet Couverture (qui se trouve dans Sources) :
Google Lighthouse identifie trois types de ressources de blocage :
Une balise <script> qui :
- se trouve dans le <head> du document.
- n’a pas d’attribut différé.
- n’a pas d’attribut async.
Une balise <lien rel= »stylesheet »> qui :
- n’a pas d’attribut “disabled”. Lorsque cet attribut est présent, certains navigateurs ne téléchargent pas le stylesheet. Notez que cet attribut n’est pas pris en charge par tous les navigateurs.
- n’a pas d’attribut media correspondant à l’appareil de l’utilisateur.
Un <lien rel= »import »> balise cet attribut :
- ne possède pas d’attribut async.
[Étude de cas] Optimiser le trafic organique en utilisant l’analyse de fichiers de log
Visualisation des différences entre le DOM et le code source
Via DevTools, vous pouvez vérifier les pages web (ou parties de celles-ci) pour les différences entre le DOM et le code source, ce qui peut être très utile pour vérifier si la page web a été pré-rendue avec succès.
View Source vous montre le HTML qui compose une page web et qui donne le code du serveur d’origine au navigateur. Mais ce n’est pas toujours le cas.
Le HTML servi par votre serveur d’origine peut être manipulé par JavaScript, par le CDN ou middleware (edge SEO) et même par le navigateur. Grâce aux DevTools, vous pouvez visualiser le DOM après :
- Correction d’erreur HTML à partir du navigateur
- Normalisation HTML à partir du navigateur
- Manipulation de JS DOM
Un bon exemple est le navigateur qui corrige une syntaxe HTML invalide. Par exemple, l’extrait de code ci-dessous que vous pouvez voir dans la section « view-source » :
Mais via DevTools, vous constaterez que l’erreur de syntaxe de la ligne 7 a en fait été corrigée par le navigateur :
Selon l’outil d’audit que vous utilisez, s’il existe, il se peut que cette erreur ne soit pas détectée si l’outil rend la page et le DOM via un navigateur headless, et ce problème est corrigé automatiquement.
Avantages de l’utilisation des DevTools pour identifier les problèmes techniques
L’évaluation d’une chute de trafic n’est jamais une tâche facile car il y a très rarement une solution exacte. Mais comme nous vivons ce qui semble être un calendrier de changement plus régulier de la part de Google, il est crucial de pouvoir analyser et auditer efficacement les facteurs internes et externes qui affectent votre site web.
DevTools vous offre un moyen simple et gratuit d’examiner des pages web individuelles dans le navigateur, en vous donnant un aperçu des éléments techniques cruciaux qui peuvent affecter les performances SEO.
