Dans le monde du développement web, où la place aux performances est de plus en plus grande et les sites de plus en plus lourds, minifier son code source devient primordial.
Vous voulez savoir comment la minification fonctionne exactement, et comment la mettre en place efficacement lorsqu’on est développeur freelance ?
On vous explique tout en détails !
La minification : en quoi ça consiste ?
La minification consiste à réduire (minifier) la taille d’un fichier au maximum. Cela passe par plusieurs étapes (qu’on détaillera par la suite) mais l’objectif final est d’avoir un code source qui prend le moins de place possible.
Ça aura comme effet secondaire de rendre le code très peu lisible pour un humain (car les espaces sont supprimées, les variables renommées, etc.), mais ça ne doit rien changer pour le moteur qui va l’interpréter (si c’est le cas, c’est que le processus s’est mal passé !).
L’importance de minifier son code
Maintenant qu’on connait le principe de minification, voyons les raisons qui devraient nous passer à réduire la taille de notre code source, et le gain en performances n’est pas la seule !
Minifier son site pour un temps de chargement réduit
Mais c’est évidemment la première raison qui vient en tête. Réduire la taille des fichiers d’un site web (et donc du site en lui-même) permet un chargement plus rapide de ce dernier. Le fonctionnement du chargement d’un site (et de toute donnée venant d’un serveur) fonctionnant comme suit :
Toutes les sources (notamment HTML, CSS et JavaScript) interprétées par le navigateur sont envoyées par le serveur et donc téléchargées pour être lues par le web browser. Un site lourd mettra donc plus de temps à charger.
Pour tester la vitesse de chargement de votre site web, vous pouvez utiliser les outils de développement de Google Chrome, on a d’ailleurs écrit un article aux des Devtools Chrome.
Expérience utilisateur
Un temps de chargement long aura pour conséquence directe une mauvaise expérience utilisateur. On sait que si une page web met plus de quelques secondes à charger, l’internaute la quittera avant même d’y naviguer.
C’est encore plus vrai sur mobile où, suivant l’état de la connexion, le site peut mettre encore plus de temps à charger.
Minifier son code source entrainera au final une meilleure expérience utilisateur, et donc une plus grande utilisation de votre site (c’est encore plus important s’il s’agit par exemple d’un e-commerce).
SEO
Et oui, une autre conséquence d’un mauvais temps de chargement, c’est une moins bonne optimisation sur les moteurs de recherche, ou SEO !
Google mesure en effet le temps de chargement d’un site lorsque ses bots passent en revues les pages web. Le moteur de recherche privilégiant de plus en plus l’expérience utilisateur, on se doute qu’un mauvais temps de chargement sera pénalisé par Google lors de son indexation.
Éco conception
Une autre raison de minifier son code source, moins attendue, c’est pour faire de l’éco-conception. On l’a vu, le navigateur charge toutes les sources dont il a besoin côté client pour que le le site soit interprété comme attendu. Avoir un site léger demandera moins de ressources de stockage et le chargement des données sera moins gourmand en énergie.
À l’échelle individuelle, l’économie réalisée est dérisoire, mais imaginez que chaque site réduise sa taille de 10%, l’impact à l’échelle mondiale serait énorme !
Nous avons d’ailleurs écrit un article expliquant comment intégrer l’éco-conception à son développement web.
Obfuscation
L’obfuscation, dans ce contexte, est une pratique visant à rendre difficile l’analyse d’un code source en le rendant le moins lisible possible. Or, on l’a déjà dit, la minification d’un fichier (JavaScript, par exemple) le rend très peu lisible aux yeux d’un humain. C’est donc un première étape dans l’obfuscation d’un fichier.
Attention cependant, il existe des outils pour inverser l’obfuscation (qui, sans aller jusqu’à rendre le code aussi lisible qu’il l’était à la base, le rendent plus facile à interpréter).
Ne comptez donc pas uniquement sur la minification pour l’obfuscation d’un fichier.
Que minifier dans un projet web ?
Que peut-on (et doit-on) minifier dans un site web ? Tout ce que le serveur nous renvoie ou presque (à condition qu’on ait la main dessus).
C’est-à-dire le HTML, le CSS, le JavaScript, mais aussi les images (à compresser) et éventuellement d’autres éléments récupérés par votre front-end.
Exemple de code minifié
Avant de voir comment minifier le code source d’un projet, voyons quelques exemples de code minifié dans différents langages web.
Pour du HTML :
<meta charset="UTF-8">
<meta name="title" content=">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<!-- Devient -->
<meta charset="UTF-8"> <meta name="title" content="> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title>
Pour du JavaScript :
let hasEmailBeenSubscribed = false;
let firstInput = document.getElementById("email-input-1");
firstInput.addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
registerEmail(firstInput.value);
}
});
/* Devient */
let a=!1,b=document.getElementById("email-input-1");b.addEventListener("keyup",function(e){13===e.keyCode&®isterEmail(b.value)});
Et pour du CSS :
.ebook-button{
text-decoration: none;
display: flex !important;
align-items: center !important;
}
.last-cta-button{
margin-left: auto !important;
margin-right: auto !important;
}
/* Devient */
.ebook-button{text-decoration:none;display:flex!important;align-items:center!important}.last-cta-button{margin-left:auto!important;margin-right:auto!important}
Comme on le voit, il ne s’agit ni plus ni moins que d’une « compression » du code source. On enlève les commentaires, espaces, renomme les variables pour qu’elles prennent moins d’octets, etc.
Comment minifier les sources d’un projet web
Nous allons maintenant voir comment, concrètement, vous pouvez minifier votre code source.
Le processus de minification
Avant de passer en revue les plugins et outils qui vous permettent de minifier votre code, voyons d’abord en détails ce qu’ils font à votre code :
- Suppression des commentaires ;
- Changement des noms de variables, classes, fonctions etc. pour JavaScript ;
- Suppression des caractères vides (espaces, retours à la ligne, tabs) ;
- Fusion des fichiers en un seul (un fichier JavaScript de 100ko mettra moins de temps à charger que 10 fichiers de 10ko, car il n’y aura qu’une seule requête serveur).
Également, pour les images, il conviendra de les compresser, tout en faisant en sorte que leur qualité soit toujours assez bonne pour ne pas nuire à l’expérience de l’utilisateur sur le site.
La minification via des services en ligne
Une des solutions pour minifier votre site consiste à utiliser des sites qui transforment un code classique en un code minifié.
Ce n’est évidemment pas le plus pratique, car vous devrez minifier vos sources à la main avant chaque mise en production, c’est néanmoins facile à mettre en oeuvre pour un petit site vitrine.
Il existe beaucoup de sites de ce genre, par exemple pour le CSS, HTML et JavaScript :
Concernant les images, il existe là aussi des sites pour compresser facilement des fichiers png ou jpg, comme imagecompressor.
Les plugins WordPress
Si vous développez votre site avec WordPress, sachez qu’il existe des plugins qui feront pour vous la minification de vos sources (et l’amélioration de performances de manière générale) !
On peut citer par exemple Autoptimize (minification, optimisation des polices, chargement asynchrone des éléments, etc.) ou W3 Total Cache (minification, gestion du cache). Il en existe évidemment d’autres.
Les modules à intégrer à votre projet
Il est aussi possible de déléguer la gestion de la minification de vos source à des modules intégrés à votre développement.
Si vous utilisez des frameworks de développement (comme Vue ou Angular), ce type de module est déjà intégré nativement, et la minification sera faite automatiquement au build.
Si néanmoins vous voulez utilisez d’autres extensions, ou si vous n’utilisez pas de frameworks, il existe des modules prêts à l’emploi. On peut citer, par exemple :
- HTMLMinifier, pour le HTML ;
- CSSNano, pour le CSS ;
- UglifyJS, pour le JavaScript.
Aller plus loin
Pour améliorer les performances de votre site web, vous pouvez aller encore plus loin. En effet, au delà de la minification (et donc de l’optimisation des sources côté front), une optimisation côté serveur doit aussi être envisagée.
Ici, on ne parle plus de minification, mais plutôt d’optimisation de votre code et de votre serveur.
Il peut déjà s’agir d’optimiser les requêtes faites via votre back-end vers votre base de données (SQL ou NoSQL) pour en augmenter la vélocité.
Aussi, la configuration serveur de votre projet est importante. Activer et paramétrer le cache peut considérablement augmenter les performances d’un site web, par exemple.
Il est aussi recommandé d’optimiser les ressources mises à la disposition de votre serveur, en choisissant le bon fournisseur, avec la bonne offre, etc.
Bref, même côté back-end, les optimisations sont nombreuses et nécessaires !
Conclusion
On l’a vu, la minification des sources d’un site web est importante, et pas uniquement pour gagner en temps de chargement. L’expérience utilisateur et un bon SEO dépendent aussi de la taille de votre site web. Il est donc important de penser à cette minification dès la conception de votre page internet, et ce de plusieurs manières différentes : en installant des plugins, choisissant le bon fournisseur, etc.
Et vous, avez-vous des recommandations en terme de minification et gain de performances ? Dites-le nous en commentaire !
