Avant tout pourquoi faut-il optimiser la vitesse de chargement de votre blog ? La plupart des foyers ont accès à l'ADSL, la fibre se déploie... Mais il ne faut pas oublier les visites sur tablette ou mobile via un réseau wi-fi ou 3/4g dont les performances peuvent être moyennes. Et surtout les moteurs de recherche incluent dans leur algorithme la vitesse de chargement, ce n'est pas pour rien que Google a créé un outil en ligne pour tester la vitesse des sites.

PageSpeed Insights donne une note sur 100. Un score de 85 ou plus indique que la page s'exécute bien, affirme la documentation de l'outil. L'outil donne des conseils pour améliorer la vitesse... Mais pour les blogueurs qui dépendent des choix de leur plateforme, il n'est pas toujours possible d'agir.

Les scripts et css

Si PageSpeed vous dit...

  • Éliminer les codes JavaScript et CSS qui bloquent l'affichage du contenu...
  • Votre page contient 1 ressources de script et 2 ressources CSS qui bloquent l'affichage de votre page, et donc le retardent.
  • Réduire la taille des ressources JavaScript
  • Supprimez les ressources JavaScript qui bloquent l'affichage

Avec le web dynamique, les fichiers Javascript sont indispensables. Mais il ne faut pas en abuser.

Vérifiez que vous n'avez pas inséré trop de scripts pour ajouter des gadgets par exemple (fichiers avec l'extension js). Il est conseillé de placer les scripts à la fin du code pour qu'ils ne ralentissent pas le chargement de la page.
Mais le blogueur ne contrôle pas tous les scripts : plusieurs fichiers sont insérés par la plateforme de blogs pour l'affichage des publicités, le recueil de statistiques ou la gestion des connexions et des commentaires.

Côté CSS, la feuille de style personnalisable sur Blogger, Overblog ou Tumblr est incluse directement dans la page HTML ce qui alourdit un peu la page (il conviendrait de compresser le code) mais cela évite l'appel à une ressource. Par ailleurs, les plateformes (ex : Blogger, Overblog) ajoutent l'appel à un ou plusieurs fichiers CSS pour le style commun aux blogs. Comme pour les scripts, il n'est pas possible de les supprimer.

Les images

Optimiser les images. Une grand partie de la lenteur d'affichage est causée par des images trop lourdes. Les images doivent être réduites avec un logiciel photo avant d'être insérées dans un article. Si la colonne des articles a une largeur de 700 pixels, l'image insérée dans l'article ne doit pas dépasser 700 pixels. Utiliser aussi la compression des images à 90% au minimum.

Blogger permet de gérer finement les images en choisissant le format d'insertion : "petit" (200px), "moyen" (320px), "grand" (400px), "extra-large" (640px), taille originale (variable). Le format "taille originale" est déconseillé lorsque l'image a été enregistrée avec une largeur de plus de 700 pixels. Pour avoir une image rapide à charger tout en étant assez grande, on choisira la taille "extra-large", laquelle, comme son nom ne l'indique pas, reste raisonnable (640px). La fonction "lightbox" permet d'afficher l'image en taille réelle

Un exemple de chargement d'images avec 3 tailles différentes avec la taille du fichier image et la durée de chargement :

  • Image taille originale : 292 ko - 1,10 s
  • Image taille originale, compression 80% : 68 ko - 0,5 s
  • Image taille extra-large : 53 ko - 0,2 s
  • Image taille grande : 27 ko - 0,03s

Il convient aussi de limiter le nombre d'articles affichés sur la page d'accueil, ou d'opter pour l'affichage de résumés (sur Blogger, utiliser la fonctionnalité "marqueur d'expansion").

Comparatif entre plateformes

Petit test réalisé sur différentes plateformes avec la page d'accueil d'un blog affichant un seul article sans images. La note pour la vitesse de chargement sur les ordinateur varie suivant la plateforme (tout comme le nombre de requêtes) :

  • Overblog, thème Kiwi : 65/100 - 130 requêtes
  • Wordpress.com, Thème Twenty Ten : 80/100 - 50 requêtes
  • Blogger, thème Simple : 85/100 - 42 requêtes
  • Eklablog, thème de base : 89/100 - 38 requêtes
Page Speed

On voir qu'overblog affiche une performance basse. Un second test va nous donner le pourquoi du comment. Sur le blog testé, 27 fichiers javascript sont chargés, et 12 portions de code javascript sont insérés dans la page. En bloquant l'insertion des scripts imposés, le résultat est tout autre : 88 % ! Une grande partie de la perte vient des publicités dont l'affichage imposé ou non est très gourmand en scripts et images*. Mais même sans pubs, les blogs overblog sont très lents à cause de plusieurs scripts ajoutés.

Quelle que soit la plateforme, la note pour les mobiles est plus faible car les mobiles n'ont pas la même vitesse de chargement :

  • Overblog, thème Kiwi : 39/100
  • Eklablog : 52/100
  • Wordpress.com : 65/100
  • Blogger, thème Simple : 75/100

Pour le visiteur ayant installé ad block plus, le chargement du "matériel" publicitaire est bloqué rendant le chargement plus rapide.

Tester votre blog

Le test de vitesse peut se faire à cette adresse : PageSpeed Insights.

Le cache

La gestion du cache est capital en matière de performance. Qu'est-que le cache ? Une mise en mémoire par le navigateur (ou un serveur) des fichiers sur le poste de l'utilisateur (images, scripts, css, etc). Lors d'une première visite sur un site, le navigateur doit tout charger pour afficher la page. Mais lors d'une seconde visite, une partie des fichiers seront récupérés dans le cache, le chargement sera plus rapide. Exemple avec un blog test Blogger :

  • Visite n°1 : 42 requêtes : 4,72 s
  • Visite n°2 : 42 requêtes : 2,53 s avec 30 fichiers en cache
  • Visite n°2 : 42 requêtes : 4,98 s après avoir vidé le cache

Le cache peut-être géré côté serveur en spécifiant la durée de mise en cache des fichiers. Les fichiers qui ne sont pas souvent modifiés (images du design par exemple) auront une durée de vie longue chez l'internaute. Avec les plateformes de blogs, le blogueur n'a pas accès à cette gestion du cache ; d'après les tests réalisés, le cache est plutôt bien géré par les différentes plateformes :

  • Overblog : 130 requêtes - 60 fichiers en cache
  • Wordpress.com : 50 requêtes - 40 fichiers en cache
  • Blogger : 42 requêtes - 30 fichiers en cache
  • Eklablog : 38 requêtes - 30 fichiers en cache

Le chargement des fichiers peut être visualisé avec la console de développement du navigateur. Exemple sur Google Chrome, l'outil de développement (F12), onglet "Network". Avec la mise en cache, la durée de chargement se trouve réduit (exemple blog Blogger)

console console