La vitesse de votre WordPress peut être impactée de plusieurs manières, il existe de nombreux facteurs qui peuvent l’ affecter. Parmi ceux-là, on peut sans nul doute dire que plus votre site charge de scripts et de CSS, plus il mettra de temps à charger. CQFD ! Plus ces fichiers seront lourds et plus votre site chargera lentement. Maintenant, imaginez ce qui se passe lorsque vous installez des dizaines de thèmes et de plugins où chacun pousse ses propres scripts et styles.
Dans un monde parfait, tous les plugins et les thèmes seraient légers et codés correctement. Les fichiers se chargeraient uniquement s’ils étaient nécessaires, et il n’y aurait jamais de conflits entre thèmes et plugins. Ce n’est actuellement pas le cas :/ Même si vous n’êtes pas développeur, vous avez probablement déjà connu au moins une fois des erreurs JS et CSS sur votre WordPress.
Parfois, le simple fait de ne pas charger les scripts et styles inutiles, accélère efficacement votre site. Le problème pour un débutant sans expérience de codage est : comment trouver les fichiers à ne pas charger et surtout comment le faire ?
Avec WP Asset CleanUp, le problème ne se pose plus !
Scripts et CSS inutiles ?
Avant de vous présenter le plugin et ses possibilité en détails, revenons d’abord sur les scripts et fichiers CSS. A chaque fois que vous installez un plugin ou un thème, ce dernier arrive avec des fichiers de style et des scripts pour le faire fonctionner.
Prenons l’exemple d’un plugin tel que Social Warfare qui me permet de gérer les boutons de partage social. Ce dernier charge, à lui tout seul, sur chacune de mes pages les éléments suivants :
- /wp-content/plugins/social-warfare/css/style.css
- /wp-content/plugins/social-warfare/js/script.js
Soyons précis, ces fichiers sont absolument nécessaires pour son bon fonctionnement. Toutefois, je n’utilise les boutons de partage social que sur mes articles et jamais sur mes pages. J’ai bien réglé le plugin pour qu’il ne s’affiche que sur les articles et pourtant les fichiers CSS et Js étaient également chargés sur toutes mes pages !
Voici l’exemple type de fichiers que je souhaiterais décharger de mes pages ! 2 requêtes et du poids en moins, c’est toujours bon à prendre !
Autre exemple avec mon thème, ce dernier propose des Shortcodes et c’est bien pratique. Encore une fois je ne les utilise pas sur ma page d’accueil, pourquoi devrais-je charger ses fichiers CSS et Js qui vont impacter et dégrader la performance de ma home ?
Imaginez maintenant ce que doivent charger vos plugins et thèmes et demandez-vous si il est vraiment nécessaire que leurs CSS et Js soient chargés partout, sur tous vos contenus ?
WP Asset CleanUp
WP Asset CleanUp scanne votre page et détecte tous les fichiers qui y sont chargés. Tout ce que vous avez à faire lors de la modification d’une page ou d’un article est de sélectionner ceux que vous ne souhaitez PAS charger.
Les avantages à décharger Scripts et CSS inutiles :
- Obtenir un nombre minimum de requêtes HTTP
- Réduire le code HTML de la page
- Rendre le code source plus facile à analyser
- Supprimer les conflits entre les plugins et thèmes
- Obtenir un meilleur score sur les différents tests de vitesse en ligne
- Mieux se classer sur Google grâce à un site plus rapide
- Limiter l’écriture des logs sur le serveur
Rien que sur la page d’accueil de WPFormation, j’ai pu décharger pas moins de 5 scripts Js et 3 styles CSS. Ce qui donne actuellement 41 requêtes au lieu de 49 et un poids de 644 kB au lieu de 698 kB, soit un gain de 44 kB en quelques clics et une augmentation des performances du site.
J’ai également mis en place des règles globales sur toutes mes pages, comme par exemple de ne pas charger à chaque fois les CSS et Js du plugin de commentaires Mention comment’s Authors et bien d’autres…
Utilisez WP Asset CleanUp en Front ou en Back
Même sans vérifier les paramètres du plugin, vous pouvez déjà commencer à travailler sur l’optimisation de votre site à partir du backend. Pour voir tous les scripts et les styles qui se chargent chaque fois que vous ouvrez un article ou une page (page d’accueil incluse) sur votre site, il vous suffit d’éditer et de scroller tout en bas pour voir le cartouche de WP Asset CleanUp.
Si vous avez beaucoup de plugins, vous risquez d’être très surpris du nombre de fichiers présents ^^
Le réglage ci-dessous vous permet d’afficher directement en front, lorsque vous êtes connecté, les scripts et styles qui se chargent sur chaque page ou chaque article de votre WordPress.
Commencez le déchargement
Maintenant que vous avez parcouru les paramètres, il est temps de supprimer les fichiers inutiles. Le plugin indique avec une icône d’exclamation les fichiers de base de WordPress.
Dans la plupart des cas, il n’est pas utile de décharger ces fichiers, il est plus simple et moins dangereux de les ignorer et d’éviter ainsi les erreurs. Avant de décharger l’un des fichiers de base, assurez-vous de vraiment savoir ce que vous faites.
Pour décharger un fichier, il suffit de cocher la case à cocher globale (tout à gauche) et/ou d’ajouter des exceptions (cases à cocher internes).
Chaque fichier trouvé par WP Asset CleanUp aura son lien source, sa version (si disponible) et WP Asset vous montrera également le fichier dont il dépend. Pour chacun de ces fichiers, vous serez en mesure de :
- décharger partout,
- décharger sur toutes les pages de ce type de post particulier,
- charger uniquement sur cette page.
Vous l’aurez compris, je peux, par exemple, désactiver certains CSS et Js sur toutes les pages et toutefois y ajouter une exception pour une ou plusieurs pages. Bref, c’est à la carte et c’est rudement bien ;)
Les règles globales pour gagner du temps
Si vous décidez de garder et d’utiliser WP Asset CleanUp, il est important de savoir que vous n’aurez pas à (re)chercher les règles globales que vous avez déjà créé. En effet, au bout de quelque temps il est difficile de se rappeler de toutes les règles en place. Au lieu de cela, il vous suffit de vous rendre dans WP Asset CleanUp >> Global Rules où vous trouverez toutes les règles globales précédemment créées. Ainsi, si vous avez besoin de charger/décharger un script ou un style en particulier, vous ne serez pas obligé de chercher à travers chacun de vos articles ou pages.
Gérer les scripts et les styles de la page d’accueil
Clairement c’est la partie qui m’a le plus intéressé, pouvoir choisir ce qui se charge ou pas sur ma home. Toujours dans le menu WP Asset CleanUp >> Home Page, vous trouverez des liens direct et vous serez en mesure de charger ou décharger des scripts et des styles comme vous l’avez fait pour vos articles et pour vos pages.
Conclusion
Au final, nous sommes toujours à la recherche de moyens pour optimiser les performances de nos sites WordPress. Si nous connaissions déjà les plugins de cache et l’optimisation des images, le fait de pouvoir décharger simplement, au cas-par-cas ou de manière globale, certains fichiers est un vrai plus pour les performances.
Le plugin est intuitif, performant et il est gratuit ! Attention toutefois, vous devez l’utiliser avec précaution. Avant de décharger scripts et styles, assurez-vous de savoir pourquoi vous le faites et de posséder une sauvegarde en bonne et due forme.
J’ai particulièrement apprécié ce plugin et il est en place sur WPFormation depuis cet article. J’ai déchargé certains CSS et Js sur les pages majeures de mon site et mis en place certaines règles globales pour les articles en quelques minutes seulement, le gain en performance est là !
Vous connaissiez ce plugin ? Vous avez une alternative ?
Dites-nous le en commentaire !
J’utilise Gonzales sur mon site à cet effet mais il est payant, c’est bien d’avoir des alternatives gratuites.
Ca booste, en effet !
Bonjour,
Moi ça marche bien concernant les .JS
Sinon pour le CSS, ca fait beuger tout le site et j’ai le mêmeproblème avec WP-ROCKET concernant l’optimisation des CSS et JS.
J’ai aussi un autre problème quand je met en cache pour les mobiles ben à partir de l’application facebook impossible d’accéder au site sa plante..
Merci
Merci pour le tuto, je viens de tester sur une page mais semble avoir aucun changement, pingdom me dis exactement la même chose avant et après le déchargement !
Peux être que j’utilise mal le plugin de déchargement …
Pour décharger un fichier sur une page spécifique, il suffit de cocher la case à cocher globale (tout à gauche) , c’est bien ça ? Car j’ai coché beaucoup de css et js et il y a aucun effet (J’ai pas ajouté d’exception)
Pour ma part j’utilise Plugin Organizer, avec une approche quelque peu différente vu qu’il permet de ne pas charger une extension en fonction du post (il y a les réglages globaux, par type – page, article… – et les réglage personnalisés pour un post en particulier). Le gain est intéressant, avec une réduction des requêtes (50%) du poids de la page (~40%) et du temps de chargement, au final (> 50%).
Un peu chiant à mettre en place sur un site existant si on veut vraiment optimiser le réglage. En revanche, le fait qu’on puisse gérer le chargement ou non de tel JS ou CSS à chaque POST ou PAGE, c’est vraiment excellent. Quand je vois contact form 7 que j’utilise que sur une seule page, auquel j’ai rajouté quelques modules mais qui charge JS et CSS sur toutes les pages du site… Maintenant il charge ses fichiers uniquement sur la page où il y a le formulaire.
Merci pour de m’avoir fait découvrir ce plugin, belle découverte !!
La question à 100 bitcoins: comment cibler le bon Js quand on en a 40 ?
Un m’enerve particulièrement mais je ne sais pas lequel.