TechBlogSD - Tout pour le développement WordPress et WEB
Instructions WEB et WordPress, actualités, revues de thèmes et plugins

Comment supprimer les CSS et JavaScript inutilisés dans WordPress ?

397

Les thèmes légers comme Astra, GeneratePress et Genesis chargent très moins de CSS et de scripts sur le site. Cela permet de supprimer les erreurs CSS et JavaScript inutilisées dans l’outil Google PageSpeed ​​Insights et de faire monter en flèche le score de vitesse. Cependant, 99% des thèmes WordPress commerciaux combinent plusieurs fonctionnalités et chargent des scripts lourds et des CSS. Que vous utilisiez un thème léger ou lourd, vous avez toujours besoin de nombreuses fonctionnalités via le plugin. En combinant le thème et les plugins, le score de vitesse global aura un impact sur chaque fichier source du site. Dans cet article, nous expliquerons comment supprimer les CSS et JavaScript inutilisés dans WordPress pour améliorer le score de Google PageSpeed ​​Insights.

Connexe : Lisez plus de 400 tutoriels WordPress gratuits.

Qu’est-ce que CSS et JavaScript non utilisés ?

Expliquons cela avec un exemple simple. Contact Form 7 est l’un des plugins populaires pour ajouter des formulaires de contact dans les sites WordPress. Généralement, vous avez besoin d’un formulaire de contact dans la page "Contact" et peut-être sur quelques autres pages. Vous n’utiliserez pas de formulaire de contact sur chaque article de blog. Cependant, le plugin Contact Form 7 chargera CSS et JavaScript sur chaque page et article de blog de votre site. C’est un gros problème lorsque vous avez 1000 articles de blog et que tous chargent le script de formulaire de contact / CSS sans aucun besoin.Ces CSS et scripts inutiles sont appelés CSS inutilisés et script inutilisé.

Un autre bon exemple est une boutique WooCommerce. Vous n’avez besoin des styles et des scripts WooCommerce que sur des pages telles que les produits, les archives de produits, le panier, le paiement et la boutique. Cependant, le plugin n’a aucune option pour empêcher le chargement de fichiers sur des articles ou des pages de blog.

Pourquoi est-ce un problème ?

Malheureusement, presque tous les plugins chargeront des ressources sur toutes les pages de votre site. Cela aura un impact considérable sur la vitesse de chargement des pages et réduira le score de vitesse dans des outils tels que Google PageSpeed ​​Insights. Vous verrez les erreurs comme ci-dessous comme des opportunités, lors du test de l’URL de la page dans PageSpeed ​​Insights.

Comment supprimer les CSS et JavaScript inutilisés dans WordPress ?

Erreur PageSpeed ​​pour CSS et JS inutilisés

Bien que l’outil indique que cela n’affectera pas directement le score de performance, cela a un impact énorme sur le temps de chargement. À ce stade, un score de 30% correspond au temps de blocage et le fait d’avoir des ressources CSS / JS et de blocage de rendu inutilisées fera baisser le score vers le bas. De plus, certaines sociétés d’hébergement factureront en fonction de l’utilisation de la bande passante. Le chargement de fichiers CSS/script inutiles sur votre site augmentera l’utilisation de la bande passante de plusieurs fois. Par conséquent, il est nécessaire d’identifier les CSS et JavaScript inutilisés et de les supprimer du chargement sur toutes les pages.

Comment identifier les CSS et JavaScript inutilisés ?

Vous devez comprendre ce qui provoque le chargement des ressources inutilisées sur vos pages. Comme expliqué ci-dessus, vous n’avez pas besoin de charger le formulaire de contact, la boutique en ligne ou les plugins d’examen sur toutes les pages. Cependant, toute la tâche est plus compliquée que vous ne le pensez.

  • Tout d’abord, purgez la mise en cache et désactivez le plug-in de mise en cache sur votre site. Accédez maintenant à l’outil Google PageSpeed ​​Insights et vérifiez le score de vitesse.
  • Cliquez sur les messages « Supprimer le JavaScript inutilisé » et « Supprimer le CSS inutilisé » pour les développer. Google vous montrera la liste des ressources avec la taille du transfert et les économies potentielles.

