Table des matières
Mis à jour le
La minification est peut-être la technique d’optimisation web la moins bien comprise. Pourquoi ?
Le concept est certes assez simple, mais en pratique il casse souvent des choses et laisse les propriétaires de sites web qui n’ont pas de connaissances techniques dans la tourmente. La minification est presque tout le temps mentionnée comme l’une des meilleures pratiques de performance web, on comprend donc pourquoi beaucoup de propriétaires de sites web souhaitent l’utiliser.
Pour les développeurs, il y a de nombreux outils disponibles qui peuvent mettre en place la minification dans le flux de travail, comme Gulp & Grunt par exemple.
Pour le propriétaire de site web lambda, il existe des solutions basées sur des plugins mais elles peuvent être compliquées à mettre en place car leur comportement varie de site en site (en fonction du thème et des plugins déjà utilisés).
Beaucoup d’autres aspects de l’optimisation de performance web fonctionnent de la même manière sur tous les sites, mais la minification a tendance à beaucoup varier. Cette nature imprévisible est la raison pour laquelle la minification peut vous donner la migraine.
La minification, en fait, c’est quoi ?
Chez WP Rocket, on l’appelle optimisation des fichiers et elle peut être appliquée sur les fichiers CSS, JS et le HTML. Les autres plugins peuvent simplement l’appeler minification.
Elle comprend typiquement deux processus complémentaires :
- La minification
- La concaténation
La minification
La minification veut littéralement dire qu’on retire les parties non-nécessaires des fichiers CSS et JS (JavaScript) pour les rendre plus compacts. Lorsque les développeurs écrivent du code, ils incluent des retours à la ligne, des espaces vides et des commentaires qui rendent le code plus facile à lire pour des humains, mais qui ne sont pas nécessaires à votre navigateur pour lire le code.
La minification retire donc ces éléments. Cela rendra le code illisible pour les humains, mais les ordinateurs s’en fichent et peuvent toujours le lire. Les espaces sont pour nous, les faibles humanoïdes ? ces parties non-nécessaires ajoutent quelques bytes supplémentaires au poids du fichier, le rendant un peu plus lourd que ce qu’il pourrait être.
Le but de la minification est donc de réduire la taille de vos ressources CSS / JS afin qu’ils se chargent plus rapidement.
C’est un peu comme lorsque vous utilisez ces sacs sous vide pour en mettre plus dans votre valise. Le paquet sous vide devient bien plus compact qu’à l’origine.
Avant la minification, un fichier CSS ressemblera à peu près à ça :
Après la minification, il ressemblera à ça :
La concaténation
La concaténation veut dire mettre ensemble. Par exemple, si vous avez 10 fichiers CSS fichiers sur votre site, la concaténation va les combiner en un nombre réduit de fichiers.
En quoi la minification aide-t-elle ?
Je vais faire référence à l’analogie que j’utilise dans un article précédent (Comment choisir un thème rapide ) – où nous parlons des requêtes HTTP.
Imaginez que vous sortez avec des amis.
Vous allez au bar et commandez une tournée pour vous et vos 7 amis. Dans cet exemple, vous êtes le navigateur web (comme Chrome, Safari, etc.) et le barman est votre serveur web.
Votre barman n’a que deux mains, il ne peut vous sortir que deux bières du frigo à la fois. Cela signifie qu’il devra faire 4 allers-retours au frigo pour vous apporter les 8 bières. Cela prend du temps.
Mais qu’en est-il si vous commandez un pichet de bière à la place ? De cette manière, les 8 bières sont dans un seul contenant, et en un voyage le barman peut vous apporter votre commande. C’est bien plus efficace.
Tout comme le barman, les navigateurs ne peuvent gérer qu’un certain nombre de fichiers à la fois. Plus vous avez de fichiers qui arrivent sur votre site, plus cela prend d’allers-retours à votre serveur.
Les sites modernes commandent souvent des dizaines de fichiers en même temps. La concaténation joint plusieurs fichiers ensemble afin que le serveur ait moins de fichiers à envoyer au navigateur, rendant ce processus plus rapide.
Ca a l’air assez facile, alors quel est le problème ?
Dans certains cas, la minification et la concaténation peuvent casser des choses. La mise en place de votre site peut avoir l’air bizarre, ou une certaine fonctionnalité ne fonctionne plus correctement dessus. Les raisons peuvent être diverses et mystérieuses.
Chaque site réagit différemment selon son propre ensemble de thèmes et de plugins et de la manière dont ils sont codés. Les environnements serveurs peuvent aussi faire la différence. Dans bien des cas, en particulier avec JavaScript, cela est souvent dû à l’ordre dans lequel les fichiers sont chargés sur la page, car JS peut être assez capricieux.
Cela peut être problématique pour les personnes qui cherchent à obtenir un score parfait au fameux test de Google PageSpeed. Google vous demande de déplacer tous les fichiers JavaScript en bas du site, mais cela peut casser des fonctionnalités, et soudain votre score parfait s’envole.
Dès qu’il y a un problème avec la minification, vous devez rechercher les fichiers problématiques et les exclure du processus.
Est ce que l’effort en vaut la chandelle ?
Ce n’est pas avec la minification que vous allez faire le plus gros gain de temps sur votre site, on la considère plus comme une étape de peaufinage. Vous pourrez observer une légère amélioration en terme de vitesse, mais ça ne sera pas renversant.
Si vous n’avez encore rien fait sur votre site, ne commencez pas par la minification.
La minification CSS fonctionne plutôt bien, et réparer les bugs est plus facile.
La minification JS peut être vraiment terrible à réparer car les fichiers qui doivent être exclus ne sont pas toujours évidents, cela peut donc prendre un certain temps avant de réussir à les trouver. Cela ne vaut pas forcément le coup, surtout si vous n’êtes pas un développeur et que vous essayez de trouver cela par vous-même.
Mettre en place la mise en cache de page et optimiser vos images sont deux procédés assez faciles à mettre en place et grâce auxquels vous pourrez observer une nette différence dans le temps de chargement.
Allez voir les autres articles de notre série sur l’optimisation de performance :
