Comment grouper et minifier les ressources dans WordPress

Avoir les meilleures performances possibles est le rêve de tous ceux qui gèrent un site Web, regrouper et minifier les ressources sur WordPress est l'une des meilleures choses que nous puissions faire pour cela, mais cela peut être vraiment difficile. Regrouper toutes vos ressources (fichiers css et js principalement) peut exposer votre site Web si vous n'êtes pas développeur, car cela peut générer des conflits.

WP Speed of Light est la meilleure solution pour améliorer la performance de votre site WordPress, car il dispose de nombreuses options pour faire charger votre site rapidement avec un tableau de bord très convivial et oui, l'une de ces options est de grouper et de minifier les ressources. L'inclusion/exclusion de fichiers uniques du processus de regroupement et de minification est une clé pour une optimisation personnalisée sans conflits.

Nous allons utiliser un exemple de site WordPress pour ce billet de blog et nous allons apprendre comment faire cela pour que le processus de configuration de tout soit plus facile.

Comment faire une minification JS et CSS de WordPress

Apprenons à faire une minification de JS et de CSS de WordPress, mais d'abord, nous devons savoir ce que signifie la minification «La minification fait référence au 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 de code et la mise en forme, la suppression du code inutilisé, l'utilisation de noms de variables et de fonctions plus courts, et ainsi de suite».

Maintenant, ce que nous allons faire est un test de vitesse de notre page afin de voir les changements, pour cet exemple, nous utilisons un site avec woocommerce et quelques produits, donc la première fois, il se chargera un peu lentement.

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).

Maintenant, tout le travail de développeur qui pourrait prendre des heures est effectué en quelques secondes seulement.

Prochaine étape, optimisation de CSS et 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 :

• Groupe JS : Regrouper plusieurs fichiers Javascript en un seul fichier minimisera le nombre de requêtes HTTP
• Groupe CSS : Regrouper plusieurs fichiers CSS en un seul fichier minimisera le nombre de requêtes HTTP.

Requêtes HTTP : ce sont des requêtes qui sont faites au serveur chaque fois que nous sélectionnons quelque chose ou que nous allons à une autre page du même site, donc 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 alors lister tous les fichiers chargés par type, ici dans cet exemple, j'ai cliqué sur la liste des fichiers JS uniquement.

Maintenant que nous sommes dans ces paramètres, activez simplement les options de groupe (Grouper CSS et Grouper JS) et cliquez sur enregistrer, gardez à l'esprit que ces options doivent être utilisées avec prudence et vous devrez tester votre page car cela peut provoquer des conflits.

Soyons sérieux et optimisons le poids de la police

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.). 

Activez simplement cette option, cliquez sur enregistrer et toutes les polices seront groupées.

Maintenant que nous avons activé toutes les options pour minifier et grouper les ressources, nous devrions voir une différence dans le temps de chargement de notre site, vérifions la vitesse.

Quelle différence, de 2,8 à 0,56 secondes ! Comme nous vous l'avons dit au début de cet article, nous pouvons améliorer le temps de chargement ;)

Comment utiliser l'exclusion de minification de 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 .

Afin d'utiliser l'exclusion de fichiers avancée, vous devrez exécuter une analyse, activer l'option et cliquer sur Exécuter 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 ».

Il lancera une analyse, enfin, cliquez sur afficher les résultats lorsque l'analyse est 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