Je vais vous présenter un outil gratuit, assez méconnu, de Google « Chrome DevTools » dont certaines fonctionnalités m’ont fait gagné un temps certain lors de la création de mon site internet.
Qu'est-ce que Chrome DevTools ?
Chrome DevTools, diminutif de Chrome Developer Tools, généralement appelé DevTools, est un outil de développement gratuit, intégré nativement dans le navigateur Web Google Chrome, qui rassemble plusieurs fonctionnalités plus intéressantes les unes que les autres.
Ces dernières sont vraiment destinées aux développeurs Web, telles que :
- Débogage d’un site web (Debugger).
- Débogage javascript
- Fonction JavaScript console.log ().
- Réduction du poids du JavaScript.
- Modification de l’élément HTML à la volée.
- Modification du code CSS.
- Modification des couleurs.
- Effacement des cookies.
- …
Je ne suis pas un développeur web, loin de là, mais un consultant SEO / SXO en freelance situé à Douai, près de Lille dans la région des Hauts-de-France, spécialisé sur le moteur de recherche Google.
Pour mon travail, j’ai créé mon propre site Web sous le CMS WordPress, et je vais vous présenter ci-après quelques fonctionnalités intéressantes qui m’ont aidé et qui vous aideront à coup sûr :
- À créer votre site internet plus efficacement (surtout pour le responsive design).
- À analyser ses performances.
- À l’auditer d’un point de vue SEO.
- À identifier les problèmes éventuels et les corriger, le cas échéant.
Bien entendu, DevTools n’est pas limité à WordPress et s’applique à tous les autres CMS du marché (Prestashop, Shopify, Wix, Joomla, …).
Comment accéder à Chrome DevTools ?
Il y a différents navigateurs web (Mozilla Firefox, Internet Explorer, Microsoft Edge, Safari, Opera, …) mais je vais me focaliser sur le navigateur préféré des français avec plus de 60% de parts de marché : Google Chrome.
Pour accéder à Chrome DevTools, il faut :
- Lancer le navigateur Chrome.
- Ouvrir une page web.
- Sous Windows, au choix :
– Tapez le raccourci (CTRL + Maj + I).
– Appuyez sur la touche F12.
– Cliquez sur le bouton droit de la souris (clic-droit). - Sur macOS :
– Tapez le raccourci (Cmd + Opt+I).
À noter que vous n’êtes pas obligé d’avoir un compte Google pour y accéder.
Comment changer la vue par défaut dans Chrome DevTools ?
Voilà, vous êtes désormais dans l‘outil DevTools de Chrome et votre écran d’ordinateur est désormais divisé en 2 parties :
- À gauche, la vue par défaut de votre page web qui est celle de la version desktop (ou bureau).
- À droite, la console de l’outil de développement.
La vue classique (desktop) n’a que peu d’intérêt.
En revanche, la vue mobile est plus intéressante, car elle permet de tester l’affichage sur les mobiles (contenu, menu déroulant, …).
Certes, WordPress le permet aussi, mais le résultat n’est pas réaliste à 100 %.
Pour changer la vue desktop en version mobile, vous avez deux possibilités :
- Cliquez sur l’icône dans le coin supérieur gauche de la console.
- Tapez le raccourci (CTRL + Shift + M).
Si vous voulez revenir en vue desktop, il suffira de recliquer sur l’icône.
Comment changer la vue Mobile dans Chrome DevTools ?
Ce qui est génial avec DevTools, c’est que vous n’êtes pas limité à une seule vue responsive, mais à 12 vues comprenant en autres les tablettes iPad, iPad Pro et iPad Mini.
Mais ce n’est pas tout, car vous avez, en plus, un bouton « Edit » ou vous pouvez mettre les derniers smartphones et tablettes à la mode en y rentant juste certaines données d’affichage.
En résumé, avec DevTools, vous n’aurez plus aucune raison que votre site vitrine ou E-commerce (WooCommerce) ne soit pas « responsive design » en ne s’affichant pas correctement sur quelque mobile que ce soit.
Comment faire des captures d'écran avec Chrome DevTools ?
Chrome Developer Tools vous permet de prendre des captures d’écrans partielles mais surtout complètes de votre page web.
Cela est très utile pour voir le rendu d’un élément dans son contexte complet.
Captures d'écran en version Mobile
Pour effectuer une capture d’écran en version mobile, il faut :
- Être sur une de vos pages web.
- Que vous vous mettiez en visu mobile.
- Cliquez sur l’icône représentée par 3 petits points verticaux.
Un menu déroulant va s’afficher.
Dans ce dernier, vous trouverez deux sous-menus :
- Capture screenshoot (capture d’écran).
- Capture full size screenshot (capture d’écran complète de la page web).
Cliquez sur ce dernier (la capture d’écran classique n’a que peu d’intérêt pour moi) et cela va l’enregistrer dans un fichier au format PNG.
Vous n’aurez plus qu’à l’ouvrir et l’imprimer pour vous rendre compte réellement du rendu de votre page en format mobile, et effectuer d’éventuelles modifications.
Captures d'écran en version Desktop
Pour effectuer une capture d’écran en version desktop, il faut :
- Être sur une de vos pages web.
- Que vous vous soyez en en visu desktop (celle par défaut).
- Tapez le raccourci (CTRL + Maj + P).
Un menu déroulant va s’afficher.
Tapez, dans la barre de recherche qui s’affichage en haut du menu déroulant, le mot « screenshot ».
DevTools vous proposera plusieurs modes de capture d’écran.
Seule est intéressante la capture « full size », mais honnêtement en version desktop, comme les « scroll » sont souvent limités, je ne me sers pas de cette fonctionnalité.
Comment vérifier le statut des codes HTTP avec DevTools ?
HTTP, acronyme de Hyper Text Transfer Protocol, est un protocole de communication permettant de transmettre et recevoir des données sur le Web.
Pour recevoir du trafic sur votre site WordPress, il est crucial de toujours vérifier que votre contenu puisse être crawlé par les robots d’indexation (GoogleBot, BingBot, …).
Pour cela, il faudra vérifier la réponse des statuts des codes HTTP.
L’idéal est de recevoir un code HTTP 200 et le pire étant un code HTTP 404, qu’il faudra remédier au plus vite.
Pour vérifier le statut du code HTTP de votre page web, cela se déroule en 3 étapes :
- Être sur une de vos pages web.
- Cliquez sur l’onglet Network.
- Rechargez la page web.
Un tableau va apparaître après quelques secondes et vous verrez une colonne « Status ».
Comment mesurer le TTFB avec Chrome DevTools ?
TTFB, acronyme de Time To First Byte, est une métrique mesurant le temps, en nombre de millisecondes (ms), entre le moment où l’internaute fait une requête HTTP, comme, par exemple, le chargement d’une page web et le moment où le premier octet est reçu par le navigateur internet de ce dernier.
Le TTFB est un facteur qui contribue grandement à la vitesse générale d’affichage de votre page web.
Pour mesurer le TTFB, cela se déroule en 3 étapes :
- Être sur une de vos pages web.
- Cliquez sur l’onglet Network.
- Rechargez la page web.
Un tableau va apparaître après quelques secondes et vous verrez une colonne « Time ».
À droite de la colonne « Time », il y a un onglet « Waterfall » ou se trouve une barre horizontale verte.
Vous cliquez dessus et apparaîtra un menu déroulant et dedans, il y a un onglet « Waiting (TTFB) » ou est indiqué le temps en mini seconde.
Pour information, Google conseille idéalement que le TTFB ne doit pas dépasser 200 ms.
En pratique, jusque 600 ms est acceptable.
Au-delà de 1500 ms, il y a vraiment un problème à corriger au plus vite.
Sous WordPress, plusieurs facteurs peuvent impacter le temps du TTFB :
- La situation géographique des serveurs.
- Le mode d’hébergement (dédié ou mutualisé).
- L’infrastructure de l’hébergement.
- Le thème WordPress et plugins à jour ou non.
- Présence de certains plugins WordPress gratuits ou payants, tel Broken Link Checker.
- …
Concernant l’hébergement, je ne peux vous conseiller qu’o2switch qui est une société française et dont les serveurs sont situés en France (Clermont-Ferrand), le tout à un prix défiant toute concurrence et au service après-vente irréprochable.
Comment vérifier si votre site web est sécurisé avec DevTools ?
HTTPS, acronyme de HyperText Transfer Protocol Secure, est un protocole de sécurité permettant de garantir la confidentialité des données en chiffrant les informations transmises entre l’ordinateur de l’internaute et votre site internet.
Certes, cela a peu ou prou d’incidence au niveau du classement dans les moteurs de recherche, mais cela a une énorme incidence au niveau de l’expérience utilisateur(UX).
En effet, depuis fin 2018, Google Chrome averti l’internaute qu’il visite un site web non sécurisé et cela est à ses risques et périls.
En 2021, il est impératif d’avoir un site sécurisé en HTTPS.
Pour vérifier si votre page web est en HTTPS, cela se déroule en 3 étapes :
- Être sur une de vos pages web.
- Cliquez sur l’onglet Security.
- Une fenêtre va s’ouvrir : cliquez sur View certificate.
Une fenêtre sur la gauche va s’afficher et vous indiquera si la page de votre site est sécurisée ainsi que la date de validité du certificat.
Comment lancer un audit avec Chrome DevTools ?
Outre ses outils de développement, Chrome Developer Tools intègre en son sein une partie dédiée à l’audit de votre page web.
Cette dernière n’est ni plus ni moins que l’extension Chrome « Lighthouse ».
Pour lancer un audit de votre page web, cela se déroule en 5 étapes :
- Mettez en navigation privée en tapant le raccourci (Ctrl+Maj+n).
- Être sur une de vos pages web à auditer.
- Cliquez sur les ».
- Un menu déroulant va s’afficher : cliquez sur Lighthouse.
- Cliquez sur l’onglet Generate report.
Avant de cliquer sur le bouton « Generate report », vous avez en dessous plusieurs options à choisir réparties en 2 catégories :
- Catégories.
- Device.
Concernant les catégories, je vous conseille de tous les cocher (sauf Web App si votre site n’est pas une application spécialement dédiée pour les mobiles).
Concernant le Device, c’est ici que vous choisissez si vous voulez auditer votre page web soit en version Mobile, soit en version Desktop.
Après quelques secondes, un tableau synoptique vous donnera, en fonction de divers facteurs de classement utilisés par le moteur de recherche Google, une note dans la ou les catégories préalablement sélectionnées.
Cette note va de 0 à 100. (100 étant l’excellence).
Pour mettre en exergue les modifications à effectuer le plus rapidement possible, les notes sont encerclées dans 3 couleurs possibles :
- Rouge : Mauvais.
- Orange : Moyen.
- Vert : Bon.
L’audit Lighthouse se divise en 5 catégories :
- Performance.
- Accessibilité.
- Bonnes pratiques.
- SEO (Search Engine Optimization).
- Progressive Web App.
La catégorie « Performance » vérifie la vitesse de chargement de votre page web.
La catégorie « Accessibilité » vérifie que votre page web soit utilisable par le plus grand nombre possible d’internautes.
La catégorie « Bonnes pratiques » vérifie l’intégrité du code de votre page web.
La catégorie « SEO » évalue le degré d’optimisation de votre page web d’un point de vue SEO.
La catégorie « Progressive Web App » vérifie que votre application fonctionne correctement même hors connexion.
Dans chacune des catégories, en cliquant sur leur note respective, vous pourrez voir précisément ce qui a réussi, ce qui a échoué, lire les détails de chaque vérification.
Ensuite, il ne restera plus qu’à faire les modifications adéquates afin d’augmenter votre note.
Comment installer l'extension Chrome Lighthouse ?
Comme l’audit de performance inclus dans Chrome DevTools est repris de l’extension SEO gratuite Lighthouse, nous allons voir comment installer cette dernière.
Pour installer Lighthouse sur votre ordinateur, cela se déroule en 4 étapes :
- Ouvrez votre navigateur Google Chrome.
- Tapez la requête extensions chrome dans la barre de recherche.
- Vous allez arriver dans la boutique en ligne Chrome Web Store : tapez la requête lighthouse dans la barre de recherche.
- L’extension va s’afficher : cliquez sur Ajouter à Chrome.
Chrome store est une plateforme de téléchargement permettant d’améliorer et/ou de personnaliser votre navigateur internet à l’aide :
- D’extensions.
- De thèmes.
- D’applications Web.
Voilà, l’extension « Lighthouse » est installée sur votre ordinateur et est visible par son icône « un phare » située à droite de votre barre d’adresse.
Pour lancer l’audit, cela se déroule en 3 étapes :
- Tapez l’adresse url de votre page web dans la barre de recherche
- Ouvrez la page.
- Cliquez simplement sur l’icône du plugin.
Le résultat de l’audit va apparaître, de la même façon que dans le tableau de bord de DevTools.
Il est à noter que très souvent la note de la catégorie « Performance » en version mobile sera toujours inférieure à celle étudiée en version Desktop.
Ceci est principalement du au fait que les plugins de cache de WordPress, tel que, par exemple, WP Fastest Cache, n’intègrent pas nativement de cache mobile (cela est réservé à leurs versions payantes).
Nouveautés de Lighthouse 6.0
Le 19 mai 2020, Google a annoncé Lighthouse 6.0.
Lighthouse 6.0 est une mise à jour majeure de l’outil open-source de Google, passant de la version 5 (5.7 à ce jour) à la version 6.0.
Avec Lighthouse 6.0, Google à modifié son algorithme de score de performances des pages web.
Ce dernier est désormais calculé sur 6 métriques au lieu de 5 et leurs poids ont été pondérés.
Deux mesures ont été, pour l’occasion, supprimées :
- La première peinture significative.
- La première inactivité du processeur.
Trois autres mesures ont, par contre, été rajoutées :
- La plus grande peinture riche en contenu (LCP).
- Le temps de blocage total (TBT).
- Le décalage de mise en page cumulatif (CLS).
– Le LCP mesurant l’expérience de chargement visible : un score <2.5 secondes est considéré comme bon.
– Le TBT quantifiant la réactivité du chargement : un score <300 ms est considéré comme rapide.
– Le CLS mesurant la stabilité visuelle : un score <0.1 est considéré comme bon.
Deux de ces métriques (LCP et CLS) font désormais partie des nouvelles mesures quantifiant la qualité de l’expérience utilisateur (UX) que Google a officialisé fin mai 2020, (et qui seront pris en compte, par ce dernier comme facteurs de classement à partir de mai 2021), sous le nom de Core Web Vitals.
En outre, Lighthouse 5.0 effectuait ses tests mobiles avec un Nexus 5X.
Désormais, avec Lighthouse 6.0, la référence sera un Motorola Moto G4.
Toutes ses modifications apportées avec Lighthouse 6.0 auront sans nulle doute une importance dans le score de performances.
Voici un petit outil de simulation vous permettant de calculer, plus rapidement, le score de votre page web avec Lighthouse 6.3
(pour la France, il faut regarder la zone géographique : « EU WEST »).
Mon avis final sur Chrome Devtools
Chrome Devtools et son compagnon de route, l’extension SEO gratuite « Lighthouse » sont deux outils intéressants pour plusieurs raisons :
- Ils sont développés par Google, donc la qualité et la pertinence sont au rendez-vous.
- Ils fournissent des données importantes pour améliorer les performances de votre page web.
- L’interface des audits est simple et intuitive.
- Ils sont gratuits.
À noter que ces deux outils ont deux gros défauts :
- Le test ne se fait pas sur un site internet en entier mais seulement page par page.
- La partie SEO est vraiment sommaire et ne remplacera jamais des audits SEO effectués par des consultants en référencement naturel équipés d’outils SEO bien plus performants.
Conseil
Si vous êtes en création ou modification de votre site internet, et que vous voulez voir de suite le rendu de votre site en mode Desktop et en mode Responsive Design (tablette et mobile), je ne peux que vous conseiller d’utiliser un petit outil très sympa : Responsive Design Checker.
Mise à jour
Le 1 juin 2021, Google a annoncé que PageSpeed Insights utilise, désormais, Lighthouse 8.0.
Le changement notable se situe au niveau de la catégorie performance :
- Le score FCP (Première peinture de contenu) est plus strict.
- Le score TBT (temps de blocage total)est plus strict.
- Le score CLS (Décalage de mise en page cumulatif) est moins strict.
- La moyenne pondérée des scores de ces métriques a été repondérée pour donner plus de poids au TBT et CLS, et en diminuant un peu le poids du FCP.
D’après Google, le score de performance de plus de 60% des sites sera amélioré avec Lighthouse 8.0.
À noter que Google fournit un comparatif entre Lighthouse 8.0 vs 6/7 pour la version desktop et pour la version mobile via sa calculatrice de score Lighthouse 8.0.
Si vous avez aimé cet article sur l’optimisation de votre productivité avec Chrome DevTools, laissez-moi un petit commentaire.
