Vous avez créé un blog et vous l’alimentez régulièrement ? C’est excellent ! Mais si, en plus de vos articles de qualité, vous optimisez sa vitesse de chargement et personnalisez son design pour vos visiteurs, les bénéfices seront encore plus grands.

Grâce aux optimisations que vous découvrirez dans cet article, vous fidéliserez les visiteurs disposant d’une connexion lente (ou téléchargeant simultanément d’autres contenus) et encouragerez ceux qui consultent déjà votre blog à explorer davantage de pages. Des pages qui se chargent rapidement incitent naturellement à la navigation.

Cet article est le premier d’une série qui proposera divers conseils et astuces pour améliorer la vitesse de chargement de vos pages. Je ne traiterai ici que de techniques éprouvées sur ce blog, afin de vous fournir des données concrètes et pertinentes pour les blogueurs.

Outils gratuits pour diagnostiquer la lenteur de vos pages

Utiliser Firefox et les outils de développement Firefox

Pour analyser en détail les éléments qui ralentissent vos pages, utilisez Firefox avec ses outils de développement intégrés. Pour les ouvrir, faites un clic droit sur la page, puis sélectionnez « Inspecter », ou utilisez le raccourci clavier F12.

Pour une analyse complémentaire, vous pouvez également installer l’extension YSlow, bien qu’elle ne soit pas essentielle pour les optimisations abordées ici.

Utiliser un site Internet dédié à l’optimisation des pages

Des services comme Pingdom.com permettent également d’analyser la performance de vos pages sans passer par un navigateur spécifique.

Astuces pour optimiser le temps de chargement

Éliminez le superflu

Posez-vous cette question pour chaque widget, image, script JavaScript ou texte : est-ce indispensable ? Supprimez l’inutile, puis vérifiez le poids de la page après chaque suppression.

Optimisez ou éliminez les Javascripts : Widgets, publicités, statistiques, etc.

Les scripts JavaScript sont omniprésents, souvent pour les statistiques, les réseaux sociaux ou la monétisation. Or, ils peuv ent être très lourds.

La majorité des blogs les utilisent pour les statistiques (Google Analytics, WordPress Stats, etc.), pour l’échange automatique de liens (l’Autoroll de Criteo), pour l’intégration des réseaux sociaux (Twitter, Facebook, MyBlogLog), ou encore pour la monétisation (Google AdSense, AD42), entre autres.

Les scripts JavaScript, en particulier ceux associés aux widgets, peuvent être particulièrement gourmands en ressources. À chaque ajout de widget, posez-vous les bonnes questions : est-il réellement utile ? Son poids est-il justifié ?

Désactivez quelques extensions de votre CMS (WordPress, Dotclear, etc.)

J’ai désactivé environ cinq extensions qui ajoutaient inutilement des fichiers JavaScript, CSS, ou d’autres ressources superflues. Elles étaient utilisées uniquement dans quelques articles ou pouvaient être aisément remplacées par des alternatives plus légères.

Ne sous estimez pas les images

Éliminez les images inutiles

J’ai économisé plus de 41 Ko rien qu’en supprimant des images décoratives comme : Certaines images de fond dans le CSS, Une grande bannière Facebook, les mini-bannières W3C et Creative Commons.

Optimisez vos images

Une fois l’inutile éliminé, il convient d’optimiser ce qui est indispensable.

Privilégiez la simplicité. Les couleurs uniformes, sans dégradé, se compressent bien et permettent de réduire significativement la taille des fichiers. Par exemple, l’optimisation de l’en-tête de mon site, par suppression de dégradés et de détails superflus, m’a permis d’économiser environ 10 Ko.

Si une image contient peu de couleurs, convertissez-la du mode RVB vers une palette indexée à 32 ou 256 couleurs, selon le rendu souhaité. Dans certains cas, cette transformation peut entraîner des gains de taille considérables.

Il est également essentiel de tester différents formats d’image. Enregistrez vos fichiers en JPEG, PNG et GIF, puis comparez leur poids. Certaines images sont bien compressées en PNG, tandis que d’autres seront plus légères en GIF.

Cela constitue la base pour économiser quelques octets, voire plusieurs kilo-octets, par image. D’autres techniques plus avancées existent, mais elles sont largement documentées sur Internet.

Pour mes optimisations, j’ai utilisé GIMP, un logiciel libre et gratuit de retouche photo.

Les avatars, Gravatars, Pavatars, etc., ont également un impact non négligeable.

Un point souvent négligé : les avatars. Pour ma part, j’ai conservé les Gravatars pour l’instant, mais il faut savoir que chacun d’eux ajoute des Ko à la page.

Sur un article populaire contenant une cinquantaine de commentaires, cela peut rapidement peser lourd. À titre d’exemple, dans l’un de mes articles très commentés, la suppression des Gravatars a fait passer le poids de la page de 932 Ko à 233 Ko. Une réduction significative qui mérite réflexion.

Activer l’expiration des fichiers dans Apache (htaccess)

Configurer l’expiration des fichiers à l’aide du module mod_expires d’Apache est une étape essentielle pour améliorer la performance de votre site. Cela permet de tirer parti de la mise en cache côté client : les ressources statiques (images, feuilles de style, scripts) ne sont pas rechargées à chaque visite, ce qui accélère considérablement l’affichage des pages lors des visites répétées ou de la navigation entre plusieurs pages.

Dans mon fichier .htaccess, situé à la racine du répertoire /blog/, j’ai activé et configuré mod_expires comme suit :

<ifModule mod_expires.c>
ExpiresActive On
#ExpiresDefault "access plus 1 seconds"
#ExpiresByType text/html "access plus 1 seconds"
ExpiresByType image/gif "access plus 24 hours"
ExpiresByType image/jpeg "access plus 24 hours"
ExpiresByType image/png "access plus 24 hours"
ExpiresByType image/x-icon "access plus 24 hours"
ExpiresByType text/css "access plus 24 hours"
ExpiresByType text/javascript "access plus 24 hours"
ExpiresByType application/x-javascript "access plus 24 hours"
</ifModule>

Cette configuration signifie que les fichiers mentionnés ne seront téléchargés à nouveau qu’après un délai de 24 heures suivant leur premier chargement. Il est également possible d’étendre cette règle à d’autres types de fichiers, comme le HTML, en décommentant les lignes correspondantes ou en ajustant les durées selon vos besoins.

Je recommande vivement de consulter la documentation officielle d’Apache pour explorer les nombreuses possibilités offertes par mod_expires et adapter les règles à la structure de votre site.

Conclusion

Ainsi s’achève cette première partie. La suite de cette série paraîtra prochainement sur ce blog, avec de nouvelles pistes pour rendre votre site encore plus réactif.

En attendant, n’hésitez pas à partager vos propres astuces d’optimisation ou à nous faire part de vos résultats si vous avez déjà commencé à alléger votre blog. Votre retour d’expérience enrichira cette réflexion collective sur la performance web.