Comment minifier les informations CSS / JavaScript dans WordPress (3 stratégies)

Voulez-vous minifier des documents sur votre page Web WordPress ?

La minimisation de vos informations WordPress CSS et JavaScript peut accélérer leur chargement et accélérer votre site WordPress.

Dans ce manuel, nous vous montrerons comment réduire simplement les fichiers CSS/JavaScript dans WordPress pour améliorer les performances et la vitesse.

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

L'expression « minify » est utilisée pour décrire un système qui réduit la taille des fichiers de votre site Web. Pour ce faire, il supprime les espaces blancs, les lignes et les personnes indésirables du code de ressource.

Voici une instance de code CSS standard :

human body 
margin:20px
padding:20px
colour:#333333
history:#f7f7f7

h1 
font-dimension:32px
coloration#222222
margin-base:10px

Après avoir minifié le code, cela ressemblera à ceci:

entire bodymargin:20pxpadding:20pxcolor:#333history:#f7f7f7
h1font-dimension:32pxmargin-base:10px

En règle générale, il est suggéré de réduire uniquement les documents envoyés aux navigateurs des utilisateurs. Il contient des fichiers HTML, CSS et JavaScript.

Vous pouvez également minimiser les documents PHP, mais le réduire n'augmentera pas le rythme de chargement des pages pour vos clients. C'est parce que PHP est un langage de programmation côté serveur, cela signifie qu'il fonctionne sur des serveurs avant que quelque chose ne soit envoyé au navigateur Internet du visiteur.

Le gain de minification des fichiers de données est l'amélioration du rythme et des performances globales de WordPress, étant donné que les informations compactes sont plus rapides à charger.

Néanmoins, certains gourous pensent que l'avancement des fonctionnalités est assez faible pour la plupart des sites Web et n'est pas digne de la difficulté. La minification ne supprime que quelques kilo-octets de données sur la plupart des sites Web WordPress. Vous pouvez réduire beaucoup plus le temps de chargement du site en optimisant les images pour le World Wide Web.

Si vous essayez d'atteindre une note de 100/100 sur les logiciels Google Pagespeed ou GTMetrix, la réduction du CSS et du JavaScript augmentera sensiblement votre score.

Cela dit, jetons un coup d'œil à la façon de réduire sans effort CSS/JavaScript sur votre page Web WordPress.

Nous irons au-delà de 3 choix distincts parmi lesquels vous pouvez choisir:

Tout est prêt ? Commençons par notre meilleur processus proposé.

Processus 1. Minifier CSS/JavaScript dans WordPress à l'aide de WP Rocket

Cette technique est plus simple et est proposée à tous les consommateurs. Il fonctionne quel que soit l'hébergement WordPress que vous utilisez.

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

WP Rocket est le meilleur plugin de mise en cache WordPress sur le marché. Il vous permet d'insérer très facilement la mise en cache dans WordPress et d'augmenter considérablement la vitesse du site Web et les moments de chargement du site Web.

Pour plus d'informations, consultez notre tutoriel sur l'installation et la configuration de WP Rocket dans WordPress.

Lors de l'activation, vous souhaitez consulter la page Web Paramètres » WP Rocket et passer à l'onglet « Optimisation des fichiers ».

À partir de là, vous devrez consulter la solution Minify CSS documents.

WP Rocket vous affichera alors un avertissement indiquant que cela pourrait diviser des points sur votre site Web. Allez-y et cliquez simplement sur le bouton "Activer Minify CSS". Vous pouvez à tout moment désactiver cette sélection si elle provoque des problèmes avec votre site internet.

Ensuite, vous devez faire défiler jusqu'à la section Documents JavaScript ci-dessous.

Ici, il suffit de tester la case à côté de l'option "Réduire les fichiers JavaScript".

Encore une fois, vous verrez un avertissement indiquant que cela pourrait casser des choses sur votre site Web. Allez-y et cliquez simplement sur le bouton "Activer Minify JavaScript".

Juste après cela, n'oubliez jamais de cliquer sur le bouton Conserver les réglages pour conserver vos configurations.

WP Rocket va maintenant commencer à minifier vos informations CSS et JavaScript. Vous pouvez très bien 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 futur visiteur de la page Web.

Technique 2. Minifier CSS/JavaScript dans WordPress en utilisant SiteGround

Si vous appliquez SiteGround en tant que fournisseur de services d'hébergement Web WordPress, vous pouvez réduire les fichiers CSS en utilisant SiteGround Optimizer.

SiteGround Optimizer est un plug-in d'optimisation des performances générales qui s'exécute sur leur propre système. Il fonctionne bien avec leur PHP ultrarapide pour renforcer les périodes de chargement de votre site.

Il vous suffit de configurer et d'activer le plugin SiteGround Optimizer sur votre site WordPress. Pour plus de détails, consultez notre guide étape par étape sur la façon d'installer un plugin WordPress.

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

Cela vous amènera simplement aux paramètres de SG Optimizer.

À partir de cet article, vous devez cliquer sur le bouton "Aller à l'interface" moins que sur "Autres optimisations".

Sur le moniteur suivant, vous devez basculer sur la bascule à venir vers la solution "Réduire les fichiers CSS".

À venir, vous devrez passer à l'onglet JavaScript et activer la bascule à venir pour la sélection "Réduire les fichiers JavaScript".

C'est tout! Vous pouvez maintenant vider votre cache WordPress et jeter un œil à votre site pour charger des versions minifiées des documents CSS et JS.

Approche 3. Minifier CSS/JavaScript en utilisant Autoptimize

Cette méthode est proposée aux consommateurs qui ne sont pas sur SiteGround et qui ne travaillent pas avec WP Rocket.

Au départ, vous devez configurer et activer le plugin Autoptimize. Pour plus de détails, consultez notre guide étape par action sur la façon d'installer un plugin WordPress.

Lors de l'activation, vous devez jeter un œil à la page Web Options » Autoptimize pour configurer les options du plugin.

À partir de cet article, vous devez d'abord vérifier l'option "Optimiser le code JavaScript" sous Options JavaScript.

Après cela, vous devez faire défiler jusqu'aux choix CSS et examiner la case à côté de l'option "Optimiser le code CSS".

N'oubliez jamais de cliquer sur le bouton Conserver les ajustements pour stocker vos configurations.

Ensuite, vous pouvez simplement cliquer sur le bouton Vacant Cache pour commencer à travailler avec vos fichiers de données minifiés. Le plugin peut également être utilisé pour gérer le blocage du rendu JavaScript et CSS dans WordPress.

Nous espérons que cette publication vous a aidé à minifier CSS et JavaScript sur votre page Web WordPress. Vous pouvez également consulter notre didacticiel sur l'optimisation des éléments vitaux du réseau de base dans WordPress et suivre notre meilleur didacticiel sur les performances globales de WordPress.

Si vous avez aimé cette publication, assurez-vous de vous abonner à notre chaîne YouTube pour les didacticiels de films WordPress. Vous pouvez également nous rencontrer sur Twitter et Facebook.