Tuto Optimisation WordPress : GTMetrix pour les nuls – Intro

GTMetrix est un outil qui permet d’analyser une page en se focalisant sur l’aspect « vitesse de chargement » (si vous voulez savoir pourquoi cela est important c’est ici ).

Je m’en sers pour auditer un site (et ses concurrents) , tester des templates/plugins, bien plus rapide que d’inspecter le code « à la main ».

Attention toutefois, il s’agit de recommandations, chaque site est différent, enlevez toutes les images, les scripts javascripts et autres fonts exotiques… vous aurez une site super optimisé… mais pas sûr qu’il plaise à vos visiteurs…

Mais il y a quand même quelques basics à respecter, ne nécessitant que peu de manipulations.

Prenons l’exemple de ce propre site (pas encore passé à l’optimisation):

La première chose qui saute aux yeux, c’est les « B » pour Page Speed Grade ( made in Google) et YSlow ( de Yahoo… qui existe encore ? Il parait même qu’il voudrait racheter Tumbr pour 1 milliard… on lui a pas dit que la bulle Internet c’est fini ? 😉

A noter qu’il s’agit du template de base Twenty Twelve de WordPress himself, tout juste acceptable (passe en classe supérieur, mais devra faire des efforts s’il veut avoir son bac ( j’ai toujours rêvé d’écrire ça ! 😉

Ensuite :

• La page mets 2.52s a se charger : ce qui est beaucoup 
• 407kb pour une page aussi basic
• 39 requêtes ( pour les images, css, js) , encore des effort à faire !

L’onglet Page Speed détaille les recommendations de Google, de même pour YSlow, timeline vous montre le chargement de chaque objet de votre page, et history vous permet de votre évolution lors de vos changements.

Passons au tableau:

• 1ere colonne : détail de la recommandation , c’est quelque fois du chinois 😉 .. mais pas de panique, je vais détailler sur les prochains articles…
• 2e colonne: votre note sur 100
• 3e colonne : le type de ressource que cela concerne, image, css etc…
• 4e colonne : la priorité ,  high = élevé

Je vais passer en revu les recommandations et les solutions à mettre en oeuvre :

• Specify image dimensions
• Leverage browser caching