Me contacter
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.

 

Outils en ligne

J'utilise principalement deux outils en ligne :

 

Pour tester les modifications apportées, voici des outils :

article publié le 25-07-2016 par / Catégorie : Outils / Logiciels
Commentaires
Aucun commentaire pour le moment
Vous avez un avis, une question ? Rédigez un commentaire
Nom
 
Adresse e-mail
 
Site Internet
(facultatif)
 
Votre message
 
Code de vérification
Captcha Recharger l'image
Recopiez le code ci-dessus
 
 

 
Minifier les fichiers JavaScript, CSS et HTML
Tikoweb Blog - Article lu 934 fois
Articles associés
Performance d'une page Web avec Yellow Lab Tools
publié le 12-07-2016 / 873 lectures / 0 commentaire
Yellowlab Tools est un outil gratuit destiné aux webmasters analysant les performances d'un site Internet.