Catégories
Referencement

Boostez votre wordpress !!!

On parle beaucoup en ce moment du temps de chargement des pages, particulièrement depuis que Big G a fait une annonce officielle à ce sujet.
Je vais donc à travers cet article vous montrer comment améliorer globalement le temps de chargement de votre site en testant tout cela grâce à un outil incontournable : gtmetrix (qui utilise Yslow [Yahoo] et PageSpeed [Google]).

Avant de commencer, je tiens à vous dire que cet article est un complement à celui de SeoMix : Guide Htaccess : performances et temps de chargement. Pensez d’abord à mettre en place ce fichier .htaccess qui va vous faire gagner énormément au niveau du temps de chargement (si vous ne l’avez pas déjà fait, pensez à faire un gtmetrix avant et après la mise en place de ce fichier).

Maintenant que tout est clair, nous allons commencer.

Minifiez vos js et css

Pour les utilisateurs de wordpress => wp-minify.
Pourquoi avoir retenu celui-ci ?
Simplement parce qu’il est [proprement] codé en PHP5, que c’est un projet qui date de 2007 (donc qui a eu le temps de murir) et qu’il est plus rapide que PHP-Speedy que je possedai avant. Il vous suffit d’ajouter l’extension via l’interface d’admin de wordpress. Rien de bien compliqué puisque la configuration par défaut est idéale.

Servez vos ressources statiques via un/des sous-domaine(s)

Les ressources statiques kesako ?
Et bien généralement, ce sont vos images, pdf, videos, css, js, … Tout ce qui peut être « inclus » dans votre source html.
Il est recommandé de servir ces ressources à partir de serveurs sans cookies. Plutôt que d’acheter un serveur uniquement pour ces ressources, nous allons créer un sous-domaine afin de servir ces ressources statiques. Pour ma part, j’ai crée static.renardudezert.com qui n’est rien d’autre qu’un CNAME du www et qui pointe sur le même dossier que le www. (je le stipule ici car la suite de cet article se base sur cette configuration)

Si vous utilisez Google Analytics, il vous faudra parametrer le domaine pour le cookie, sinon tout ce que vous allez faire par la suite ne servira pas a grand chose

 var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXXXX-X']); 
  _gaq.push(['_setDomainName', 'www.renardudezert.com']); // <- Mettez ici votre domaine avec www
  _gaq.push(['_trackPageview']);

Cette astuce me vient du site askapache.com (que je vous recommande au
passage).

Edit du 2 Aout 2010 :
Il s’agit de récupérer le script d’analytics afin de le servir directement à partir de votre site. Pour cela récupérez le ga.js et placez le dans le dossier de votre thème (vous pouvez le mettre ailleurs, mais c’est juste pour assurer une cohérence par rapport à la suite de mon article). [Apparement Analytics ne remonte pas les infos si vous servez le js en local, la suite de l’article a été modifiée en conséquence.]

Je n’utilise pas de plugin pour analytics, je l’ai intégré directement dans mon thème (c’est important de le préciser je pense).
Voici l’intégralité du code pour analytics : 

<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXXXX-X']); // Mettez votre ID Google Analytics
  _gaq.push(['_setDomainName', 'www.renardudezert.com']); // -> Evite d'avoir un cookie sur static.renardudezert.com
  _gaq.push(['_trackPageview']);
 
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
 
</script>

Hack du plugin WP Minify

Bon, je préfère vous prévenir tout de suite : ça va pas être méchant du tout.
Pour cela dans l’admin WP :
Extensions->WP Minify -> Modifier
Recherchez la ligne :

return array($base_url . '?f=' . implode(',', $files) . $debug_string . $base_string . $extra_string);

Et ajoutez la ligne de code suivante :

// Added By Renardudezert in order to serve static content
$base_url = str_replace('http://www.', 'http://static.', $base_url);
return array($base_url . '?f=' . implode(',', $files) . $debug_string . $base_string . $extra_string); // <- C'est la ligne que l'on cherchait, ne l'ajoutez pas 2 fois !!!

Pensez à quelques petites optimisations

  • Générez ou créez votre favicon.ico (ici par exemple) et placez le dans le dossier de votre thème
  • Optimisez vos images => je ne peux que vous recommender le plugin wordpress smush-it

Une fois installé, le plugin optimisera les images que vous uploaderez comme un grand, sinon rdv dans votre admin WP, Medias->Bibliotheque et vous aurez une belle colonne Smush avec un lien smush-it.

Concrètement ça donne quoi ?

Avec aucune optimisation :

  • Onglet Yslow


  • Onglet PageSpeed


Avec toutes les optimisations de cet article :

  • Onglet Yslow


  • Onglet PageSpeed

