Minifier vos fichiers CSS, HTML et JavaScript est indispensable pour optimiser votre site web. L’intérêt est double : technique et SEO.

Vous allez retirer le code inutile de vos fichiers, améliorez le temps de chargement de votre page et en conséquence votre SEO.

La minification : comment ça marche ?

Le processus de minimisation vise à supprimer de votre code :

Tous ces caractères sont utiles en phase de développement pour lire votre code, mais peuvent polluer votre site une fois en production. Les supprimer n’empêchera pas que votre code s’exécute correctement. En revanche, les bénéfices sont immédiats sur la rapidité de chargement de vos pages.

Ce processus de minification des fichiers peut se faire à la main, mais il est conseillé de profiter des outils qui le font automatiquement ! Voici une sélection des plus utilisés.

Méthode 1 : le copier-coller

La première possibilité est d’avoir un outil en ligne et de tout simplement copier-coller votre code dans la fenêtre prévue à cet effet. En alternative, vous pouvez aussi mettre directement l’URL de votre fichier JavaScript ou CSS.

C’est le principe de deux outils que l’on vous propose de découvrir.

Minifier.org

Très simple d’utilisation, Minifier.org “nettoie” votre code rapidement et rend votre site plus léger et performant.

Outil en ligne gratuit. Fichiers pris en charge : CSS, JS

Compress My Code

Beaucoup plus complet, on vous conseille Compress My Code si vous souhaitez profiter d’options comme :

Outil en ligne gratuit. Fichiers pris en charge : CSS, JS, HMTL

Méthode 2 : les outils intégrés

Les Plugins pour le CMS WordPress

Cette méthode de minification est une bonne pratique à mettre en place systématiquement. Cependant, les copier-coller peuvent rapidement être chronophages et sources d’erreur.

Si vous utilisez un CMS comme WordPress, il est donc préférable d’installer un plugin intégré qui vous permettra d’automatiser la démarche.

Better WordPress Minify

Better WordPress Minify est un outil très complet et puissant qui optimise la compatibilité avec d’autres plugins et les thèmes WordPress.

Plugin gratuit. Fichiers pris en charge : CSS, JS

AssetsMinify

Moins complet que Better WordPress Minify, AssetsMinify offre tout de même le choix d’exclure certains fichiers et par exemple de compresser ou non les scripts.

Plugin gratuit. Fichiers pris en charge : CSS, JS

WP Super Minify

WP Super Minify est un bon plugin pour minifier ses fichiers si vous n’avez pas besoin d’en exclure certains. Son petit plus : il calcule les performances que vous avez gagnées après son installation.

Plugin gratuit. Fichiers pris en charge : CSS, JS, HTML

Fast Velocity Minify

Fast Velocity Minify est un plugin complet qui vous permet également de vider le cache, de synchroniser les tags HTML5 et de choisir le chargement du JavaScript dans le header ou le footer.

Plugin gratuit. Fichiers pris en charge : CSS, JS, HTML

Les outils intégrés pour Symfony

Si vous développez en PHP avec le framework Symfony, vous pourrez aussi intégrer un outil de minification de votre code. Gratuit, le Webpack Encore permet d’optimiser et automatiser votre démarche de minification des fichiers CSS et JavaScript .

Méthode 3 : les outils cloud

Vous pouvez enfin opter pour un outil qui fera double emploi.

Par exemple Cloud Flare est un proxy. Il protège donc votre site contre les attaques DDos et offre gratuitement un option de minification automatique de votre fichiers CSS, JavaScript et HTML.

Dernière étape, après avoir mis en place votre outil ou plugin de minification, mesurez votre résultats. L’outil GTmetrix vous aidera à analyser si votre minification est bien effective. Faites aussi un test avant/après en comparant le temps chargement votre page d’accueil avec Google Page Speed.