Pagespeed : diagnostique et conseils
Pagespeed : un outil gratuit
Si Firebug est un outils très précieux, pagespeed en est son parfait complément. Il va analyser l'ensemble des données et vous proposer un diagnostique. C'est presque magique.
Comme vous pouvez le constater, la liste est plutôt longue et contient un ensemble de bonnes pratiques. Bien sur, comme c'est un outil complétement automatique, il ne peut être au courant de vos spécificités et certaines règles ne peuvent être appliquées. Par exemple 'DNS Lookup' est une règle qui dit qu'il faut éviter des appels extérieurs trop nombreux.
Sauf qu'il n'est pas délirant d'avoir 2 outils de tracking, plus un CDN, et des API quelconques. Il faut donc faire preuve de bon sens et se concentrer sur les règles essentielles.
Vous aurez ainsi l'occasion de découvrir des sites avec 50 .js (ne riez pas, ça existe) sur la home, pour un poids total d'1 Mo, sans compression et sans mise en cache ! Autant dire qu'on a le temps d'aller boire un café avant que la page ne soit chargée.
La plupart des règles sont finalement assez simples à mettre en place, par exemple ici la minication des .js. On constate qu'il serait possible de gagner 407 kB, ce qui est quand même pas mal. Imaginons un site faisant 1000 visites/jours, le gain est sympathique en terme de bande passante, aussi bien pour le serveur que pour le client.
Chaque règle pointe vers un tuto expliquant la mise en place de la solution. Donc que du bonheur.
Les règles les plus simples sont parfois les plus efficaces. Je retiens plus particulièrement :
- L'optimisation des images
- La compression
- L'activation du cache navigateur
- La minification des fichiers
- Le regroupement et le déport des JS
On y reviendra par la suite.
Une page totalement optimisée avec un score de 100 / 100 est effectivement rapide à afficher, mais cela ne signifie pas forcément qu'elle se chargera rapidement. Dans l'exemple ci-dessous, le chargement du HTML est de l'ordre de 20 secondes. L'internaute attendra donc malgré l'avis très positif de pagespeed.
Il convient donc de vérifier en premier lieu si le HTML est rapide à arriver sur le navigateur à l'aide du panneau réseau de firebug, puis ensuite lancer page speed.