Comment supprimer les CSS et JavaScript inutilisés dans WordPress ?

Afficher les ressources inutilisées dans PageSpeed

  • Code externe – Comme vous pouvez le voir dans la capture d’écran ci-dessus, "pagad2.googlesyndication.com" provient de Google AdSense. Vous ne pouvez pas supprimer les CSS et JavaScript inutilisés chargés à partir de sites Web tiers. Ces scripts sont chargés sur votre site avec des plugins de publicité, d’analyse, d’intégration de vidéos YouTube ou de partage social. Vous devez donc comprendre que ces ressources externes auront un impact sur la vitesse de la page et que vous n’avez aucun contrôle dessus, à moins que vous ne décidiez de les supprimer. consultez l’article sur AdSense Vs Page Speed pour comprendre que les publicités tueront la vitesse de votre page.
  • Fichiers de plugin et de thème – nous expliquerons comment les supprimer dans la section suivante.
  • CSS et scripts en ligne – L’outil Google PageSpeed ​​Insights ne les affiche généralement pas. Vous devez les identifier manuellement et les supprimer de votre site. Si un plugin insère du CSS/script en ligne, désactivez les fichiers du plugin ou évitez d’ajouter du code en ligne personnalisé. N’oubliez pas qu’il y a un gros problème avec les thèmes lourds qui utilisent style.css avec des milliers de lignes. Vous devez supprimer manuellement le code à l’intérieur du fichier style.css pour réduire la taille.

En résumé, il est facile de supprimer les CSS et JavaScript inutilisés s’ils sont chargés en tant que fichiers séparés. Le chargement d’un énorme fichier style.css ou CSS en ligne ne peut pas être supprimé à moins que vous ne les révisiez manuellement et que vous supprimiez les codes inutilisés. Alternativement, vous devrez peut-être trouver un thème ou un plugin léger pour vous débarrasser du problème. Une fois que vous avez trouvé la cause de l’erreur, vous pouvez réactiver le plug-in de mise en cache sur votre site.

Comment supprimer les CSS et JavaScript inutilisés ?

Il existe deux façons de supprimer les fichiers CSS et JS inutilisés lorsque la page se charge sur le navigateur. La première option consiste à utiliser des plugins premium comme WP Rocket et la deuxième option est d’utiliser un plugin gratuit. Nous expliquerons les deux méthodes en détail, afin que vous puissiez vérifier et choisir la plus simple pour vous.

Supprimer les CSS inutilisés avec WP Rocket

WP Rocket est le plugin de mise en cache le plus populaire pour WordPress qui offre une interface utilisateur super simple. Afin d’améliorer le temps de chargement de la page, vous devez acheter le plugin et le mettre à jour vers la dernière version (au-dessus de 3.9).

  • Allez dans le menu "Paramètres> WP Rocket" dans votre panneau d’administration WordPress.
  • Cliquez sur l’onglet " Optimisation des fichiers " et faites défiler jusqu’en bas de la section " Fichiers CSS ".
  • Activez l’option « CSS inutilisé (bêta) » et confirmez l’option « Activer la suppression des CSS inutilisés » dans le message d’avertissement.

Comment supprimer les CSS et JavaScript inutilisés dans WordPress ?

Supprimer les CSS inutilisés dans WP Rocket

  • Le plugin commencera à traiter le CSS de votre site, ce qui peut prendre plusieurs minutes.

Comment supprimer les CSS et JavaScript inutilisés dans WordPress ?

Supprimer le CSS inutilisé est terminé

  • Après avoir terminé, vous verrez un message de réussite « Supprimer le CSS non utilisé est terminé ! »
  • Vous pouvez également activer l’option « Optimiser la livraison CSS » pour générer des CSS critiques afin d’éviter les problèmes de blocage du rendu CSS.
  • Cliquez sur le bouton "Enregistrer les modifications" en bas de la page pour régénérer les fichiers mis en cache.

