Google Chrome est plus qu’un simple navigateur, à l’aide de sa barre d’outils pour développeur (F12), il est un véritable allié pour améliorer la qualité de votre développement et permet de tester si votre site est responsive, de changer les CSS en live et bien d’autres choses.
Affichage des css inutiles
La barre d’outils pour développeur de google chrome est un outils très pratique pour de nombreuses choses et quasi-indispensable pour découvrir les balises css inutiles sur vos pages. L’analyse de cette donnée permettra de réduire la taille de vos fichiers CSS soit en enlevant les balises inutiles soit en vous aidant à diviser vos css et à les personnaliser en fonction du type de page (catégories, produits, espace membre) que vous affichez.
La taille de la page et le nombre d’information inutile à télécharger en plus de faire varier le temps de téléchargement, font partie des critères de qualité des algorithmes des moteurs de recherche.
Ce n’est évidemment pas un des critères principaux mais lorsque vous commencez à vouloir aller dans le détail, vous devrez en tenir compte.
Pour trouver les css inutiles sur votre page, Cliquez F12, sélectionner l’onglet Audit et lancer l’analyse. Vous aurez ensuite accès à la liste des CSS inutile pour la page courante.
Définir le protocol HTTP utilisé et aperçu du Waterfall
Chrome permet également d’avoir un aperçu du waterfall de chargement, du temps de chargement de la page et de trouver quel est le protocole utilisé par le serveur. Je profite de l’exemple pour vous montrer les différences entre le chargement d’une page sur un serveur équipé du HTTP2 et le chargement sur un serveur classique munis du protocole HTTP 1.1.
Si la colonne protocole n’est pas visible, ajoutez-là en cliquant sur une en-tête de colonne avec le bouton droite de la souris. Vous pourrez ajouter de nouvelles informations.
L’exemple suivant vous montre donc les avantages de l’utilisation du protocole HTTP2.
Contrôle du cache-control des fichiers
Il est fortement recommandé de définir dans le .htaccess des durées de validité et d’expiration d’expiration pour les fichiers afin de limiter les chargement et accélérer la vitesse d’affichage. Vous pouvez contrôler depuis chrome si ces directives sont correctement prise en compte de la façon suivante:
Dans l’exemple ci-dessus, les directives suivantes ont été ajouté au fichier .htaccess afin de donner des directives de cache aux navigateurs.
<ifmodule mod_expires.c="">
AddType image/x-icon .ico
AddType application/font-woff2 .woff2
ExpiresActive on
ExpiresByType image/jpg "access plus 3 week"
ExpiresByType image/jpeg "access plus 3 week"
ExpiresByType image/gif "access plus 3 week"
ExpiresByType image/png "access plus 3 week"
ExpiresByType application/font-woff2 "access plus 4 week"
ExpiresByType image/x-icon "access plus 4 week"
ExpiresByType text/css "access 1 week"
ExpiresByType text/javascript "access 1 week"
ExpiresByType application/javascript "access 1 week"
ExpiresByType text/x-javascript "access 1 week"
</ifmodule>Trouver les ressources non-https d’un site https
Lors du passage d’une site de http à https, il arrive parfois d’oublier des ressources qui n’utilisent pas le transfert sécurisé. L’onglet Sécurity vous permet de trouver quels sont ces éléments afin de passer complètement votre site vers le nouveau protocole.
Tester si votre site est responsive
Google Chrome met à disposition un moyen très efficace, simple et rapide de tester votre site sur toutes les résolutions et vous assurez que vos pages sont bien responsive. Cette fenêtre vous permet soit de changer la résolution à l’aide de la souris ou de choisir de résolution prédéfinies correspondant à certains devices.
Contrôle des standards AMP
Comme j’en avais parlé précédemment dans mon post sur les pages amp, Chrome permet de tester si votre page respecte les standards des pages amp de la façon suivante:
