Les astuces pour optimiser la rapidité de chargement de votre blog / site web (partie 1)
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.
Ca peut être intéressant effectivement d’effectuer un rework des composants de ton template.
Maintenant, il faut benchmarker le ratio de visiteurs sur le site/visiteurs ayant souscrit au fil RSS et ne visitant le site que pour publier des commentaires.
Cette dernière catégorie n’est pas forcément impactée.
Ensuite, combien de pages sont visitées en moyenne par un utilisateur ?
Par ailleurs, sacrifier une partie de l’érgonomie et de l’identité visuelle du site justifie-t-elle réellement le gain en termes de poids pour ces pages ? Surtout au regard des connexions haut débit dont disposent la majorité des foyers et entreprises.
On peut effectivement se passer de plug-ins non nécessaires, mais d’autres ont pour rôle de fidéliser les lecteurs (au delà des articles).
On peut retravailler certains éléments (optimisation de scripts, cache, format/résolution des photos) sans pour autant dénaturer la page.
As-tu réalisé un calcul du temps d’affichage de la page avant et après ?
Hello Fays,
Tu as raison. Il faut faire un compromis entre l’utile et l’inutile, dont toutes les choses qui font l’identité d’un blog, les autres qui servent à fidéliser les visiteurs, à en gagner d’autres, etc.
Après, pour les benchmarks dont tu parles, cela fait partie des choses que je souhaiterais découvrir dans les prochains jours, une fois que j’aurai fini les optimisations destinées à réduire la taille (et les articles qui vont avec bien sûr, la partie 2, 3, etc.). Cela pourrait être un bon exercice pour maitriser toutes les facette de Google Analytics (et l’autre optimiseur de Google) dont je n’ai découvert que les fonctionnalités de base, pas encore les autres fonctionnalités avancées avec lesquelles ont peut faire des choses assez poussées ^_^ .
Pour ce qui est de l’affichage, il est nettement mieux, cela crève les yeux. Après, je n’ai pas calculé la vitesse et le pourcentage gagné, car l’objectif était surtout d’optimiser la taille.
La première optimisation que je vois, de mon point de vue, est de limiter l’échange d’informations entre différents serveurs/services.
Une page qui pèse au total 500kb est encore relativement rapide à charger. Mais si l’affichage est limité par le temps d’attente d’un serveur distant, twitter par exemple, le temps de chargement va en prendre un gros coup.
Avoir sur sa page du twitter, du google, et encore d’autres services externes, va faire monter à fond le temps de chargement de la page. Le poids des données n’a plus rien à voir là dedans, ou presque.
et j’ajoute : pensez aux services qui ne répondent pas, ça m’est arrivé avec twitter hier, du coup j’ai mis le module plus bas et limité à la page d’accueil.
Excellente remarque Tominardi. En plus d’être parfois un tantinet lourds (tout est question de point de vue), les serveurs de certains widgets ne répondent parfois pas assez rapidement.
Cela m’est arrivé un jour aussi avec Twitter, Delicious et MyBlogLog. C’était une vraie torture mon ancienne page pleine de Widgets (et je n’étais malheureusement pas le seul !).
Peut-être qu’un début de solution serait d’utiliser le Javascript pour ne charger les données de Twitter, Delicious, etc. que quand l’essentiel de la homepage est chargé (en plus de donner la possibilité de désactiver ces widgets avec un bouton, tout en faisant en sorte que le site se souvienne de ce paramètre).
oh ! effectivement mes pages pèsent dans les environs des 400Ko… Va falloir que je passe à l’action !
PS : Juste une remarque… 90% des visiteurs sont français/belges/etrangers… On le sait tous, dans ces pays, ils ont du haut début, moi-même actuellement, je surfe avec du 100Mo, et mon blog se charge en même pas 0,5 secondes… Je me demande si ça serait vraiment intéressant de procéder à cette optimisation !
À toi de peser le pour et le contre Kamal. Peut-être que cela t’apportera plus que tu le crois (ou pas… 🙂 ).
Bah, suffit de surfer avec un navigateur bien rapide, genre Links, pour que meme les pages les plus lourdes s’affichent en un clin d’oeil 😉
ahh ! je viens de trouver un bon » pour » la bande passante, ma bête noire ^_^
@kamal: Héhé, je me souviens de tes déboires avec la BP !
@Eris: 😀
@Eris, je demande à voir le support AJAX dans Links 😀
@Asher256: le temps de chargement est lié justement à la remarque de tominardi. Le temps de chargement n’est pas tant lié à la taille de la page, mais à l’optimisation que tu en as faite, dont la suppression de widgets à méthodes bloquantes (qui ne rendent la main qu’une fois qu’ils ont eu une réponse ou suite à une erreur) et qui empêchent éventuellement le chargement de la page.
Bien entendu cela doit se faire sur des moyennes et non sur un simple chargement de page.
De même il aurait fallu benchmarker cela avant d’effectuer les modifications.
Si tu disposes toujours de l’ancienne version, tu peux le faire. 🙂
Ce n’est pas grave pour le benchmark. Une autre fois… 🙂 Tu conseilles quoi comme outil pour ce benchmark Fays ? FireBug serait suffisant ?
Sinon, je suis d’accord avec vous. Les Widgets ont un impact énorme sur les performances générales des blogs. Après, en deuxième position, je classerai mod_expires. Son apport est vraiment manifeste.
Concernant la taille, bien que moins importante pour ceux qui ont une connexion très rapide, elle a aussi ses petits avantages, ne serais-ce que pour ceux qui naviguent en bas débit ou avec leur mobile dans une zone pas très couverte 🙂 .
Houla, je viens de lancer YSlow sur ton blog et le diagnostique n’est pas terrible:
Performance Grade: F (52) : C’est vraiment pas bien (c’est le niveau le plus mauvais) tu peux faire beaucoup mieux et rapidement.
1 – Make fewer HTTP requests : Fait moins de requêtes HTTP car il y a 7 javascript externes et 24 images background CSS. Tu peux optimiser cela en regroupant tes JS dans un seul gros JS (concaténation de tes JS). Pour tes images tu peux les concaténer en utilisant le design pattern de css sprite images. Utilise ce générateur open source sur lequel j’ai contribué : http://spritegen.website-performance.org/
2 – Add an Expires header : Ajoute les en-têtes d’expiration sur tes css, js, images, …, il en maque un paquet.
3 – Gzip components : Active la compression gzip sur apache pour les navigateur supportant le gzip notamment sur les js et css.
4 – Minify JS : Minimise tes JS et CSS en utilisant des offuscateurs et minifieur (suppression des espaces et tabulations, retour à la ligne, …). Utilise
5 – Configure ETags : Configure ETags sur tes CSS, JS et GIF.
Si tu fais ces 5 manipulations tu va considérablement améliorer le rendering de tes pages web.
Contrairement à ce que tu dis utilise YSlow et cela t’éviteras plein de problèmes, car les problèmes de performances ne sont pas liés uniquement aux poids des pages et composants (optimisation par utilisation du cache client, compression gzip, reduction du nombre de requêtes HTTP et donc réduction du nombre de points introduisant des temps de latences, …).
Pour finir j’ai quelques infos sur un vieux post de mon blog : http://java4it.blogspot.com/2007/11/optimisation-amliorer-le-chargement-des.html et http://java4it.blogspot.com/2007/08/outils-de-compression-pour-les.html
Très intéressent comme billet. Je fois m’en inspirer pour alléger un peu les pages de mon blog. Merci Asher 😉
@Nabil: Merci ^_^ Tiens nous au courant de ton Benchmark !
@L. Bert: oui oui, tout cela est prévu. Cet article, c’est la première étape (qui a pris plusieurs heures quand même) d’une série d’optimisations. D’ailleurs, c’est pour cette raison que j’ai marqué l’article « Partie 1 », je compte, à chaque fois que je finirai une étape, poster un article afin de parler des astuces appliquées à chaque fois. Merci pour les deux liens sur ton blog et les conseils. Je les appliqueraient dès que possible !
la lourdeur de mes pages web , c’est ce qui m’a fait quitter le blogging !!
après 120 posts riches en photo , video , « copywriting » , … il me fallait ensuite parfois 2heures pour écrire un post !
plusieurs fois je m’énervais & j’abandonnais !
le support technique de wordpress.com me dit que tout va bien !
pourtant non !
toujours le même problème 🙁
ces astuces sont elles opérationnelles sur les blog sous wordpress.com comme le mien ?
Ah bon ? À ce point Bélier ? Quitter le blogging car les pages ont été lourdes O.o ? Qu’est-ce qui étais aussi lourd dans ton cas ?
Concernant les conseils de cet article, oui, cela s’applique à WordPress.com si tu as le droit de toucher au HTML de ton template (il n’y a que l’astuce Apache qui ne peut être appliquée 😉 ).
Sympa ce billet. Je n’en dit pas plus pour ne pas alourdir cette page 😉
Carrément : les JS externes en bas de page. YSlow est l’extension indispensable.
Ce qui est vraiment intéressant c’est qu’on peut optimiser les performances d’une page en moins de 20 minutes simplement avec de bons réglages Apache.
C’est ce qui va me faire quitter définitivement le mutualisé.
J’ai également écrit un article sur High Performance Web Sites l’an dernier.
@Edouard: Héhé 🙂
@Oncle Tom: Excellent ton article. Je l’avais lu il y a quelques semaines et je compte bien appliquer petit à petit les conseils de High Performance Websites. Dommage pour Apache… Je suis pour l’instant en mutualisé, mais je compte bien prendre un dédié dans quelques mois 😉 .
interessant article , merci pour les conseils
Je vais optimiser la rapidité de chargement de mes pages …
Merci pour ce billet
Merci a tous, excellent article et excellent billet et merci pour les conseils d’optimisation.