Supprimer le JavaScript inutilisé avec WP Rocket

Contrairement à CSS, la suppression de JS n’est pas possible avec le plugin WP Rocket. Cependant, vous pouvez activer les options « Charger JavaScript différé » et « Retarder l’exécution JavaScript » dans la section « Optimisation des fichiers > Fichiers JavaScript ». Cela retardera à la fois les codes internes et externes et éliminera les problèmes de blocage de rendu JavaScript.

Comment supprimer les CSS et JavaScript inutilisés dans WordPress ?

Retarder l’exécution de JavaScript

Assurez-vous de tester que votre site fonctionne correctement après avoir activé ces options.

Utilisation du plugin Asset CleanUp pour supprimer les CSS et JavaScript inutilisés

Lorsque vous avez chargé de nombreux fichiers de plugins et de thèmes, suivez les instructions ci-dessous pour les supprimer sur les pages où vous n’en avez pas besoin.

  • Connectez-vous à votre tableau de bord d’administration WordPress et accédez à la section « Plugins > Ajouter un nouveau ».
  • Tapez « nettoyage d’actifs » dans la zone de recherche et localisez le plug-in « Nettoyage d’actifs : Booster de vitesse de page ».

Comment supprimer les CSS et JavaScript inutilisés dans WordPress ?

Installer et activer le plugin

  • Cliquez sur le bouton "Installer maintenant" puis activez le plugin.
  • Après avoir activé le plugin, nous vous recommandons de lire la documentation affichée. Ceci est nécessaire pour utiliser correctement le plugin.

Comment supprimer les CSS et JavaScript inutilisés dans WordPress ?

Lire les guides de démarrage

Paramètres du plugin

Le plugin possède de nombreux paramètres que nous n’expliquerons pas cet article. Si vous utilisez un plugin de mise en cache comme WP Rocket sur votre site, assurez-vous de ne pas utiliser d’autres fonctions que la désactivation des scripts et CSS inutilisés. Allez dans le menu "Asset CleanUp> Paramètres" puis dans l’onglet "Préférences d’utilisation du plug-in". Ici, vous pouvez décider de la manière dont vous souhaitez afficher et désactiver les CSS / scripts inutilisés sur vos pages.

  • Gérer dans le tableau de bord – activez cette option. Cela vous aidera à analyser la page de l’éditeur de publication dans le tableau de bord de l’administrateur.

Comment supprimer les CSS et JavaScript inutilisés dans WordPress ?

Activer Gérer dans le tableau de bord

  • Gérer dans le front-end – si vous souhaitez analyser la page à partir du navigateur frontal, activez cette option. Sinon, vous pouvez le désactiver. N’oubliez pas que l’analyse frontale ne peut être effectuée que par l’utilisateur administrateur connecté. Les utilisateurs visitant votre site ne seront pas impactés lors de votre vérification.

Comment supprimer les CSS et JavaScript inutilisés dans WordPress ?

Activer ou désactiver la gestion dans le frontend

  • Disposition de la liste des actifs – cliquez sur le menu déroulant et sélectionnez "Tous les styles et scripts > Regroupés par emplacement (thèmes, plugins, noyau et externe). Cela vous aidera à afficher les fichiers de ressources regroupés dans différentes catégories.

Comment supprimer les CSS et JavaScript inutilisés dans WordPress ?

Définir la disposition de la vue

  • Masquer le fichier de base WordPress de la liste des actifs ? – activez cette option pour ne pas vous tromper avec les fichiers WordPress de base.

Maintenant, allez dans l’onglet "Mode de test" et activez l’option "Activer le mode de test". Cela vous aidera à vérifier que le site est en panne après avoir désactivé les scripts et CSS avant de le rendre public.

Comment supprimer les CSS et JavaScript inutilisés dans WordPress ?

Activer le mode test

Cliquez sur « Mettre à jour tous les paramètres » en bas pour appliquer vos modifications.

Supprimer les CSS et JavaScript inutilisés