Voila, je vous incite à abuser volontairement de ces méthodes (surtout le htaccess qui ne coute rien et qui fait beaucoup de bien).

P.S. : Pour les rapport d’YSlow, ne vous focalisez pas sur le CDN, qui pour un blog ou site de petite/moyenne taille n’a strictement AUCUN INTERET.

26 réponses sur « Boostez votre wordpress !!! »

Une très bonne initiative de votre part ! Ça peut paraître rien d’effectuer ces menues opérations, mais quand on charge le site via du 512K, on est bien content !

Et pour le CDN je confirme à mon tour. L’utiliser pour un petit site serait même néfaste, tant le gain serait compensé par une perte due au « DNS lookup », c’est-à-dire le temps passé à se connecter à un domaine différent.

Je viens de voir un lien pointant vers mon article sur le htaccess. Merci beaucoup, surtout que tu avais déjà participé à l’élaboration de l’htaccess pour l’améliorer.

Je connaissais déjà wp-minify, que je recommande également.

Par contre, je n’avais jamais pensé à utiliser un sous-domaine pour mes ressources statiques. il faudra que j’essaie.

@Maxime : Enfin quelqu’un qui partage le même avis que moi sur le CDN. Ca fait plaisir !!

@Daniel : C’est normal pour le lien, une bonne ressource se doit d’être partagée (et je sais que BEAUCOUP de personnes ne mettent pas en place ce petit fichier de quelques Ko qui permet d’économiser énormément de BP [surtout pour les sites a fort trafic]).

Par auteur de l’article

Bonjour!
Très bon petit article avec la partie du hack du plugin WP-Minify qui est bien intéressant. Une petite remarque, dans la configuration de WP-Minify il n’y a pas d’option pour la gestion du cache des fichiers générés ???

Sinon quel a été l’impact sur le temps de chargement ? L’inconvénient de cette solution est que la génération dynamique peut augmenter le temps de chargement lorsqu’il y a trop de fichiers à intégrer.

Johan

@Conseils SEO | Ya-graphic

Installer un plugin via l’admin WP peut parfois avoir des résultats … désastreux. La méthode manuelle étant un poil plus longue mais beaucoup plus fiable est a privilégier.
Il y a aussi la possibilité qu’un plugin WP entre en conflit avec un autre.

Pour le thème WordPress, il a son importance uniquement si on compare un thème « Pure CSS » à un thème « Pure image » (et je ne parle pas de l’optimisation des images). Ce n’est pas le paramètre qui influe le plus dans le temps de chargement d’un site.

Après on pourrait parler de l’hébergement dans sa généralité (bande passante, CPU et RAM du serveur, localisation du serveur, OS du serveur, configuration du serveur web, …) mais ce n’est pas le sujet du billet.

@Johan :

Excellente remarque que la gestion du cache des fichiers générés (j’ai oublier d’en parler). En fait cela se joue dans le fichier de config de wp-minify (plugins/wp-minify/min/config.php) et la variable de config du cache est la suivante : $min_serveOptions[‘maxAge’].

L’impact sur le temps de chargement pour ce type de site est très faible. J’ai cependant mis en place ces techniques (couplées à d’autres) sur les sites de l’agence pour laquelle je travaille et cela peut varier de 0.3 sec a plus de 3 sec !!!

Pour smush.it bonne idée, je vais jeter un oeil au plugin dans la journée.

Par auteur de l’article

@Conseils SEO :
Les problèmes avec WordPress viennent plus fréquement des plugins que des thèmes… Il suffit qu’un plugin n’inclut pas correctement un JS ou une feuille de style pour que WP-Minify parte en live !

@RDD :
Ce que j’ai fait pour WP-Smushit :
J’ai éditer le fichier du plugin à la ligne 135 en remplacant :
// determine the public URL
$file_url = str_replace( WP_CONTENT_DIR, WP_CONTENT_URL, $file );
par

