Comment minimiser les fichiers CSS / JavaScript dans WordPress (3 façons)

Personne ne veut d’un site lent. Les temps de chargement lents frustrent les internautes et nuisent au classement dans les moteurs de recherche.

En tant que spécialistes de l’optimisation des performances de WordPress, nous avons trouvé que la minification des fichiers CSS et JavaScript peut aider à créer un site plus rapide et plus efficace.

Dans ce guide, nous vous afficherons comment minifier facilement les fichiers CSS et JavaScript dans WordPress afin d’améliorer les performances et la vitesse, stimulant ainsi l’expérience utilisateur et la visibilité sur les moteurs de recherche.

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 WordPress. Pour ce faire, il retire 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;
}

Une fois le code modifié, il se présentera comme suit :

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

En général, il est recommandé de minifier uniquement les fichiers qui sont envoyés aux navigateurs des utilisateurs/utilisatrices. Cela inclut les fichiers HTML, CSS et JavaScript.

Vous pouvez également minifier les fichiers PHP, mais cela n’améliorera pas la vitesse de chargement des pages pour vos utilisateurs/utilisatrices. En effet, PHP est un langage de programmation côté serveur, c’est-à-dire qu’il s’exécute sur les serveurs avant d’être envoyé au navigateur web de l’internaute.

L’avantage de la minification des fichiers est l’amélioration de la vitesse et des performances de WordPress, car les fichiers compacts sont plus rapides à charger.

Cependant, certains experts estiment que l’amélioration des performances est très faible pour la plupart des sites et qu’elle n’en vaut pas la peine. La minification retire uniquement quelques kilo-octets de données sur la plupart des sites WordPress. Vous pouvez réduire davantage le temps de chargement des pages en optimisant les images pour le web.

Si vous essayez d’obtenir un score de 100/100 sur Google PageSpeed Insights ou l’outil GTMetrix, alors la minification de CSS et de JavaScript améliorera considérablement votre score.

Ceci étant dit, voyons comment minifier facilement les CSS/JavaScript sur votre site WordPress. Nous allons passer en revue 3 options différentes parmi lesquelles vous pouvez choisir :

Vous êtes prêt ? Premiers pas avec notre méthode la plus recommandée.

Méthode 1. Minifier CSS/JavaScript dans WordPress en utilisant WP Rocket

Cette méthode est plus facile et est recommandée pour toutes les utilisatrices/utilisateurs. Elle fonctionne quel que soit l’hébergeur WordPress que vous utilisez.

Tout d’abord, vous devez installer et activer l’extension WP Rocket. Pour plus de détails, consultez notre guide étape par étape sur l’installation d’une extension WordPress.

WP Rocket est la meilleure extension 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 et le temps de chargement des pages.

Pour plus de détails, consultez notre tutoriel sur la façon d’installer et de configurer WP Rocket dans WordPress.

Une fois activé, vous devez vous rendre sur la page Réglages  » WP Rocket et basculer sur 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 choses sur votre site. Allez-y et cliquez sur le bouton ‘Activer Minify CSS’. Vous pouvez toujours désactiver cette option si elle cause des problèmes sur votre site.

Ensuite, vous devez défiler jusqu’à la section Fichiers JavaScript ci-dessous.

Il suffit de cocher la case située à côté de l’option « Minifier les fichiers JavaScript ».

Là encore, vous verrez un avertissement vous indiquant que cela pourrait perturber votre site. Cliquez sur le bouton « Activer Minify JavaScript ».

Ensuite, n’oubliez pas de cliquer sur le bouton « Enregistrer les modifications » pour stocker vos réglages.

WP Rocket va maintenant commencer à minifier vos fichiers CSS et JavaScript. Vous pouvez vider votre cache dans les Réglages du plugin pour vous assurer qu’il commence à utiliser le CSS et le JavaScript minifiés pour le prochain internaute.

Méthode 2. Minifier CSS/JavaScript dans WordPress en utilisant SiteGround

Si vous utilisez SiteGround comme fournisseur d’hébergement WordPress, vous pouvez minifier les fichiers CSS à l’aide de SiteGround Optimizer.

SiteGround Optimizer est une extension d’optimisation des performances qui fonctionne sur sa propre plateforme. Il fonctionne bien avec leur PHP Ultrafast pour améliorer les temps de chargement de votre site.

Il suffit d’installer et d’activer l’extension SiteGround Optimizer sur votre site WordPress. Pour plus de détails, consultez notre guide étape par étape sur l’installation d’une extension WordPress.

Après cela, vous devez cliquer sur le menu SG Optimizer dans votre colonne latérale d’administration WordPress.

Vous accédez ainsi aux Réglages de SG Optimizer.

À partir de là, vous devez cliquer sur le bouton « Go To Frontend » (Aller à l’interface publique) sous « Other Optimizations » (Autres optimisations).

Dans l’écran suivant, vous pourrez gérer l’interface publique CSS.

Vous devez activer le permuter à côté de l’option « Minifier les fichiers CSS ».

Ensuite, vous devez passer à l’onglet JavaScript et activer le permuter à côté de l’option « Minifier les fichiers JavaScript ».

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

Méthode 3. Minifier CSS/JavaScript à l’aide d’Autoptimize

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

Tout d’abord, vous devez installer et activer l’extension Autoptimize. Pour plus de détails, consultez notre guide étape par étape sur l’installation d’une extension WordPress.

Une fois activé, vous devez vous rendre sur la page Réglages  » Autoptimiser pour configurer les paramètres de l’extension.

À partir de là, vous devez d’abord cocher l’option « Optimiser le code JavaScript » sous Options JavaScript.

Ensuite, vous devez défiler vers le bas jusqu’aux options CSS.

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

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

Ensuite, vous pouvez cliquer sur le bouton Empty Cache pour commencer à utiliser vos fichiers minifiés. L’extension peut également être utilisée pour corriger les JavaScript et CSS qui bloquent le rendu dans WordPress.

Nous espérons que cet article vous a aidé à minifier CSS et JavaScript sur votre site WordPress. Vous pouvez également consulter notre guide sur l’optimisation de Core Web Vitals dans WordPress et notre choix d’experts des meilleurs constructeurs de pages WordPress par glisser-déposer.

Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.