Selon les paramètres, vous pouvez analyser la page depuis l’éditeur ou depuis le front-end.

  • Désactivation des scripts et CSS de l’éditeur – Modifiez l’un des messages existants pour accéder à l’ éditeur de messages. Faites défiler vers le bas pour afficher les méta-boîtes du plugin Asset CleanUp. Affichez tous les CSS et les scripts chargés sur cette page et désactivez les ressources dont vous n’avez pas besoin.
  • Désactivation des scripts et CSS à partir du frontend – Si vous avez activé l’option "Gérer dans le front-end", ouvrez l’un de vos messages sur le front-end du navigateur. N’oubliez pas que vous devez être connecté à votre panneau d’administration WordPress dans un autre onglet du navigateur. Au bas de la page, vous verrez des méta-boîtes similaires désactiver les ressources chargées sur la page.

Dans les deux cas, vous verrez tous les fichiers CSS et JavaScript chargés sur la page regroupés selon vos paramètres.

Comment supprimer les CSS et JavaScript inutilisés dans WordPress ?

Afficher les ressources chargées dans le groupe

Développez chaque groupe et affichez les détails des fichiers chargés par vos plugins et thèmes. Pour chaque fichier CSS et JS, vous disposez de plusieurs options, comme indiqué dans l’image ci-dessous.

Comment supprimer les CSS et JavaScript inutilisés dans WordPress ?

Désactiver ou activer CSS et JS

  • Déchargez la ressource sur la page.
  • Désactiver le fichier à l’échelle du site
  • Désactiver sur tous les messages (il continuera à se charger sur les pages et les types de messages personnalisés ).
  • Peu d’autres options comme l’utilisation de RegEx ne sont disponibles que dans la version pro du plugin.

Après avoir désactivé les fichiers, mettez à jour votre publication pour que les modifications soient effectives sur le site.

Affichage des fichiers désactivés et suppression du mode test

  • Accédez à la section « Nettoyage d’actifs > Modifications en bloc ».
  • Accédez à l’onglet «Publications, pages et types de publication personnalisés» et sélectionnez «publier» dans la liste déroulante.
  • Ici, vous pouvez voir tous les fichiers désactivés sur votre site.
  • Cochez la case « Supprimer la règle en bloc » et cliquez sur le bouton « Appliquer les modifications » en bas pour réactiver le chargement du fichier.
  • Alternativement, vous pouvez éditer n’importe quel article dans l’éditeur de publication et modifier le comportement de chargement des fichiers.

Comment supprimer les CSS et JavaScript inutilisés dans WordPress ?

Afficher et supprimer des fichiers en vrac

Vérifiez votre site et si tout va bien, retournez à la page des paramètres et désactivez l’option "Mode test". Cela rendra les changements en direct pour tous les utilisateurs visitant votre site Web. De même, vous pouvez désactiver les fichiers CSS et JS sur les types de publication, les pages et les pages de produits personnalisés en les modifiant. Vérifiez vos pages avec l’outil Google PageSpeed ​​Insights pour voir si les erreurs sont supprimées.

Derniers mots

Nous espérons que cet article sera utile pour supprimer les fichiers CSS et JavaScript inutilisés de votre site et améliorer le score Google PageSpeed. Nous vous recommandons d’utiliser WP Rocket car il est facile de supprimer le CSS et de retarder le JS externe en quelques clics. Si vous utilisez le plugin gratuit Asset Cleanup, il vous aidera uniquement à désactiver le chargement des fichiers CSS et JS à partir des plugins et des thèmes. Vous devez éviter d’utiliser des codes tiers et supprimer manuellement les codes inutiles dans le fichier principal style.css. Lorsque vous modifiez manuellement des fichiers, assurez-vous d’utiliser le thème enfant pour mettre à jour la feuille de style afin que vous ne perdiez pas les modifications lors de la mise à jour du thème.

Source d’enregistrement: www.webnots.com
Leave A Reply

Ce site utilise des cookies pour améliorer votre expérience. Nous supposerons que cela vous convient, mais vous pouvez vous désinscrire si vous le souhaitez. J'accepte Plus de détails