Born to be wired

Speed Daemon

 3 février 2014  Projet Web  Aucun commentaire

Avertissement : cet article est une tentative maladroite de mise en ligne d’un billet rédigé en mode express, en vue de faire patienter mon lectorat en quête de vrais sujets, et afin de masquer mon incapacité à finaliser la rédaction de vrais articles intéressants sur mes projets en cours.

La faute étant avouée et à moitié pardonnée, dévoilons le thème de l’article délictueux dont le titre laisse entrevoir un léger indice, pour peu qu’on ait absorbé suffisamment d’alcool fort : la vitesse de chargement de ce site.

Depuis la mise en ligne de ce blog puis sa migration sous WordPress, celui-ci s’est alourdi au fil des années. La faute à l’utilisation croissante de plugins, pas toujours utiles et pas tout bien écrits, à une implémentation de webdesign perfectible, à une architecture de site devenant inadaptée avec le temps. Résultat, il y a 6 mois en arrière, le constat était amer : un temps de chargement des pages beaucoup, beaucoup trop long.

Bien sûr, cela aurait pu être en partie occulté par un débit supérieur, si j’avais été raccordé à la fibre, depuis le temps que je l’attends – un jour elle sera mienne, oh oui, un jour elle sera mienne – mais l’étude détaillée des graphes de chargement de mes pages montrait que le débit ADSL n’était pas le seul à la ramasse. Le temps de génération des pages par le serveur était également responsable du massacre.

elle-sera-mienne

Je devais donc intervenir. Voici donc un petit aperçu des améliorations qui ont été entreprises à partir d’août 2013 en vue d’améliorer l’expérience utilisateur. Les tests de perfs ont été réalisés avec les outils Pingdom Website Speed Test et Google PageSpeed Insights.

Travail sur le webdesign

Graphiquement, très peu de différence. Dans les faits, je me suis arrangé pour diviser par 3 le nombre de ressources sur les pages, et donc de diviser par la même quantité le nombre de requêtes que le navigateur doit lancer pour charger une page de manière complète. Quelques techniques en vrac :

  • Suppression de l’affichage à outrance de certaines images, là où elles n’étaient pas nécessaires.
  • Agrégation de javascripts et CSS en un seul fichier.
  • Remplacement de certaines images par du CSS3 – au diable si le site devient illisible pour les utilisateurs d’IE6.
  • Utilisation de sprites CSS, c’est à dire l’agrégation de nombreuses images en une seule et utilisation de CSS pour n’afficher que la partie désirée de l’image résultante.

Travail sur les plugins

De nombreux plugins, chargés sur chaque page, ralentissent la génération des pages. Évidemment, la première étape consiste à établir le bilan des plugins réellement utiles et de ceux dont on peut se passer définitivement, en pondérant par leur propension à ralentir le site. J’ai utilisé Plugin Performance Profiler, qui est lui-même un plugin, pour faire un état des lieux des plus mauvais élèves. J’ai ensuite pris les décisions suivantes :

  • WordPress.com stats a été remplacé par Jetpack. Nan, je déconne. J’allais pas remplacer un plugin lent comme un escargot sous influence de cannabis par un plugin lourd comme un troupeau de mammouths obèses. Pour mes stats, j’ai décidé d’en déléguer la gestion à Google Analytics, avant de migrer sur Piwik en auto-hébergé, pas aussi rapide que le premier mais me permettant de maîtriser intégralement mes données.
  • Better WordPress Minify ne fonctionnait plus correctement, il a été dégagé. Je gère la minification des ressources statiques et leur agrégation tout seul comme un grand.
  • Social Media Widget a été remplacé par une adaptation plus légère directement intégrée dans le thème.
  • Contact Form 7, utilisé sur une seule page du site, chargeait du contenu sur toutes les pages. Remplacé par une implémentation perso, intégrée au thème et avec de l’Ajax pour plus de classe.
  • Syntax Highlighter Evolved, utilisé sur une minorité de pages, chargeait bon nombre de contenu sur la quasi-totalité des pages du site. Remplacé par Better WordPress Syntax, un peu moins sexy mais plus fiable et plus léger.
  • Highlight Author Comments a été remplacé par une implémentation personnelle directement intégrée au thème.
  • Post Teaser, plugin de 1150 lignes, a été remplacé par une implémentation personnelle de 150 lignes beaucoup plus propre et performante, basée sur le projet htmlcutting : le temps de génération des teasers sur la page d’accueil a été divisé par 2.

Travail sur l’architecture

Un travail beaucoup plus en profondeur, qui demande parfois de se poser les bonnes questions quant à la manière dont les ressources doivent être chargées, parfois à changer des briques logicielles, parfois à changer des briques matérielles.

  • Stockage sur SSD : j’avais un SSD non utilisé (oui, ça arrive) depuis plusieurs mois, mais l’ampleur de la tâche consistant à cloner le disque dur du serveur sur ce SSD, tout en revoyant complètement l’organisation des partitions, pour cause de différence flagrante de taille entre les deux supports, m’a fait remettre l’opération à plus tard de nombreuses fois. C’est maintenant chose faite, et c’est toujours quelques microsecondes de gagnées à chaque requête.
  • Utilisation d’un CDN : un Content Delivery Network, pour faire simple, c’est un site qui a du débit et qui accepte d’héberger en miroir une partie du contenu de votre site. C’est pratique et expliqué en vidéo, de manière un peu simpliste, à cet endroit. Intégrer un CDN proprement dans WordPress n’est pas forcément une mince affaire, contrairement à ce que peut laisser prétendre la vidéo en question, mais c’est fait. Quelques millisecondes de gagnées à chaque requête.
  • Utilisation d’un cache : le plugin WP Super Cache garde une copie de chaque article, et sert cette copie à la place d’un article qu’il faut normalement regénérer à chaque consultation, lorsqu’on n’a pas le plugin. Les gains sont considérables. Quelques secondes de gagnées à chaque requête. Ouais.

Conclusion

Au delà du luxe d’avoir pu écrire un article dont le titre est une double référence de culture geek et culture pop, les changements ont été effectués en profondeur au prix de nombreux efforts, mais ont donné un résultat très correct. Grâce à tous les axes de travail décrits précédemment, le temps de chargement de mes pages a été divisé par 10 entre août et décembre 2013. Le chargement pourra encore sembler long à certains par moments, il n’en sera que bien meilleur quand je bénéficierai enfin d’un accès fibre – je l’aurai un jour, je l’aurai.

je-l-aurai-un-jour

Ah oui, tant qu’à faire, puisqu’on baigne en pleine culture geek, Speed Demon (avec cette orthographe) est aussi un personnage du marvelverse.

C’est tout pour aujourd’hui. Dans mon prochain article, on continue à essayer de piloter le chauffage en reprenant la devise de la maison Stark.

Laisser un commentaire