Afin de ne pas faire fuire vos visiteurs par la lenteur de chargement de votre blog, je vous propose de vous aider à améliorer les temps de chargement de celui-ci. Nous allons utilisé deux extensions Firefox :

• Smush-it : permettant d’optimiser la taille des images utilisés sur votre site.
• Yslow pour firebug : permettant de vérifier de façon automatique l’application des 13 règles de performances. Il offre une vue rapide du poids et du temps de rendu de la page, une notation après vérification une à une des 13 règles :

Installation

Smush-it

Cette extension est disponible à l’adresse : http://smush.it/. A savoir quelle existe sous diférente forme :

• un plugin wordpress :
• un bookmarklet
• une extension firefox

Yslow

En premier lieu, il faut installer Firebug : http://getfirebug.com/ et ensuite installer Yslow disponible à cette adresse : https://addons.mozilla.org/fr/firefox/addon/5369. Après installation vous aurez un onglet de plus dans Firebug et une icône de plus dans la barre de statut en bas du navigateur.

Utilisation

Smush-it

Nous utiliserons ici l’extension firefox. Il suffit de cliquer sur l’icône en bas de la fenêtre firefox

Ensuite si les resultats vous parraise correcte téléchargez vos images depuis le fichier ZIP et de les redeposer sur votre site.

Yslow

Une fois votre page chargé, cliquez sur l’icone YLSOW en bas de la fenêtre Firefox. Ensuite sélectionner l’onglet YSLOW et cliquez sur [Stats] et ensuite une fois le chargement terminée sur [Performances]

Indicateurs de performance

Une fois cette phase terminée, a coté de l’icone de YSLOW apparaissent trois informations importantes : [Note comprise entre A et F] [Taille téléchargée] et [Temps]. Si vous obtenez comme moiF et plus de 7s de chargement, il va falloir optimiser votre site grâce à cet outil. En suivant les indications ci-dessous vous arriverez comme moi a un indice C ou D et 3 ou 4s.

1. Minimisez le nombre de requêtes HTTP : Minimiser le nombre de plugins en ne gardant que les indispensables.
2. Utilisez un réseau spécialisé dans la fourniture de contenus : pour les javascripts modifier votre code pour utiliser ceux de google par exemple.
3. Ajoutez un en-tête d’expiration : il suffit d’ajouter ces lignes dans votre fichier . htaccess
   <FilesMatch « .(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$ »>
   Header set Expires « Thu, 15 Apr 2010 20:00:00 GMT »
   </FilesMatch>
4. Compressez les contenus côté serveur : Pour cela il suffit d’ajouter ces lignes dans votre fichier .htaccess
   <IfModule mod_deflate.c>
   <FilesMatch « .(js|css|png|gif|jpg)$ »>
   SetOutputFilter DEFLATE
   </FilesMatch>
   </IfModule>
5. Placez les feuilles de style en haut de la page :
6. Déplacez les Javascript en bas de page : si possible essayer de déplacer vos fichiers javascript en fin de page
7. Proscrivez les expressions CSS :
8. Placez un maximum de javascript et de CSS dans des fichiers externes :
9. Minimisez les besoins en requêtes DNS :
10. Optimisez le javascript :
11. Évitez les redirections HTTP (301, 302) :
12. Supprimez les scripts redondants :
13. Configurez les etags: il suffit d’ajouter cette ligne dans votre fichier .htaccess
    FileEtag None

Statistiques

Le premier camenbert correspond au chargement complet du site et le second celui où le cache de l’explorateur est activé. Juste en dessous vous avez le poids et le détail de tous les cookies échangés.

Components

La dernière section repertorie tous les composants de la page avec le poids avec et sans gzip, le type, l’url, la présence ou non d’une directive de cache, la présence ou non d’une compression gzip, et bien sur le temps de réponse. Pour chaque composants, en cliquant sur la loupe, vous pouvez accéder au détail des entêtes envoyées par le navigateurs puis reçues.

C’est dans cette section qu’il faudra chercher pour éliminer les composants les plus lourds et les redondants. En effet, par exemple des plugins vont utiliser chacun leur version de Jquery. Une autre source de lenteur de chargement sont les fichiers absents (erreur 404)…..

Objectifs

Quand vous aurez un beau A dans Yslow vous aurez déjà fait le principal. À partir de là vous ne serez plus guidés dans les optimisations à faire et gagner en performance deviendra plus complexe. Mais une aide en ligne est disponbile en cliquant sur les liens de l’onglet [Performance].

Plugins et Thème

Un certain nombre de plugins vont vous permettre de booster les performances de votre blog. Ils sont listés dans la section performances de ce post Les Plugins Wordpress indispensables.

Une autre source d’optimisation est la suppression dans le fichier header.php de votre thème des appels du type bloginfo(‘clé’). Il suffit de les 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).

Votre thème devient moins “dynamique” mais plus réactif !

Related Posts

1. 5 outils pour optimiser le chargement de votre site
2. Page Speed – Améliorer les performances de vos pages Web
3. Sauvegarde complète et automatique de votre blog Wordpress.
4. Les statistiques de votre blog