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 cela pourrait être mieux, il suffit de minifier les fichiers js et CSS et de voir la différence, allez à WP Speed of light > Accélération > Grouper & Minifier, vous pourrez voir le menu avec toutes les options pour minifier. La version gratuite du plugin inclut l'option de groupement et de minification, mais l'exclusion visuelle de fichiers n'est disponible que dans la version PRO de l'extension.

Options du module complémentaire PRO : Exclure le script en ligne (exclure le script en ligne de la minification), déplacer les scripts vers le pied de page (cela vous permet d'accélérer votre site en déplaçant tous les scripts minifiés vers le pied de page), Regrouper les polices et les polices Google (regroupe les polices locales et les polices Google dans un seul fichier pour être servi plus rapidement) et exclusion de fichiers avancée.
 
Vous avez la possibilité de minifier, comme vous pouvez le voir, JS, CSS et également le HTML maintenant, il suffit d'activer ces options, cliquez sur enregistrer et toutes vos ressources seront minifiées immédiatement, cela pourrait avoir des problèmes car il s'agit d'une configuration avancée, mais tout peut être résolu avec l'exclusion de certains codes et fichiers (avec le module complémentaire 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

Avec ce plugin, nous allons permettre à WordPress d'optimiser CSS et JS simplement en activant les options de groupe sur le tableau de bord, allez à WP Speed of Light > Accélération > Grouper & Minifier, vous allez pouvoir voir un tableau de bord avec les options pour grouper CSS et 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, 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 le poids de la police et cela sera aussi facile que d'activer l'option dans les paramètres, il suffit d'aller à WP Speed of Light > Accélérer > Grouper & Minifier > Grouper les polices et les polices Google option.
L'option de groupement des polices et des polices Google vous permettra de les regrouper en un seul fichier pour être servi plus rapidement, c'est assez pratique car la plupart des thèmes et des dispositions WordPress sont livrés avec 2 polices ou plus par défaut avec toutes les déclinaisons (régulier, gras, italique...)

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 causer des problèmes sur votre site, cela se produit principalement lorsque vous groupez certains fichiers qui contiennent des erreurs de syntaxe ou des noms de variables ou de classes similaires. C'est pourquoi avec l'option « exclusion de minification de fichiers », vous pourrez exclure des fichiers du processus de minification et de regroupement, allez à WP Speed of Light > Accélération > Regroupement & Minification, vous pourrez voir l'option 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 être en mesure de lister les scripts chargés sur votre site web, WP Speed of Light doit analyser votre dossier pour les lister. Ils sont généralement tous contenus dans votre dossier /wp-content qui regroupe tous vos plugins et thèmes. 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, Police) devrait être affichée ci-dessous. Si vous avez identifié un fichier qui cause des problèmes lors de l'activation du regroupement et de la minification de fichiers, vous pouvez l'exclure d'ici en utilisant un simple commutateur ON/OFF.

Cela vous aidera à exclure les fichiers et, de cette façon, à résoudre facilement tout problème pouvant exister lors de la minification des ressources… Le processus de regroupement et de minification nécessite encore un certain travail, notamment en matière de tests, mais cela en vaut vraiment la peine, et vous pourrez toujours tester son fonctionnement en exécutant le test de vitesse directement à partir de WP Speed of Light.
 
Allez-y et essayez WP Speed of Light : https://www.joomunited.com/wordpress-products/wp-speed-of-light