Minification dans WordPress : qu’est-ce que c’est et comment le faire

minifiez vos fichiers CSS dans WordPress

Au fur et à mesure que vous ajoutez des outils et du contenu à votre site, le nombre de fichiers augmentera, ce qui ralentira les temps de chargement. La vitesse est importante sur Internet, donc un site à chargement lent peut être un gros problème.

Une façon de lutter contre ce problème est la minification. Il s’agit du processus de compression de certains fichiers (tels que les fichiers CSS, JavaScript et HTML) pour réduire leur taille sans affecter leur fonctionnalité. La meilleure partie est que vous n’avez même pas besoin de savoir-faire en matière de codage pour minifier ces fichiers !

Qu’est-ce que la minification ?

Chaque seconde compte sur Internet. À mesure que les sites Web sont de plus en plus optimisés, de nombreuses personnes ont été préparées à s’attendre à des temps de chargement rapides. En fait, près de la moitié de tous les internautes s’attendent à ce que les sites se chargent en deux secondes ou moins.

Lorsqu’un délai d’une seconde peut entraîner une réduction de 7 % des conversions, être coincé avec un site lent peut être une condamnation à mort. Heureusement, il existe des remèdes pour vous aider à accélérer votre site, y compris la minification.

Cela fait référence au processus de compression des feuilles de style en cascade (CSS), JavaScript et du code HTML sans affecter la fonctionnalité de ces fichiers. Vous ne le réalisez peut-être pas, mais de nombreux fichiers qui permettent à votre site de fonctionner peuvent également le ralentir.

Ce processus de minification peut sembler trop technique à première vue, mais il est très simple. Il s’agit simplement de supprimer les caractères inutiles du code.

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

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

Si vous réduisiez 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 certains autres caractères ont été supprimés. Ces éléments ne sont pas nécessaires à un ordinateur pour comprendre le code et n’existent que pour le rendre plus lisible pour les humains.

Il peut sembler que ce changement mineur n’aurait pas un grand effet, mais pensez au nombre de lignes de code que vous avez sous le capot de votre site. La minification peut réduire considérablement la taille de chaque fichier, ce qui, à son tour, accélérera le chargement de votre site. Cela est particulièrement vrai si votre site contient un grand nombre de fichiers, de scripts et de plugins.

Nous allons maintenant examiner deux méthodes que vous pouvez utiliser pour minifier le code, à la fois manuellement et avec un plugin dédié.

Recevez du contenu directement dans votre boîte de réception

Abonnez-vous à notre blog et recevez un excellent contenu comme celui-ci directement dans votre boîte de réception.

Comment minifier CSS et JavaScript manuellement

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

Pour commencer à minifier le CSS, nous vous recommandons d’utiliser un outil tel que CSS Minifier, CSS Minify ou Clean CSS. Avec 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, il vous suffira de coller votre code d’origine dans le champ correspondant et de cliquer sur Minification CSS. Vous verrez les résultats dans l’autre champ, que vous pourrez ensuite copier et coller dans votre site :

minifiez vos fichiers CSS dans WordPress

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

De plus, nous vous recommandons de n’utiliser la minification manuelle que si vous avez confiance en vos capacités de codage. Si vous n’avez pas beaucoup d’expérience, vous pouvez utiliser un plugin de minification WordPress à la place.

2 plugins pour aider à minifier vos fichiers WordPress

À l’aide d’un plugin WordPress, vous pouvez réduire automatiquement les fichiers CSS et JavaScript qui permettent à votre site de fonctionner. Cependant, étant donné que ces fichiers sont si vulnérables, vous devez vous assurer que vous utilisez un plugin fiable et sûr. Voici deux plugins de minification que nous recommandons.

1. Réduction rapide de la vitesse

Réduction rapide de la vitesse

Fast Velocity Minify est un excellent choix pour les novices et les utilisateurs expérimentés. Par défaut, il offre une minification automatique de tout le code CSS, JavaScript et HTML de votre site sans aucune configuration supplémentaire. Cependant, il fournit également une énorme quantité d’options supplémentaires si vous souhaitez modifier les détails.

Principales caractéristiques:

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

Tarification : Fast Velocity Minify est open source et entièrement gratuit.

2. Optimisation automatique

Plugin WordPress Autoptimize pour réduire les fichiers et accélérer le site Web WordPress

Autoptimize est l’un des plugins de minification les plus populaires (et pour cause). Il regroupera vos fichiers, les optimisera et les mettra en cache pour créer le moins de demandes possible sur le site. Bien qu’il offre des options supplémentaires, ce plugin est idéal pour ceux qui veulent une approche « définir et oublier » de la minification.

Principales caractéristiques:

  • Facile à comprendre pour les débutants
  • Options supplémentaires pour des performances plus optimisées
  • Personnalisation avancée à l’aide de l’API dédiée

Tarification : Le plugin Autoptimize est gratuit, bien que les développeurs fournissent également des services de configuration premium, y compris une installation personnelle et une optimisation adaptée à votre site.

Comment réduire les fichiers WordPress avec un plugin

Maintenant que vous êtes familiarisé avec les outils disponibles, vous pouvez commencer à minifier vos fichiers WordPress. Pour ce tutoriel, nous utiliserons le plugin Fast Velocity Minify. En effet, il est facile à mettre en œuvre pour les débutants, tout en offrant de nombreuses options de configuration facultatives pour les utilisateurs avancés.

Une fois que vous avez installé et activé le plugin, vous n’avez rien d’autre à faire – votre site est maintenant prêt pour la minification.

La prochaine fois que quelqu’un visitera votre site, le plugin interceptera vos fichiers et en créera une copie. Il regroupera ensuite les fichiers et minifiera 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 consulté. Cela signifie que vos fichiers originaux ne seront pas affectés.

Si vous êtes un utilisateur plus expérimenté, le plugin propose des paramètres avancés. Vous pouvez y accéder en vous rendant sur Paramètres > Réduction de la vitesse rapide dans WordPress :

Paramètres Fast Velocity Minify dans WordPress

Entre autres options, vous pouvez désactiver la minification pour certains fichiers, exclure des ressources spécifiques du processus et déterminer l’emplacement du cache. Vous pouvez également purger tous les fichiers minifiés et autoriser le traitement du code sur des chaînes de requête spécifiques :

Paramètres Fast Velocity Minify dans WordPress

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

Minifiez vos fichiers WordPress aujourd’hui

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

De cette façon, vous pouvez vous assurer que vous ne perdez pas de visiteurs en raison de longs temps de chargement.

Cela peut sembler être un cauchemar technique à accomplir, mais vous n’avez pas besoin de connaissances techniques en CSS ou JavaScript pour minifier vos fichiers WordPress. Un plugin comme Fast Velocity Minify peut faire tout le travail pour vous.

Faites-en plus avec DreamPress

Les utilisateurs de DreamPress Plus et Pro ont accès à Jetpack Professional (et à plus de 200 thèmes premium) sans frais supplémentaires !

Hébergement WordPress géré - DreamPress