Optimiser son site web avec la minification CSS, JS et HTML

Optimiser son site web avec la minification CSS, JS et HTML

Introduction

La minification retire le code inutile de vos fichiers. Donc, la minification accélère le chargement de votre page. Et qui dit accélération dit plus de visiteurs, et plus de chances d’apparaître dans les résultats de recherche. En bref, ce processus supprimera les espaces inutiles, les sauts de ligne, les commentaires et les délimiteurs de blocs de votre code. Ces caractères sont utilisés pour la lisibilité de votre code. Mais ils ne sont pas nécessaires pour que le code s’exécute correctement. La minification accélérera le téléchargement, l’analyse et le temps d’exécution de votre code.

Ce dont vous aurez besoin

Avant de commencer ce guide, vous aurez besoin des éléments suivants:

  • Accès FTP

Étape 1 – Localisation des fichiers CSS, HTML, JavaScript non unifiés.

Je vous recommande d’utiliser GTMetrix . J’ai analysé un site WordPress nouvellement créé et reçu une liste de fichiers qui pouvaient être minifiés.

minify css gtmetrixminification js gtmetrix

Étape 2 – Remplacement des fichiers non unifiés

IMPORTANT! La sécurité est toujours la priorité. Avant d’apporter des modifications supplémentaires, assurez-vous d’effectuer une sauvegarde de votre site WordPress actuel ou une sauvegarde des fichiers séparés qui seront remplacés.

Option 1. Remplacement manuel

GTMetrix offre une fonctionnalité exceptionnelle : vous pouvez immédiatement voir la version optimisée des fichiers CSS, JS et HTML. Il vous suffit d’appuyer sur See optimized version à côté du nom de fichier. Ensuite, le fichier optimisé sera téléchargé ou ouvert dans le navigateur. Vous pouvez donc remplacez vos fichiers par le FTP. Soit en écrasant la version existante, soit en modifiant le code à la main.

Option 2. Plug-ins CMS

Les utilisateurs de WordPress peuvent utiliser des plugins tels que Better WordPress Minify ou W3 Total Cache pour atteindre le même résultat. Vous pouvez vous référer à ce guide -en anglais- pour des instructions détaillées sur l’installation du plugin W3 Total Cache.

Option 3. CloudFlare

CloudFlare est un service gratuit qui accélère et protège votre site en établissant un proxy (une sorte de relais) entre les visiteurs et le serveur d’hôtes du site. Il offre une protection contre les attaques DDoS et le mieux c’est qu’il est gratuit. Dans le plan gratuit vous avez accès à la minification automatique du CSS, HTML et JS. Vous pouvez activer la minification des ressources via la section Performance -> Auto-Minify :

cloudflare minify

cloudflare auto minify js css html

IMPORTANT! Il n’est pas recommandé d’utiliser Auto Minify de CloudFlare si vous utilisez déjà un plugin de minification tel que W3 Total Cache. De plus, CloudFlare ne minimise pas les scripts et liens tiers (Facebook, Twitter).

Étape 3 – Test des changements

Après avoir remplacé les fichiers / code par la version minifiée, la dernière chose à faire est de tester. Vous pouvez refaire une autre analyse avec GTMetrix . A titre de comparaison, voici les résultats après avoir remplacé les anciens fichiers par les fichiers minifiés:

minify css GTMetrix resultatsminify js gtmetrix resultats

Conclusion

Dans ce bref guide, nous vous avons appris à augmenter les performances de votre site Web avec la minification CSS, JavaScript et HTML.