Minification dans WordPress : Ce que c’est et comment le faire

Au fur et à mesure que tu ajoutes plus d’outils et de contenu à ton site, le nombre de fichiers va augmenter, entraînant des temps de chargement plus lents. La vitesse compte sur internet, donc un site qui charge lentement peut être un gros problème.

Une façon de combattre ce problème est par la minification. C’est le processus de compression de certains fichiers (comme les fichiers CSS, JavaScript et HTML) pour réduire leur taille sans impacter leur fonctionnalité. Le meilleur, c’est que tu n’as même pas besoin de savoir coder pour minifier ces fichiers !

Qu’est-ce Que La Minification ?

Chaque seconde compte sur internet. À mesure que les sites web deviennent plus optimisés, de nombreuses personnes s’attendent à des temps de chargement rapides. En fait, près de la moitié de tous les utilisateurs d’internet s’attendent à ce que les sites se chargent en deux secondes ou moins.

Quand un délai d’une seule seconde peut entraîner une réduction de sept pour cent des conversions, être coincé avec un site lent peut être une condamnation à mort. Heureusement, il existe des remèdes pour t’aider à accélérer ton site, y compris la minification.

Cela fait référence au processus de compression des feuilles de style en cascade (CSS), JavaScript et code HTML sans affecter la fonctionnalité de ces fichiers. Tu ne t’en rends peut-être pas compte, mais beaucoup des fichiers qui maintiennent ton site en fonctionnement peuvent également le ralentir.

Ce processus de minification peut sembler très technique en surface, mais il est très simple. Il consiste simplement à supprimer les caractères inutiles du code.

Regardons un exemple. Voici à quoi pourrait ressembler un extrait CSS normal :

#bluetext {
font-size: 2em;
color: blue;
}

#redtext {
font-size: 1em;
color: red;
}

Si tu minifiais ce code, le résultat pourrait ressembler à ceci :

#bluetext{font-size:2em;color:blue;}#redtext{font-size:1em;color:red;}

Toutes les informations requises sont toujours là, mais les sauts de ligne, les espaces et quelques autres caractères ont été supprimés. Ces éléments ne sont pas nécessaires pour qu’un ordinateur comprenne le code et existent uniquement pour le rendre plus lisible pour les humains.

Il peut sembler que ce changement mineur n’aurait pas un grand effet, mais pense à la quantité de lignes de code qui fonctionnent sous le capot de ton site. La minification peut considérablement réduire la taille de chaque fichier, ce qui, à son tour, rendra ton site plus rapide à charger. Cela est particulièrement vrai si ton site contient un grand nombre de fichiers, de scripts et de plugins.

Nous allons maintenant examiner deux méthodes que tu peux utiliser pour minifier le code, manuellement et avec un plugin dédié.

Comment Minifier CSS et JavaScript Manuellement

La minification manuelle te permet de compresser rapidement le code CSS et JavaScript en utilisant une application dédiée. Cela te permet d’écrire d’abord un code facile à lire et à interpréter, avant de le minifier avec un outil en quelques secondes.

Pour commencer à minifier le CSS, nous recommandons d’utiliser un outil tel que CSS Minifier, CSS Minify ou Clean CSS.  Pour le JavaScript, Minify peut être un bon point de départ. Cependant, il existe des alternatives telles que JSCompress et JavaScript Minifier.

Heureusement, les outils fonctionneront tous de la même manière. Par exemple, en utilisant Clean CSS, tu auras juste besoin de coller ton code original dans le champ pertinent et de cliquer sur CSS Minify. Tu verras les résultats dans l’autre champ, que tu pourras ensuite copier et coller sur ton site :

Nous recommandons de sauvegarder les deux versions du code. Sinon, tu risques de perdre le code original. L’original sera plus facile à dépanner et à modifier que la version minifiée.

De plus, nous te recommandons d’utiliser la minification manuelle uniquement si tu es confiant dans tes compétences en codage. Si tu n’as pas beaucoup d’expérience, tu pourrais plutôt vouloir utiliser un plugin de minification WordPress.

