Wordpress : optimiser la vitesse d’affichage

Après avoir évoqué dans un précédent article quelques solutions faciles à mettre en ouvre pour optimiser le référencement de votre blog WordPress, voyons maintenant comment améliorer les temps de chargement de vos pages Web. Wordpress a beaucoup de qualité, mais il a malheureusement tendance à utiliser un peu trop de ressources, même si la version 2.8 apporte quelques améliorations significatives en matière de performance.

Alors que Google confirme le fait qu’il tiendrait compte de la vitesse de chargement d’un site Web dans ses critères de positionnement, il convient plus que jamais de s’intéresser aux bonnes pratiques destinées à diminuer le temps de chargement des pages de votre blog WordPress. Cela est d’autant plus nécessaire que, selon des recherches récentes, près de 75% des utilisateurs d’Internet ne retournent pas sur des sites qui prennent plus de quatre secondes à s’afficher.

Mesurer la vitesse de chargement de votre site

Pour optimiser efficacement les temps de chargement des pages de vos pages Web, il est nécessaire, au préalable, de disposer de bons outils d’analyse. En effet, sans diagnostic, impossible d’intervenir efficacement. Il existe de nombreux outils, mais en voici quatre, très pratiques, complets et de surcroît gratuits.

1. Performance du site

Google propose un outil expérimental, Performances du site, disponible dans les Labos des Outils pour les webmasters (Google Webmaster Tools). Cet outil fournit des informations concernant la réactivité de votre site. Vous connaîtrez ainsi le temps de chargement moyen des pages de votre site, ainsi que les tendances observées au cours des derniers mois. Vous pourrez également identifier les pages les plus rapides et les plus lentes de votre site. Cette donnée est obtenue directement auprès des internautes ayant installé la Barre d’outils Google et activé la fonctionnalité PageRank (facultative).

2. Page Speed

Page Speed est une extension pour Firebug, réalisée par Google, qui vous aidera à diagnostiquer et à résoudre les problèmes liés à la vitesse de chargement de vos pages.

L’onglet “Page speed” lance une analyse de la page web active. Une fois l’analyse terminée, la liste des différents éléments pour l’optimisation de la performance de votre site s’affiche de façon détaillée: chaque image, chaque fichier js et css sont passés au crible. Page Speed classe tous ces différents éléments par ordre de priorité et estime le nombre kB potentiellement économisé.

L’onglet Page Speed Activity, affiche une timeline de l’activité du navigateur pendant le chargement de la page. Cette chronologie permet de repérer les éventuelles causes de lenteur dans l’affichage du site, que celles-ci proviennent du serveur, du DNS, du Javascript… En option, dans l’onglet “Page Speed” vous avez également la possibilité de choisir un autre profil de navigateur pour tester votre site.

3. YSlow

Développée par Yahoo, Yslow (littéralement “pourquoi ça rame”) est une extension pour Firebug dont le but est d’effectuer des contrôles de performances sur 13 points clés d’un site web. Il vous permettra de connaître le temps de chargement de la page visualisée et vous fournira une analyse détaillée (et plus complète que celle fournit par Page Speed) de la page web en cours. Cet outil va donner à votre blog une note, allant de A à F, avec un score, et des notes détaillées pour chaque point pris en compte par l’extension. Pour en savoir plus, sur l’utilisation de YSlow, vous pouvez consulter le podcast de WordPress Channel intitulé Concevoir des thèmes WordPress avec YSlow.

4. WP Tuner

WP Tuner est un petit outil fort simple qui permet de visualiser la consommation de ressource de Wordpress. Dès que vous êtes connecté sur le panneau d’administration, les informations s’affichent en bas de chaque pages visité sur votre blog (ça fonctionne aussi sur Wordpress Mu) : le temps de réponse du serveur, les requêtes MySQL, les plugins chargés…

Améliorer la vitesse de chargement de votre site

1. Minimiser le nombre de requêtes HTTP

Lorsqu’une page s’affiche dans le navigateur, elle génère un nombre impressionnant d’appel de fichiers : images, feuilles de styles et fichiers javascript du template et des différents plugins. D’après la Liste des bonnes pratiques pour augmenter les performances d’un site (liste établie par Yahoo) 80% du temps total nécessaire pour délivrer une page web est fourni sur le front-end pour délivrer tous les composants d’une page : images, feuilles de style, javascripts, flash… En d’autres termes, 80% du temps de chargement d’une page est occupé à la présentation des données. Minimiser les requêtes HTTP aura donc pour effet d’augmenter la rapidité de chargement des pages. Par exemple, au lieu de faire 5 requêtes HTTP en affichant 5 fois la même image en dur dans une page, on réduit à 1 seule requête HTTP en appelant cette image par la feuille de style.

Il y a en fait de multiples moyens de limiter les requêtes HTTP. En voici quelques uns :

a) Installer le plugin External Files Optimizer

Pour optimiser la vitesse d’affichage d’un site Web, une des astuces consiste à réduire le nombre d’appels de fichiers externes et, si possible, de les compresser. Cela concerne notamment les feuilles de styles et les fichiers JavaScript. Le problème, avec un site WordPress, c’est que les différents plugins installés génèrent bien souvent leurs propres appels de fichiers externes. Résultat, on se retrouve très rapidement avec des dizaines de fichiers supplémentaires dans l’entête de nos pages.

Pour remédier à ce problème, on pourrait mettre les mains dans le codes. Une solution très fastidieuse et qui poserait problème à chaque mise à jour de plugin.

Il est beaucoup plus pratique d’utiliser le plugin External Files Optimizer. Ce plugin analyse le résultat des fonctions wp_head() et wp_footer() pour en extraire tous les appels de fichiers css et js, puis récupère leur contenu et le combine dans un fichier unique pour chacun des deux types. Enfin il compresse le tout via gzip pour diminuer le poids final. [1]

b) Supprimer les requêtes PHP inutiles dans les fichiers header.php et footer.pho.

Il suffit de remplacer :

• bloginfo(‘charset’) par l’encodage de vos pages : UTF-8.
• bloginfo(’stylesheet_url’) par l’URI statique de votre feuille de style.
• bloginfo(‘rss2_url’) par l’URI statique de votre flux RSS.
• bloginfo(‘pingback_url’) par l’URI statique de votre serveur XML-RPC.
• bloginfo(‘URL’) par l’URI statique de votre blog (sans le slash final).

c) Limiter le nombre des plugins au strict minimum.

À chaque fois qu’un utilisateur effectue une action sur un blog wordpress, le serveur appelle les plugins nécessaires pour servir la page. Si vous avez beaucoup de plugins, cela peut ralentir significativement votre blog. Faîtes le ménage dans vos plugins et ne garder que les essentiels.

Désactivez les plugins dès que vous n’en avez plus besoin. C’est le cas par exemple des plugins servant à auditer les performances de votre site, ou bien ceux qui permettent de nettoyer de temps à autre la base de données. Ces plugins doivent être utililsés ponctuellement puis désactivés.

Remarque : au-delà de ces quelques conseils, il est fortement conseillé de combiner les fichiers appelé par une page Web. Par exemple, pour les images, on peut utiliser les sprites CSS, concaténer tous vos fichiers CSS dans un seul et unique fichier et faire de même pour les fichiers JS. Ensuite, il faut compresser ces fichiers. Evidemment, il existe des plugins wordpress pour ça : WP CSS et WP JS. Pour en savoir plus, consulter la section « Quelques bonnes pratiques ».

3. Mettre en place un cache performant

Lorsqu’un utilisateur se connecte à un serveur Web, il télécharge toutes les ressources associées à la page Web qu’il consulte. Cependant sur la page, très peu de ressources sont modifiées dans le temps : vous ne changez pas le logo de votre site ou les images d’un article très souvent. Aussi, comment éviter à l’utilisateur de télécharger à nouveau ces ressources? Grâce à la mise en cache, on peut conserver une copie de certains éléments pour éviter d’avoir à les reconstituer plusieurs fois. Le cache peut se situer sur le serveur (cache côté serveur) ou dans le navigateur de l’internaute (cache côté client).

