Comment regrouper et réduire les ressources dans WordPress
Avoir les meilleures performances possibles est le rêve de tous ceux qui gèrent un site Web, regroupent et réduisent les ressources sur WordPress est l'une des meilleures choses que nous pouvons faire pour cela, mais cela pourrait ê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 exécuter votre site wordpress car il dispose de nombreuses options pour accélérer le chargement de votre site avec un tableau de bord vraiment convivial et oui, l'une de ces options est de regrouper et de réduire les ressources. L'inclusion/exclusion de fichier unique du processus de groupe et de minification est une clé pour une optimisation personnalisée sans conflits.
Nous allons utiliser un exemple de site wordpress pour cet article de blog et nous allons apprendre à le faire pour que le processus de configuration soit plus simple.
Comment faire une minification WordPress JS et CSS
Apprenons à faire une minification wordpress js et CSS, 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 formatage, suppression du code inutilisé, utilisation de noms de variables et de fonctions plus courts, etc. ».
Maintenant, ce que nous allons faire est un test de vitesse sur notre page afin de voir les changements, pour cet exemple, nous utilisons un site avec woocommerce et certains produits, donc la première fois, il se chargera un peu lentement.
Oui, 2,79 secondes pour charger la page, pas mal mais ça pourrait être mieux, minifions juste le js et le CSS et voyons la différence, allez dans WP Speed of light > SpeedUp > Group & Minify , vous pourrez pour voir le menu avec toutes les options à minifier. La version gratuite du plug-in inclut l'option group and minify, mais l'exclusion visuelle des fichiers n'est disponible que dans la version PRO Addon.
Les options du module complémentaire PRO sont : 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), la police de groupe et les polices Google (les polices locales de groupe et les polices Google dans un seul fichier pour être servi plus rapidement) et l'exclusion de fichiers avancée.
Vous avez la possibilité de minifier, comme vous pouvez le voir, JS, CSS et aussi le HTML maintenant il suffit d'activer ces options, cliquez sur enregistrer et toutes vos ressources seront minifiées tout de suite, cela pourrait avoir des problèmes car il s'agit d'une configuration avancée mais tout peut être corrigé à l'exclusion de certains codes et fichiers (avec l'addon pro).
Maintenant, tout le travail de développeur qui pourrait prendre des heures se fait en quelques secondes.
Prochaine étape, WordPress optimise CSS et JS
Avec ce plugin, nous laisserons ce wordpress optimiser CSS et js simplement en activant les options de groupe sur le tableau de bord, allez dans WP Speed of Light > SpeedUp > Group & Minify , vous pourrez voir un tableau de bord avec les options de groupe CSS et js.
Ces options vous permettent de:
- Groupe JS: le regroupement de plusieurs fichiers Javascript dans un seul fichier réduira le nombre de demandes HTTP
- Group CSS: Le regroupement de plusieurs fichiers CSS dans un seul fichier minimisera le nombre de requêtes HTTP.
Demandes HTTP: ce sont des demandes qui sont faites au serveur chaque fois que nous sélectionnons quelque chose ou que nous allons sur une autre page du même site, donc si nous pouvons réduire ces demandes, le temps de chargement serait réduit.
Pour vérifier combien de fichiers, de scripts vous pouvez regrouper sur votre site web, il vous suffit d'ouvrir la console de votre navigateur (clic droit > Inspecter ou F12) et d'ouvrir le panneau réseau .
Vous pouvez alors 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 sur ces paramètres, activez simplement les options de groupe (Group CSS et Group 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
Quelle? Autre optimisation ? Oui! vous pourrez optimiser le poids de la police et ce sera aussi simple que d'activer l'option dans les paramètres, il vous suffit d'aller dans WP Speed of Light > SpeedUp > Grouper et réduire > Grouper les polices et option Google Fonts.
Les polices de groupe et l'option de polices Google vous permettront de les regrouper dans un seul fichier pour être servi plus rapidement, c'est assez pratique car la plupart des thèmes et mises en page WordPress sont livrés avec 2 ou polices par défaut avec toutes les déclinaisons (normal, gras, italique ...)
Activez simplement cette option, cliquez sur Enregistrer et toutes les polices seront regroupées.
Maintenant que nous avons activé toutes les options pour réduire et regrouper 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 fichier
La minification pourrait causer des problèmes dans votre site, cela se produit principalement lorsque vous regroupez certains fichiers qui contiennent une erreur de syntaxe ou une variable similaire, nom de classe. C'est pourquoi avec l'option « file minification exclusion », vous pourrez exclure des fichiers du processus de minification et de groupe, allez dans WP Speed of Light > SpeedUp > Group & Minify , vous pourrez voir l' option Advanced file exclusion
Pour utiliser l'exclusion de fichiers avancée, vous devrez d'abord exécuter une analyse, activez l'option et cliquez sur Exécuter l'analyse.
Pour pouvoir répertorier les scripts chargés sur votre site Web, WP Speed of Light doit analyser votre dossier pour les répertorier. Ils sont généralement tous contenus dans votre dossier /wp-content qui regroupe tous vos plugins et votre thème. Sélectionnez ce dossier (au moins) et cliquez sur "Scan Now"
Il exécutera 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) doit s'afficher ci-dessous. Si vous avez identifié un fichier qui cause des problèmes, lors de l'activation du groupe de fichiers et de la minification, vous pouvez l'exclure d'ici en utilisant un simple commutateur ON/OFF .
Cela vous aidera à exclure des fichiers et, de cette manière, à résoudre facilement tout problème pouvant survenir lors de la réduction des ressources… Les processus de groupement et de réduction nécessitent encore un peu de travail, en particulier lors des tests, mais cela en vaut vraiment la peine, et vous le ferez. soyez toujours en mesure de tester son fonctionnement en exécutant le test de vitesse directement depuis WP Speed of Light .
Allez-y et essayez WP Speed of Light : https://www.joomunited.com/wordpress-products/wp-speed-of-light
Lorsque vous vous abonnez au blog, nous vous envoyons un e-mail lorsqu'il y a de nouvelles mises à jour sur le site afin que vous ne les manquiez pas.
commentaires