5 Questions sur la minification du HTML, CSS et JS

Rien n’est plus dérangeant, sur internet qu’un chargement de page qui soit trop lent. Plus le temps de chargement est lent, plus la page met du temps pour s’afficher, plus l’acquisition du trafic diminue et le taux de rebond augmente.

D’ailleurs, des statistiques d’audiences ont montré que si un site web mette plus de 3 secondes à charger, plus que la moitié des visiteurs le quittent.

Des mécanismes et des techniques sont vivement recommandés par les moteurs de recherche pour réduire les données échangées. La minification est une de ces techniques de diminution du code HTML, CSS et JS.

Qu’est ce que la Minification ?

Minifier (ou « minify » en anglais) est un processus qui permet de réduire la taille du code en éliminant les caractères inutiles.

Par « caractères inutiles », nous désignons tout caractère n’influant pas l’interprétation ou l’exécution du code, à savoir :

  • Les espaces
  • Les sauts de lignes
  • Les commentaires
  • Les indentations
  • Les délimiteurs de bloc,

Ces caractères sont utilisés pour la lisibilité du code lors du développement, mais pas pour son interprétation, donc il est recommandé de les éliminer.



Exemple :

Code CSS non minifié :

/*Alignement le plus à gauche */
h2{

float: left;
margin: 0px 0px 0px 0px;

}

Code CSS minifié :

h2{float:left;margin:0px}

Le code non minifié renferme 84 caractères, alors que celui minifié renferme 26 caractères, soit un taux de 68% de réduction.

Pourquoi minifier en Web ?

Dans le web, et plus précisément lors de l’échange entre un serveur web et un navigateur du client, il est primordial de réduire au maximum l’information échangée afin de réduire le temps de réponse.

La minification est donc un des moyens permettant de gagner sur la taille des données échangées en Web et d’accélérer leur affichage. Ce temps de chargement est de plus en plus pris en compte dans le référencement
naturel des sites Internet. La minification offre ainsi plus de chances d’apparaître dans les résultats de recherche.

Que minifier dans le Web ?

Les informations échangées dans le web sont nombreuses. Avec la minification, il est possible de réduire la taille des codes :

  • HTML
  • CSS
  • JS

Il est fréquent de combiner plusieurs fichiers CSS ou JS en un seul fichier CSS ou JS minifié.

Quant aux autres ressources d’information (images, vidéos, etc.), la réduction de leurs tailles nécessite d’autres techniques.

Minifier ou Compresser ?

Il est fréquent de confondre la minification et la compression. Bien que les deux concepts aboutissement à la réduction de la taille des informations, il s’agit de deux concepts totalement différents.

En effet, un fichier minifié conserve son format et reste toujours déchiffrable par l’humain même si cela est difficile.

Par contre un fichier compressé est un fichier au format zip ou gzip ou rar, qui ne pourra être compréhensible ou lu.

Comment minifier ?

Afin de minifier un code HTML, CSS ou JS, il est possible de choisir un outil en ligne ou un plugin à installer et configurer dans le CMS choisi.

Quant aux outils en ligne, il suffit de fournir l’url du fichier HTML, CSS, JS ou de copier-coller le code à minifier sur le site pour obtenir un code minifié.

A titre d’exemple, on peut citer : minifier.org, compressmycode.com, extendsclass.com, etc. L’avantage de ces outils est la simplicité d’usage en plus de l’ensemble des propriétés à paramétrer et à configurer.



Pour les plugins et dans le cas du CMS WordPress, il est possible d’utiliser un plugin de cache tels que W3 Total Cache, WP Fastest Cache, Autoptimize, … ou un plugin dédié à la minification tels que : Better WordPress Minify, AssetsMinify, WP Super Minify, …

Remarque : Une fois la minification est achevée, il est possible de la vérifier avec d’autres plateforme en ligne comme Gtmetrix ou Dareboost, qui indique si celle-ci est bien effectuée ou non.

En conclusion, minifier permet de diminuer la quantité de code qui doit être transférée sur le web. Plus le code est léger, plus la bande passante sera préservée et plus la page s’affichera rapidement. Le temps de chargement influe sur la pertinence du site et par conséquent sur son référencement naturel.

Article rédigé par Mme Mouna KORT.