// determine the public URL
$file_url = str_replace(« /chemin/vers/repertoire/static/img/ », « http://static.johanbleuzen.fr/ », $file );

Ensuite il ne reste plus qu’a modifier la configuration de WordPress (onglet Réglages/Medias) pour stocker les fichiers média dans :
/chemin/vers/repertoire/static/img/
Et mettre l’adresse web complète :
http://static.johanbleuzen.fr/img
NE PAS METTRE DE ‘/’ A LA FIN (sinon vos URLs auront 2 ‘/’

Petite précision, la configuration est celle que j’ai appliquée pour mon blog et qui fonctionne bien, elle est a adapter selon votre environnement.

Pour les CDN : Il est recommandé de les utiliser uniquement pour des sites qui ont pour cibles des utilisateurs du monde entier… Pour des petits sites ou des blogs francais il n’y a aucun intérêt nous sommes d’accord là dessus… 😉

@Conseils SEO | Ya-graphic :
C’est vrai qu’une comparaison sur ce type de plugins serait bienvenue (je le note, si personne ne le fait avant moi).

Un tout petit indice de comparaison : j’utilisais PHP-Speedy disponible ici http://aciddrop.com/php-speedy/ (qui est vraiment très bien lui aussi) et l’écart entre les 2 était de 0.2 secondes (tests sur un load complet sans ressources en cache).

C’est dérisoire je l’accorde, il faudrait approfondir les tests avec les ressources déjà en cache (chose que j’ai oublier de faire au moment de mes tests).

Par auteur de l’article

Bon article, mais personnellement quand j’avais testé PHP Speedy vs Wp-minify, PHP Speedy était bien plus efficace…mais peut-être que ca changé entre temps…Faudrait que je reteste ^^

Le pb est que sur ton static tu ne gères pas tout les répertoires avec jpg, png, gif etc.. comme uploads ou images.

@Chronoduweb :
En effet, et c’est volontaire. Pour plusieurs raisons.

1 – Le nombre d’images sur le blog est très très faible (une dizaine sur la home et pas plus de 10 par article). Je n’ai aucun intérêt de servir si peu de ressources sur mon domaine static puisque mon htaccess gère le cache de ces fichiers. Si mon site proposait une centaine d’images, je n’aurai pas le même discours.

2 – Je n’avais pas modifié la conf de wordpress pour lui dire d’appeler les fichiers « medias » à partir de mon domaine static (Reglages->Medias->Adresse web complète pour les fichiers). Donc les billets précédents ainsi que celui-ci ne bénéficient pas de cette optimisation. J’aurais pu faire un UPDATE … REPLACE .. dans ma BDD, mais je n’ai pas le temps (pour l’instant, je pense le faire a l’avenir).

Par auteur de l’article

@Chronoduweb

Si si, c est possible;
il suffit de mettre un proxy (varnish/squid) devant ton apache et de definir une route vers apache pour wordpress et vers un lighttpd ou un nginx pour servir les urls du domaine statique (avec un check sur l extension des fichiers bien sur).

Avec ce genre de solution, on gagne un avantage de plus, lighttpd etant bien plus performant qu apache pour servir des images et autre contenu statique.

Ce genre de solution est utile sur de gros sites a fort traffic et contenant pas mal de contenu statique.

Bonjour, j’aurai besoin d’explication.
J’ai installé wp minify et activé seulement mon theme se retrouve tout nu. En effet il est noir et avec minify il se retrouve tout blanc. J’ai donc desactivé.
D’autre part je n’ai pas compris l’astuce de gg analytic sachant que moi j’utilise un pluging.
Maintenant j’ai besoin d’alleger mon site qui d’après ggest lent + de 5 secondes
J’ai également installé YSlow
Un petit conseil?

@Gino:
Bonjour, je commencerai par activer la compression des fichiers sur ton serveur. Pour cela, il suffit juste de créer un .htaccess a la racine de ton site et d’y insérer le contenu que tu pourras trouver dans le lien au début de l’article (chez Seomix). Tu pourras constater un très net changement au niveau du temps de chargement et ta note sur gtmetrix va augmenter de facon considérable.

Pour google analytics, ce n’est qu’une astuce afin de servir les ressources statiques a partir d’un sous-domaine. Les manipulations sont un peu plus complexes que le .htacces pour un gain de performances pas exceptionnel.

Commence par mettre ce fichier en place (le .htaccess) sur ton site, tu verras ça sera le jour et la nuit.

Pour wp-minify, as tu apporté la modification que j’ai mis dans l’article (car si tu n’as pas créer de sous-domaine il ne faut pas faire la modification).

J’espère t’avoir éclairer un minimum …

Par auteur de l’article

Ok merci j’ai installé le .htaccess et de 57 pour yslow je passe à 77 % et de 69 à 77 % pour speed
seulement voila ma page d’accueil s’affiche bien mais plus aucune autres de mes pages (erreur 404) categorie ect.
Donc la je suis dans l’ennuie

@Gino :
Cela ressemble fortement a l’ecrasement du .htaccess de wordpress.

Ajoute ceci au debut de ton fichier (en conservant le reste).

# BEGIN WordPress

RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ – [L]

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]

# END WordPress

Cela devrait regler ton probleme.

Par auteur de l’article

Oufff merci
Voila qui m’enlève une terrible angoisse. Ca fonctionne correctement. Merci de la réponse urgente.

sur wp minify je n’ai fait aucune modif. Peut etre qu’il faut interdire le theme dans les options ? mais la… suis encore tout en sueur…
Faut qd même que je récupere quelques % en temps de chargement.
C’est déjà beaucoup mieux merci

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *