Minifier son code

Nous avons déjà parler sur cet article de l’importance d’avoir un site qui s’affiche rapidement pour le référencement, l’une de ces astuces est de réduire le poids des fichiers pour gagner quelques ko. Ce n’est évidemment pas un gros gain sur le poids total de votre site mais ccs petits ko en moins vous feront potentiellement gagner une ou deux places dans le classement des résultats des moteurs. Comme chaque place gagnée peut vous rapporter plusieurs centaines voir milliers de visiteurs supplémentaires, il serait bête de s’en passer.

C’est quoi minifier ?

Minifier un code, c’est enlever tout ce qui est inutile dans le code et donc à terme, cela permets d’alléger le poids du fichier. Prenons l’exemple d’un fichier css quelconque: la plupart du temps, vous verrez que les règles css sont écrites ligne par ligne avec à chaque fois un retour à la ligne comme vous pouvez le voir dans l’exemple avec ce code

#madiv {
background-color:#339;
color:#fff;
padding:15px;
border-bottom:5px solid red;
margin-bottom:15px;
}

Le but de la minification est donc de supprimer tous les espaces, les sauts de ligne, les retours à la ligne pour ne garder que le code utile dans le code suivant identique au premier mais allégé des ces espaces inutiles

#madiv {background-color:#339;color:#fff;padding:15px;border-bottom:5px solid red;margin-bottom:15px;}

Vous pouvez minifier n’importe quel fichier css, javascript ou html, vous pouvez potentiellement gagner plusieurs dizaines de ko qui ralentissaient inutilement votre page auparavant.

Lire aussi :  Lexique de la publicité pour les débutants

Méthodes pour minifier son code

Minifier le code d’un fichier n’est pas très compliqué, il existe divers sites en ligne comme minifycode.com ou cssminifier qui le font gratuitement en quelques secondes, vous pouvez aussi le faire à partir d’éditeurs de code comme notepad++ ou bracket qui disposent de plugins de minification. Si vous utilisez les outils en ligne gtmetrix pour mesurer la vitesse d’affichage de vos pages, vous pouvez aussi récupérer une version optimisée de votre code directement dans l’outil dans la section minify css. A noter pour les utilisateurs de cms que les extensions de cache intègrent souvent la fonction pour minifier les fichiers, il est inutile de le faire auparavant si vous en utilisez un.

 

Conclusion

Le fait de mettre toutes les css sur une seule ligne sans espace va rendre votre code presque illisible ou du moins difficilement modifiable, je vous conseille de garder une copie du fichier non minifié afin de pouvoir,  en cas de besoin, pouvoir facilement effectuer des modifications du code, vous n’aurez ensuite qu’a la minifier au moment de l’envoyer sur votre serveur.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *