Tikoweb / Stéphane Kraemer
infographiste, développeur Web
et photographe à ses heures perdues ...

Minifier les fichiers JavaScript, CSS et HTML

Définition du terme "minifier"

L'action de minifier un fichier est le fait d'alléger le poids de celui-ci tout en gardant le même résultat coté navigateur. Le programme de minification enlève les caractères inutiles au bon fonctionnement du fichier ou script :

suppression des espaces, sauts de ligne, tabulations et commentaires
réduction du nombre de caractères des variables (sur les fichiers JS)

Un exemple concret avec une fonction JavaScript :

Code original

// Fade sur les boutons images
$().ready(function(){
   $('img.bt,div.bt').mouseover(function(){
       $(this).stop().fadeTo(350,0.6);
   });
   $('img.bt,div.bt').mouseout(function(){
       $(this).stop().fadeTo(350,1);
   });
});

Code minifié avec compressmycode.com

$().ready(function(){$('img.bt,div.bt').mouseover(function(){$(this).stop().fadeTo(350,0.6)});$('img.bt,div.bt').mouseout(function(){$(this).stop().fadeTo(350,1)})});

Dans cet exemple le gain a été de 31,69%. Bon vu la longueur du script, on a pas gagné grand chose en terme de poids mais pour des fichiers plus volumineux ça vaut nettement le coup.

Pourquoi minifier les fichiers JS, CSS et HTML

La minification allège les fichiers donc le principal avantage est de réduire le temps de chargement du site. La vitesse de chargement est un critère important pour le référencement, surtout sur mobile.

Plus il y aura de fichiers JS, CSS et HTML, plus il sera utile de compresser ces fichiers, le gain peut être assez significatif.

Techniquement vu que les fichiers seront compressés après minification, il est difficile de relire et de maintenir le code par la suite. Pour ces raisons, je vous conseille de toujours garder une version non-minifiée en local.