Comment minifier les fichiers CSS / JavaScript dans WordPress (3 méthodes)

Les temps de chargement lents frustrent les visiteurs et nuisent à votre classement Google. Même un délai d'une seconde peut vous coûter des abonnés et des ventes.

La minification peut sembler technique, mais c'est simplement un moyen de réduire la taille du code de votre site Web afin qu'il se charge plus rapidement. Nous utilisons cette technique sur nos propres sites Web pour garantir les meilleures performances.

Dans ce guide, nous vous montrerons comment minifier facilement les fichiers CSS et JavaScript dans WordPress.

Qu'est-ce que la minification et quand en avez-vous besoin ?

Le terme « minifier » est utilisé pour décrire une méthode qui réduit la taille des fichiers de votre site Web WordPress. Cela se fait en supprimant les espaces blancs, les lignes et les caractères inutiles du code source.

Voici un exemple de code CSS normal :

body {
margin:20px;
padding:20px;
color:#333333;
background:#f7f7f7;
}
h1 {
font-size:32px;
color#222222;
margin-bottom:10px;
}

Après la minification du code, il ressemblera à ceci :

body{margin:20px;padding:20px;color:#333;background:#f7f7f7}
h1{font-size:32px;margin-bottom:10px}

Généralement, il est recommandé de minifier uniquement les fichiers qui sont envoyés aux navigateurs de l'utilisateur. Cela inclut les fichiers HTML, CSS et JavaScript.

Vous n'avez pas besoin de minifier les fichiers PHP. PHP est un langage de programmation côté serveur, ce qui signifie qu'il s'exécute sur le serveur avant que quoi que ce soit ne soit envoyé au navigateur Web du visiteur, donc le minifier n'améliore pas les temps de chargement de l'utilisateur.

L'avantage de minifier les fichiers est une amélioration de la vitesse et des performances de WordPress, car les fichiers compacts se chargent plus rapidement.

Cependant, certains experts pensent que l'amélioration des performances est très faible pour la plupart des sites Web et ne vaut pas la peine. La minification ne supprime que quelques kilo-octets de données sur la plupart des sites WordPress. Vous pouvez réduire le temps de chargement des pages davantage en optimisant les images pour le Web.

Si vous essayez d'améliorer votre score sur Google PageSpeed Insights ou sur l'outil GTMetrix, alors minifier le CSS et le JavaScript est une étape essentielle.

Cela dit, examinons comment minifier facilement le CSS/JavaScript sur votre site WordPress. Nous allons examiner 3 options différentes parmi lesquelles vous pouvez choisir :

Commençons par notre méthode la plus recommandée.

Méthode 1. Minifier le CSS/JavaScript dans WordPress avec WP Rocket

Cette méthode est plus facile et est recommandée pour tous les utilisateurs. Elle fonctionne quel que soit l'hébergement WordPress que vous utilisez.

Tout d'abord, vous devez installer et activer le plugin WP Rocket. Pour plus de détails, consultez notre guide étape par étape sur comment installer un plugin WordPress.

WP Rocket est le meilleur plugin de mise en cache WordPress sur le marché. Il vous permet d'ajouter facilement la mise en cache à WordPress et d'améliorer considérablement la vitesse du site Web et les temps de chargement des pages.

Pour plus de détails, consultez notre tutoriel sur comment installer et configurer WP Rocket dans WordPress.

Après l'activation, vous devez visiter la page Paramètres » WP Rocket et passer à l'onglet « Optimisation des fichiers ».

À partir de là, vous devez cocher l'option Minifier les fichiers CSS.

WP Rocket vous affichera alors un avertissement indiquant que cela pourrait casser des éléments de votre site. Cliquez sur le bouton « Activer la minification CSS ». Vous pouvez toujours désactiver cette option si elle cause des problèmes avec votre site web.

Ensuite, vous devez faire défiler vers le bas jusqu'à la section Fichiers JavaScript.

Ici, cochez simplement la case à côté de l'option « Minifier les fichiers JavaScript ».

Encore une fois, vous verrez un avertissement indiquant que cela pourrait casser des éléments de votre site. Cliquez sur le bouton « Activer la minification JavaScript ».

Après cela, n'oubliez pas de cliquer sur le bouton « Enregistrer les modifications » pour enregistrer vos paramètres. Utilisez votre site Web de manière approfondie pour vous assurer que tout fonctionne efficacement.

WP Rocket commencera maintenant à minifier vos fichiers CSS et JavaScript. Vous pouvez vider votre cache dans les paramètres du plugin pour vous assurer qu'il commence à utiliser le CSS et le JavaScript minifiés pour le prochain visiteur de votre site web.

Méthode 2. Minifier le CSS/JavaScript dans WordPress avec SiteGround

Si vous utilisez SiteGround comme votre fournisseur d'hébergement WordPress, vous pouvez minifier les fichiers CSS à l'aide du plugin Speed Optimizer (anciennement SiteGround Optimizer).

Speed Optimizer est un plugin d'optimisation des performances qui fonctionne sur sa propre plateforme. Il fonctionne bien avec leur PHP ultra-rapide pour améliorer les temps de chargement de votre site.

Installez et activez simplement le plugin Speed Optimizer sur votre site WordPress. Pour plus de détails, consultez notre guide étape par étape sur comment installer un plugin WordPress.

Après cela, vous devez cliquer sur le menu Speed Optimizer dans la barre latérale d'administration de votre WordPress. Cela vous mènera aux paramètres de SG Optimizer.

À partir d'ici, vous devez cliquer sur le bouton « Go To Frontend » sous « Other Optimizations ».

Sur la page des paramètres Frontend, passez à l'onglet 'CSS'.

Ensuite, activez le bouton à bascule à côté de l'option 'Minifier les fichiers CSS'.

Ensuite, vous devez passer à l'onglet JavaScript et activer le commutateur à côté de l'option « Minify JavaScript Files ».

C'est tout ! Vous pouvez maintenant vider votre cache WordPress et visiter votre site Web pour charger les versions minifiées des fichiers CSS et JS.

Méthode 3. Minifier le CSS/JavaScript avec Autoptimize

Cette méthode est recommandée pour les utilisateurs qui ne sont pas sur SiteGround et qui n'utilisent pas WP Rocket.

Tout d'abord, vous devez installer et activer le plugin Autoptimize. Pour plus de détails, consultez notre guide étape par étape sur comment installer un plugin WordPress.

Après l'activation, vous devez visiter la page Paramètres » Autoptimize pour configurer les paramètres du plugin.

À partir d'ici, vous devez d'abord cocher l'option « Optimiser le code JavaScript » sous Options JavaScript.

Après cela, vous devez faire défiler jusqu'aux Options CSS.

Une fois sur place, vous devez cocher la case à côté de l'option « Optimiser le code CSS ».

N'oubliez pas de cliquer sur le bouton « Enregistrer les modifications » pour sauvegarder vos réglages.

Ensuite, vous pouvez cliquer sur le bouton Vider le cache pour commencer à utiliser vos fichiers minifiés. Le plugin peut également être utilisé pour corriger le JavaScript et le CSS bloquant le rendu dans WordPress.

Foire aux questions sur la minification

Voici les réponses à certaines des questions les plus courantes que les gens se posent également sur la minification des fichiers dans WordPress. Celles-ci peuvent vous aider à mieux comprendre le processus et ses avantages pour votre site.

1. Qu'est-ce que la minification exactement ?

La minification est un processus qui réduit la taille des fichiers de code de votre site web en supprimant tous les caractères inutiles sans modifier le fonctionnement du code. Cela inclut la suppression des espaces blancs, des commentaires et des sauts de ligne des fichiers HTML, CSS et JavaScript. Comme les fichiers résultants sont plus petits et plus compacts, leur téléchargement et leur traitement par le navigateur d'un visiteur sont plus rapides, ce qui peut contribuer à améliorer la vitesse globale de votre site web.

2. La minification des fichiers CSS et JavaScript va-t-elle casser mon site web ?

Bien que ce ne soit pas courant avec les plugins modernes, la minification peut parfois causer des problèmes visuels ou fonctionnels sur votre site. C'est pourquoi les plugins de performance affichent souvent un avertissement avant d'activer la fonctionnalité. Il est toujours conseillé de faire une sauvegarde au préalable, puis de tester soigneusement votre site web dans une fenêtre de navigation privée après avoir activé la minification. Si vous constatez des problèmes, vous pouvez simplement désactiver le paramètre ou utiliser les fonctionnalités du plugin pour exclure des fichiers spécifiques qui pourraient causer le conflit.

3. La minification fait-elle vraiment une grande différence ?

L'impact de la minification peut varier en fonction de votre site. Pour de nombreux sites web, elle ne supprime que quelques kilo-octets de données, et vous pourriez constater une amélioration de vitesse plus significative en optimisant vos images. Cependant, si votre objectif principal est d'obtenir un score parfait de 100/100 sur les outils de test de vitesse comme Google PageSpeed Insights ou GTMetrix, alors la minification de vos fichiers CSS et JavaScript est une étape importante qui améliorera considérablement votre score.

4. Ai-je besoin d'un plugin pour minifier les fichiers dans WordPress ?

Pour la quasi-totalité des utilisateurs de WordPress, la méthode la plus simple et la plus recommandée pour minifier les fichiers consiste à utiliser un plugin de mise en cache ou de performance tel que WP Rocket ou Autoptimize. Ces outils vous permettent d'activer la minification en quelques clics seulement. Certains hébergeurs, comme SiteGround, proposent également leurs propres plugins d'optimisation intégrant ces fonctionnalités. La minification manuelle des fichiers est un processus complexe et risqué qui n'est pas recommandé pour les débutants.

Ressources supplémentaires

Maintenant que vous savez comment minifier le code de votre site, voici d'autres guides pour vous aider à améliorer les performances de votre WordPress :

• Le guide ultime pour améliorer la vitesse et les performances de WordPress
• Comment installer et configurer WP Rocket correctement dans WordPress
• Comment optimiser les Core Web Vitals pour WordPress (Guide ultime)
• Accélérer votre WordPress – Comment enregistrer des images optimisées pour le Web
• Meilleurs plugins de mise en cache WordPress pour accélérer votre site Web

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.