Obtenir les meilleures performances possibles est le rêve de tout gestionnaire de site web. Grouper et minifier les ressources sur WordPress est l'une des meilleures solutions, mais cela peut s'avérer complexe. Grouper toutes vos ressources (principalement les fichiers CSS et JS) peut exposer votre site à des risques si vous n'êtes pas développeur, car cela peut engendrer des conflits.

WP Speed of Light est la solution idéale pour optimiser votre site WordPress grâce à ses nombreuses options permettant d'accélérer son chargement, le tout via un tableau de bord très intuitif. Parmi ces options, le regroupement et la minification des ressources sont particulièrement utiles. L'inclusion ou l'exclusion de fichiers individuels lors de ce processus est essentielle pour une optimisation personnalisée et sans conflits.

Pour cet article de blog, nous allons utiliser un site WordPress d'exemple et apprendre comment procéder afin de simplifier la configuration.

Comment effectuer une minification JS et CSS WordPress

Apprenons à effectuer une minification JS et CSS WordPress, mais d'abord, nous devons savoir ce que signifie la minification : « La minification désigne le processus de suppression des données inutiles ou redondantes sans affecter la façon dont la ressource est traitée par le navigateur - par exemple les commentaires et la mise en forme du code, la suppression du code inutilisé, l'utilisation de noms de variables et de fonctions plus courts, etc. ».

Nous allons maintenant effectuer un test de vitesse sur notre page afin de constater les changements. Dans cet exemple, nous utilisons un site avec WooCommerce et quelques produits ; le premier chargement sera donc un peu lent.

Oui, 2,79 secondes pour charger la page, pas mal, mais on peut faire mieux. Minifions le JS et le CSS pour constater la différence. Rendez-vous dans WP Speed of light > SpeedUp > Group & Minify ; vous y trouverez le menu avec toutes les options de minification. La version gratuite du plugin inclut l'option de regroupement et de minification, mais l'exclusion visuelle des fichiers est uniquement disponible dans la version PRO.

Les options de l'extension PRO sont les suivantes : Exclure les scripts en ligne (exclure les scripts en ligne de la minification), déplacer les scripts vers le pied de page (cela permet d'accélérer votre site en déplaçant tous les scripts minifiés vers le pied de page), Grouper les polices et les polices Google (grouper les polices locales et les polices Google dans un seul fichier pour un chargement plus rapide) et Exclusion avancée de fichiers.
 
Vous avez désormais la possibilité de minifier, comme vous pouvez le constater, les fichiers JS, CSS et HTML. Il vous suffit d'activer ces options, de cliquer sur « Enregistrer » et toutes vos ressources seront minifiées immédiatement. Cette configuration avancée peut parfois poser problème, mais tout peut être résolu en excluant certains codes et fichiers (avec l'extension PRO).

Désormais, tout le travail de développement qui pouvait prendre des heures est effectué en quelques secondes.

Prochaine étape : optimiser le CSS et le JS de WordPress

Grâce à ce plugin, WordPress optimisera automatiquement le CSS et le JS en activant simplement les options de regroupement sur le tableau de bord. Allez dans WP Speed of Light > SpeedUp > Group & Minify , et vous verrez un tableau de bord avec les options permettant de regrouper le CSS et le JS.

Ces options vous permettent de :

• Grouper les fichiers JS : Regrouper plusieurs fichiers JavaScript en un seul fichier minimisera le nombre de requêtes HTTP
• Regrouper les fichiers CSS : le regroupement de plusieurs fichiers CSS en un seul fichier minimisera le nombre de requêtes HTTP.

Requêtes HTTP : il s’agit de requêtes envoyées au serveur chaque fois que nous sélectionnons un élément ou que nous passons à une autre page du même site. Si nous pouvons réduire ces requêtes, le temps de chargement sera réduit.

Pour vérifier combien de fichiers et de scripts vous pouvez regrouper sur votre site web, ouvrez simplement la console de votre navigateur (clic droit > Inspecter ou F12) et ouvrez le panneau réseau .

Vous pouvez ensuite lister tous les fichiers chargés par type ; ici, dans cet exemple, j'ai cliqué uniquement sur la liste des fichiers JS.

Maintenant que nous sommes dans ces paramètres, activez simplement les options de groupe (Group CSS et Group JS) et cliquez sur Enregistrer. N'oubliez pas que ces options doivent être utilisées avec précaution et que vous devrez tester votre page car elles peuvent provoquer des conflits.

Passons aux choses sérieuses et optimisons l'épaisseur des polices

Quoi ? D'autres optimisations ? Oui ! Vous pourrez optimiser la graisse des polices. C'est très simple : il vous suffit d'activer l'option dans les paramètres. Allez dans WP Speed of Light > SpeedUp > Group & Minify > Group fonts and Google Fonts .
Cette option vous permet de regrouper les polices dans un seul fichier pour un chargement plus rapide. C'est très pratique, car la plupart des thèmes et mises en page WordPress proposent par défaut deux polices ou plus, avec toutes leurs déclinaisons (normal, gras, italique, etc.).

Il suffit d'activer cette option, de cliquer sur Enregistrer et toutes les polices seront regroupées.

Maintenant que nous avons activé toutes les options de minification et de regroupement des ressources, nous devrions constater une différence dans le temps de chargement de notre site. Vérifions la vitesse.

Quelle différence ! De 2,8 à 0,56 seconde ! Comme nous vous l’avons indiqué en début d’article, nous pouvons encore améliorer le temps de chargement ;)

Comment utiliser l'exclusion de la minification des fichiers

La minification peut engendrer des problèmes sur votre site, notamment lors du regroupement de fichiers contenant des erreurs de syntaxe ou des problèmes similaires au niveau des variables ou des classes. C'est pourquoi l'option « Exclusion de fichiers pour la minification » vous permet d'exclure certains fichiers du processus de minification et de regroupement. Pour cela, rendez-vous dans WP Speed of Light > SpeedUp > Group & Minify ; vous y trouverez l' d'exclusion de fichiers avancée .

Pour utiliser l'exclusion de fichiers avancée, vous devrez d'abord effectuer une analyse, activer l'option et cliquer sur Lancer l'analyse.

 Pour pouvoir lister les scripts chargés sur votre site web, WP Speed of Light doit analyser votre dossier. Ils se trouvent généralement dans le dossier /wp-content qui regroupe tous vos plugins et votre thème. Sélectionnez ce dossier (au moins) et cliquez sur « Analyser maintenant ».

Le programme effectuera une analyse. Enfin, cliquez sur « Afficher les résultats » une fois l'analyse terminée.

Une liste de fichiers classés par type (Tous, JS, CSS, Polices) devrait s'afficher ci-dessous. Si vous avez identifié un fichier posant problème lors de l'activation du groupe de fichiers et de la minification, vous pouvez l'exclure de cette liste à l'aide d'un simple bouton marche/arrêt .

Cela vous permettra d'exclure des fichiers et ainsi de résoudre facilement tout problème pouvant survenir lors de la minification des ressources. Le processus de regroupement et de minification nécessite encore du travail, notamment pour les tests, mais l'effort en vaut vraiment la peine. Vous pourrez toujours tester son fonctionnement en effectuant un test de vitesse directement depuis WP Speed of Light .
 
Essayez WP Speed of Light : https://www.joomunited.com/wordpress-products/wp-speed-of-light