Il existe plusieurs plugins de cache pour WordPress, mais WP Super Cache est sans aucun doute le plus populaire/efficace. Ce plugin crée pour chaque page appelée un fichier HTML de la page. Vous aurez donc une copie complète de votre blog au format HTML sous wp-content/cache/supercache. Au niveau performances, elles sont excellentes puisque seul Apache est utilisé pour transférer les pages à vos visiteurs, et PHP/MySQL périodiquement pour rafraichir les pages. WP Super Cache permet un réglage précis du système de cache et permet notamment de préciser si une partie spécifique de la page doit rester dynamique (par exemple la liste des derniers commentaires).

Avec WP Super Cache, l’amélioration des performances de Wordpress est spectaculaire. Malheureusement, l’installation de ce plugin n’est vraiment pas aisée, sans parler du fait que la gestion CPU et mémoire entraîne des surcharges aléatoires provoquant des plantages de serveur. Pour remédier à ce problème, certains hébergeurs ont installé un script qui relance APACHE. On peut également regretter l’incompatibilité avec certains plugins. À noter enfin que pour utiliser WP Super cache, il faut que votre hébergement supporte la réécriture d’URL via le fichier .htaccess présent à la racine du blog. C’est un facteur qui peut être bloquant sur certains hébergements mutualisés.

Toutefois, si vous ne pouvez pas l’installer, rassurez-vous : en effet, d’après Amaury, co-fondateur de WordPress Francophone, « il faut faire plus de 2000 visites par mois, pour justifier l’activation du cache ».

Pour en savoir plus sur le sujet, je vous conseille la lecture de l’article WordPress : Optimiser son blog avec un système de cache, d’où sont extraits ces quelques renseignements.

4. Allouer plus de mémoire à wordpress

Depuis la version 2.8, la mémoire utilisée par Wordpress a encore augmentée pour atteindre le cap fatidique des 32 Mo. C’est en effet la limite qu’impose un bon nombre d’hébergements mutualisés. Lorsque vous êtes proche de la limite, les performances de votre blog se dégrade. Si votre hébergement le permet, vous pouvez passer outre la limite par défaut imposé dans le script.

Pour cela, deux modifications sont à prévoir :

1°) Dans le fichier wp-settings.php, vous devez modifier la valeur fixé par défaut à 32Mo et la remplacer par 64 Mo :

1. if ( !defined(‘WP_MEMORY_LIMIT’) )
2.    define(‘WP_MEMORY_LIMIT’, ‘32M’);

2°) Et dans wp-config.php, il vous suffit d’insérer la directive suivante :

1. define(‘WP_MEMORY_LIMIT’, ‘64M’);

5. Optimiser les performances de PHP

Pour cela, il suffit de changer 4 paramètres de PHP dans le fichier .htaccess à la racine de votre FTP (dans le dossier WWW).

1. SetEnv REGISTER_GLOBALS 0
2. SetEnv ZEND_OPTIMIZER 1
3. SetEnv MAGIC_QUOTES 0
4. SetEnv PHP_VER 5

Ce script désactive les directives PHP magic quotes, register globals qui n’apportent rien à WordPress. Il permet de passer à PHP5 (qui offre une meilleure comptabilité avec les extensions) et d’activer le module PHP Zend Optimiser qui optimise le code PHP et met en cache les traitements récurrents.

6. Réduire le poids de vos pages sans action directe sur leur contenu

Bien évidemment, il est essentiel de ne pas surcharger inutilement une page Web, par l’ajout d’images trops lourdes ou trop nombreuses, par l’intégration de multipes vidéos ou animations Flash… Mais voici une petite intervention très efficace dans le .htaccess qui aura pour effet de réduire fortement le poids de vos pages sans action directe de votre part sur leur contenu.

1. AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/javascript text/css application/x-javascript
2. BrowserMatch ^Mozilla/4 gzip-only-text/html
3. BrowserMatch ^Mozilla/4.0[678] no-gzip
4. BrowserMatch bMSIE !no-gzip !gzip-only-text/html

7. Ajouter des headers Expire

L’en-tête Expires indique quand un élément devra expirer du cache du navigateur; mettre une date d’expiration dans un futur lointain permet de maximiser l’utilisation du cache navigateur et donc d’éviter les téléchargements inutiles, ce qui est particulièrement utile pour les éléments statiques (images, feuilles de style, …) qui changent peu fréquemment mais qui ralentissent l’affichage de la page s’ils ne sont pas en cache. Il suffit d’ajouter les lignes suivantes dans votre fichier .htaccess :

1. <ifmodule mod_expires.c="">
2. #CACHE
3. ExpiresActive on
4. #images
5. ExpiresByType image/jpg "access plus 2 years"
6. ExpiresByType image/jpeg "access plus 2 years"
7. ExpiresByType image/gif "access plus 2 years"
8. ExpiresByType image/png "access plus 2 years"
9. ExpiresByType image/x-icon "modification plus 2 years"
10. #flash
11. ExpiresByType application/x-shockwave-flash "modification plus 2 years"
12. #css et scripts
13. ExpiresByType text/css "modification plus 2 years"
14. Header set Cache-Control "max-age=86400, public"
15. ExpiresByType text/javascript "modification plus 2 years"
16. #html/php
17. ExpiresByType text/html "modification plus 2 years"
18. ExpiresByType text/xml "modification plus 2 years"
19. #tout le reste
20. ExpiresDefault "modification plus 2 years"
21. Header set Cache-Control "max-age=86400, public"
22. ### / CACHE
23. </ifmodule>

8. Compresser les contenus côté serveur

Pour cela il suffit d’ajouter ces lignes dans votre fichier .htaccess

1. <IfModule mod_deflate.c>
2.    <FilesMatch « .(js|css|png|gif|jpg)$ »>
3.    SetOutputFilter DEFLATE
4.    </FilesMatch>
5. </IfModule>

9. Compresser les fichiers avec gzip

Ceux qui possède leur propre serveur peuvent compresser (via gzip) tout le contenu envoyé aux navigateurs. Cette règle vise à limiter au maximum le poids des contenus distribués en réduisant de 5 à 70% la taille des fichiers envoyés du serveur au client, ce qui diminue non seuleemnt le temps de chargement mais aussi la bande passante consommée. Pour ce faire, configurez la compression dans le fichier .htaccess :

1. <ifmodule mod_deflate.c="">
2.    AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/x-javascript application/xhtml+xml application/xml application/rss+xml application/atom_xml
3.  </ifmodule>

Pour les packs mutualisés 1and1, il faut créer (ou modifier) le fichier php.ini à la racine de votre répertoire, et y ajouter les lignes :

1. zlib.output_compression = On
2. zlib.output_compression_level = 5

10. Supprimer les scripts redondants

Configurez les etags: il suffit d’ajouter cette ligne dans votre fichier .htaccess

1. FileEtag None

Remarque : après avoir modifié correctement votre fichier .htaccess, fixer lui un CHMOD de 0444 pour être certain que WordPress ne le modifie automatiquement lors de l’installation d’un plugin ou lors d’une mise à jour des permaliens.

11. Nettoyer votre base de données

Les bases de données ont besoin d’être régulièrement nettoyées afin d’optimiser leurs performances. Pour en savoir plus à ce sujet, consultez l’article WordPress: nettoyer la base de données.

12.  Désactiver/limiter/nettoyer les révisions de billets

WordPress garde en mémoire les différentes versions de chaque billet : les révisions. Très pratique dans le cadre d’un travail collaboratif, mais cette accumulation de versions finit par prendre une place conséquente dans la base de données. Pour désactiver leur création, voici une ligne à ajouter dans le wp-config.php :

1. define(’WP_POST_REVISIONS’, false);