2 Plugins Pour Aider À Minifier Vos Fichiers WordPress

En utilisant un plugin WordPress, tu peux automatiquement minifier les fichiers CSS et JavaScript qui maintiennent ton site en fonctionnement. Cependant, puisque ces fichiers sont si vulnérables, tu voudras t’assurer que tu utilises un plugin qui est fiable et sûr. Voici deux plugins de minification que nous recommandons.

1. Fast Velocity Minify

Fast Velocity Minify est un excellent choix tant pour les débutants que pour les utilisateurs expérimentés. Par défaut, il propose une minification automatique de tout le code CSS, JavaScript et HTML de ton site sans aucune configuration supplémentaire. Cependant, il offre également une grande quantité d’options supplémentaires si tu souhaites peaufiner les détails.

Fonctionnalités clés :

• Nécessite une configuration minimale et fonctionne automatiquement en temps réel
• Offre des options étendues pour les utilisateurs avancés
• Fournit d’excellents résultats et un support fiable

Tarification : Fast Velocity Minify est open-source et totalement gratuit.

2. Autoptimize

Autoptimize est l’un des plugins de minification les plus populaires (et pour de bonnes raisons). Il regroupera tes fichiers, les optimisera et les mettra en cache pour créer le moins de requêtes possibles sur le site. Bien qu’il offre quelques options supplémentaires, ce plugin est idéal pour ceux qui souhaitent une approche de minification ‘installer et oublier’.

Fonctionnalités principales :

• Facile à comprendre pour les débutants
• Options supplémentaires pour une performance plus optimisée
• Personnalisation avancée en utilisant l’API dédiée

Tarification : Le plugin Autoptimize est gratuit, bien que les développeurs proposent également des services de configuration premium incluant l’installation personnelle et l’optimisation adaptées à votre site.

Comment Minifier Les Fichiers WordPress Avec Un Plugin

Maintenant que tu es familiarisé avec les outils disponibles, tu peux commencer à minifier tes fichiers WordPress. Pour ce tutoriel, nous utiliserons le plugin Fast Velocity Minify. C’est parce qu’il est facile à mettre en œuvre pour les débutants, tout en offrant une grande quantité de configurations optionnelles pour les utilisateurs avancés.

Une fois que tu as installé et activé le plugin, tu n’as rien d’autre à faire — ton site est maintenant prêt pour la minification.

La prochaine fois que quelqu’un visitera ton site, le plugin interceptera tes fichiers et en créera une copie. Il regroupera ensuite les fichiers et minimisera leur codage pour réduire le nombre de requêtes. Ces fichiers optimisés sont enregistrés dans le cache et utilisés chaque fois que le site est à nouveau accédé. Cela signifie que tes fichiers originaux resteront intacts.

Si tu es un utilisateur plus expérimenté, le plugin offre certaines options avancées. Tu peux y accéder en allant dans Settings > Fast Velocity Minify dans WordPress :

Parmi d’autres options, tu peux désactiver la minification pour certains fichiers, exclure des actifs spécifiques du processus et déterminer l’emplacement du cache. Tu peux également purger tous les fichiers minifiés et permettre le traitement du code sur des chaînes de requête spécifiques :

Cependant, nous recommandons de laisser tous les paramètres par défaut tels quels, à moins que tu saches exactement ce que tu fais. Le plugin est configuré pour minifier automatiquement tout le code CSS, JavaScript et HTML, ce qui sera suffisant pour avoir un effet positif sur la plupart des sites.

Minimise Tes Fichiers WordPress Aujourd’hui

Minifier tes fichiers WordPress est un moyen rapide et simple d’améliorer les performances de ton site.

Ainsi, tu peux t’assurer que tu ne perdras pas de visiteurs à cause de longs temps de chargement.

Ça peut paraître un cauchemar technique à réaliser, mais tu n’as pas besoin de connaissances techniques en CSS ou JavaScript pour minifier tes fichiers WordPress. Un plugin comme Fast Velocity Minify peut faire tout le travail pour toi.