Blogging - Optimiser...pour gagner 9,5 secondes... ou le Black Friday du blogging

A force de triturer ton template blogger, pour qu'il ressemble à ce que tu veux, le temps de chargement devient ton ennemi... Et Google, sait te le rappeler. En prenant l'exemple de mon blog, voyons ce qu'il est possible de faire pour gagner neuf secondes et demie... Pour rester tendance, vu le jour, vais-je oser parler de Black Friday du blogging ?😅

Force est de constater que gagner ces neufs secondes et demie implique de s'investir un temps soit peu...Comme pour préparer son Black Friday, d'ailleurs!!!

D'abord, après avoir reçu l’info de Google qui me dit :

Je m'inquiète un poil... Un diagnostic, sérieux (?), s'impose. Je file sur le truc indiqué "Google page speed  Insights" et je lance la machine. Et là!! Je vis un grand moment de solitude.
En premier lieu, mon blog (que je maintiens avec amour depuis des années) est considéré comme un site pas terrible (indice affiché 56) sur un ordinateur et carrément pourri sur la version mobile (indice affiché 24). En deuxième lieu, je ne comprends pas un traître mot de ce que le site me donne comme informations...

Ca, c'était en février 2019, après avoir passé un temps considérable (je ne suis, évidemment, pas un spécialiste du sujet) à modifier le code html de mon template afin de le rendre un peu plus sympa. Soit je laisse tomber, soit je m'en occupe. Vous aurez compris que mon choix se porte sur la deuxième option. Diantre!! Mais qu'ai-je fait...

Avant de faire quoi que ce soit, vu que je ne comprends rien, je pars à la recherche d'informations. Et, bien évidemment, j'en trouve beaucoup. Il s'avère qu'un site retient mon attention pour sa clarté: le blog de Marlène : Notuxedo et cet article en particulier. Cette introduction me pousse à essayer les divers sites indiqués. La lumière ne s'allume pas encore. En tout cas, elle n'est pas à tous les étages. J'aimerais trouver quelque chose de plus clair, de moins abscons. En furetant chez Marlène, je tombe sur cet article qui présente Dareboost: un outil de test, d'analyse et d'optimisation de site web, en français de surcroit.

OK! Je plonge dans l'utilisation de dareboost et lance mon premier test en version "desktop". Le site m'annonce un score de 56%, 24 problèmes, 34 améliorations et 41 succès. J'ai un temps de chargement total du blog en 12,4 secondes. Le premier octet qui arrive après 3,6 secondes. Le début d'affichage se fait après 8,2 secondes. Tous les indicateurs sont au rouge... Bref, j'ai confirmation que ce n'est pas terrible. L'avantage, avec l'équipe dareboost, c'est qu'ils fournissent un rapport relativement détaillé. Leur blog regorge aussi d'informations et d'éléments de formation. Et puis, comme d'habitude avec Internet, une recherche ciblée sur une phrase et un sujet donné permet d'aller un peu plus loin. Bref, j'avance doucement. Je prends la décision d'y aller par petits pas. Cela, m'a déjà pris quelques heures... Mais je ne suis pas encore dégoûté.

D'abord, je traite l'élément du rapport qui représente le plus de consommation de temps. A savoir le traitement des images dans leur globalité, qu'elles soient utilisées dans le modèle de blog ou dans les articles. La recherche des solutions demande un peu de temps. En détail cela concerne :

• 1 - Les images utilisées dans le "template" sont d'un poids trop élevé. La base de la solution est ici. 
• 2 - Les images utilisées dans les articles sont d'un poids trop élevé et pas à la bonne taille. La solution se trouve dans le même article que le précédent. Pour me simplifier la vie et le faire de manière directe sur les futurs posts du blog, je mets en œuvre quelques principes de reformatage systématique une fois les photos choisies pour les articles.

• 3 - Toutes les images sont chargées par le serveur dès que la requête d'affichage est faite. La 
  
  recherche de la solution m’amène au lazyload, tout un programme... Lisez celui-là aussi. Je crois que je vais perdre quelques-uns d'entre vous... Si vous êtes toujours là, sachez que pour trouver le plugin lazyload qui fonctionne avec mon template blogger, il m'a fallu un peu de temps de recherche et d'essais multiples...

Avec ça en place, le temps de chargement total du blog passe à 8,2 secondes. Le début d'affichage se fait après 6,2 secondes. J'ai gagné 4,2 secondes avec une dizaine d'heures de recherche et d'analyse. Pas très rentable mon affaire, mais je trouve ça assez rigolo...

Je continue. Cette fois, je m'attaque au code html et aux erreurs relevées par Dareboost (toujours en m'attachant aux priorités données par le rapport). Les suivantes concernent le chargement des "font" et l'utilisation des codes externes comme "jquery". Ce site est de bon conseil : le hollandais volant. Je change la version de "jquery", de "font" chargées. Je change aussi le principe de chargement. Ensuite, je plonge dans le CSS et le code Html pour simplifier, optimiser, gagner en poids général (je parle de la taille du DOM et du code html/css, moi, je n'ai rien perdu...), etc... J'arrive à des temps plus intéressants. Toutefois, cela devient de moins en moins agréable, car de plus en plus complexe. Ma dernière optimisation de 200 ms me demande 10 heures de lecture et d'essais... J'abdique après un mois et demi, considérant que cela est, maintenant, trop complexe pour moi. 

Je ne détaille pas plus, car de toutes façons, j'aurais du mal à expliquer ce que j'ai fait... J'ai surtout suivi les conseils/idées trouvés par ci, par là et distillés par ces formidables experts qui mettent leurs savoirs à disposition sur Internet. Merci à eux, donc!!!

Pour finir voilà où je suis arrivé d'après Dareboost (à gauche) et PageSpeedInsight (à droite):

• Résultat pour le test version ordinateur de bureau: 

• Résultat pour le test version mobile:

En tout, j'en suis à une cinquantaine d'heures de travail durant le mois et demi passé sur ce sujet. J'ai gagné 9,5 secondes sur la fin du chargement complet du blog et 7,23 secondes sur le début d'affichage pour la version ordinateur. Les scores se sont améliorés. La version mobile fonctionne mieux également. Bon! C'était encore l'hiver début 2019!! Cela m'a permis de passer pour un agent secret auprès de mon épouse... Et c'est toujours mieux que de regarder TF1.

Qu'est-ce que je ne ferais pas pour vous ? Et votre expérience utilisateur...

---

Merci pour votre lecture. Des questions ? Envie de réagir ?
N'hésitez pas!! Votez sur le contenu de cet article et/ou commentez-le. Vous pouvez aussi le partager.
Via le système de vote et/ou la zone "commentaires" (juste un peu plus bas) ou via le formulaire de contact (page principale du blog).