Pour en savoir plus à ce sujet, consultez l’article Gérer le versionning des articles WordPress… et optimiser la base de données.

Quelques bonnes pratiques pour améliorer la réactivité de vos pages Web

1. Optimiser les CSS

Les feuilles de styles peuvent rapidement devenir des ressources volumineuses puisqu’elles contiennent énormément de caractères inutiles : espaces, sauts de lignes, commentaires. Le navigateur Web quand il reçoit une feuille de style ignore c’est caractère, ils ne sont utilisés que par le designer afin de commenter les instructions.

Afin d’économiser de la bande passante et du temps de téléchargement d’une page Web il est conseillé de réduire la taille des feuilles de styles grâce à des services Web comme : CSS Optimize, Icey’s CSS Compressor, Flumpcake CSS Optimizer, Clean CSS.

Ces outils permettent de :

• Factoriser certains attributs (c’est-à-dire qu’on utilise leur forme raccourcie) des polices de caractères, bordures, images de fond, …
• regrouper les sélecteurs lorsque cela est possible.
• supprimer les unités des valeurs de certains attributs lorsqu’elles sont nulles.
• enlever les commentaires et espaces afin de réduire au maximum la taille du fichier.

2. Optimiser les Javascripts

Tout comme les CSS, les fichiers JavaScript peuvent également être optimisés afin de diminuer le temps de téléchargements de ces fichiers. Voici les services Web qui proposent de réduire vos JavaScripts : Dojo Shrinksafe, JavaScript Compressor.

Rappel : il est conseillé de placer les fichiers javascript en fin de page.

3. Concaténer les CSS et les Javascripts

Toujours dans l’optique d’économiser de la bande passante, de réduire les requêtes HTTP et donc d’optimiser la vitesse d’affichage d’une page Web, il est conseillé de réduire le nombre d’appels de fichiers externes et, si possible, de les compresser. Cela concerne bien évidemment les feuilles de styles et les fichiers JavaScript, mais aussi les nombreux appels de fichiers externes générés par les plugins que vous avez installés. L’une des solutions consiste à combiner soi-même tous ces fichiers externes dans un fichier unique. Un travail fastidieux, et qui doit être renouvelé à chaque mise à jour de plugin. External Files Optimizer permet

Le plugin External Files Optimizer fait ce travail à votre place. Il permet en effet d’optimiser de façon significative — et automatique — les performances de votre site WordPress en fusionnant et en compressant les fichiers externes ajoutés par les différents plugins de votre installation. Le plugin permet donc de limiter les appels de fichiers externes mais également de diminuer la taille globale grâce à la compression gzip.

4. Optimiser les images grâce à smush.it

Smush.It est un outil en ligne qui optimise vos images. Le grand intérêt de Smushit est qu’il réussit à optimiser vos images, sans en altérer ses qualités visuelles. En effet, Smush.it ne cherche pas à gagner de la place en dégradant les images, mais en supprimant tout ce qui n’est pas nécessaire sans en altérer la qualité visuelle, à savoir métadonnées, indications de formats, réduction du nombre de couleurs si possible, passage de GIF à PNG optionnel, etc…

Smush.it existe également sous forme d’une extension pour Firefox, mais c’est aussi un plugin Wordpress : wp-smushit. Très pratique, ce plugin permet d’intégrer ces capacités d’optimisation directement dans l’interface d’administration, ce qui est vraiment très pratique.

5. Évitez les redirections HTTP (301, 302)

Puisque le client effectue une nouvelle requête chaque fois que le serveur renvoie une redirection (301, 302…), il convient d’éviter autant que possible le nombre de redirections. Seuls les redirections utiles pour le SEO devraient être conservées, par exemple celles qui sont utiles pour ne pas perdre le référencement d’une page dont vous avez changé l’URL.
——

Sources : Marwan KHELIF : Guide d’optimisation de vos applications Web. [1] External Files Optimizer.

——
Pour tous renseignements complémentaires, contactez-nous :
www.maccimum.fr (communication globale, tous supports, tous médias).