La bonne façon de supprimer les CSS inutilisés dans WordPress

Avoir beaucoup de code inutilisé peut considérablement ralentir votre site Web. Et l'un des suspects habituels de WordPress est le code CSS inutile. Heureusement, il existe plusieurs façons d'éviter les mauvaises performances de votre site Web et d'arrêter de gâcher l'expérience utilisateur. Bien qu'une façon de le faire soit une méthode manuelle, cela nécessite une expérience de développement significative. Une autre option, plus conviviale pour les débutants, consiste à se concentrer sur les outils existants et à supprimer les CSS inutilisés dans WordPress, ajoutés par des thèmes et des plugins, en quelques clics seulement.

Comment supprimer avec succès les CSS inutilisés dans WordPress

Comme vous le savez probablement, WordPress utilise de nombreux plugins, thèmes et autres bibliothèques tierces. Ils apportent tous de nombreuses fonctionnalités pour améliorer les fonctionnalités de votre site Web. Mais, plus souvent qu'autrement, la majorité est livrée avec de nombreuses fonctions que vous n'utilisez pas réellement. Néanmoins, si vous n'utilisez pas spécifiquement les professionnels de WordPress pour maintenir et optimiser votre site Web, il chargera tout pour chaque visiteur. Cela entraîne le transfert de grandes quantités de CSS inutilisées et ralentit le site Web lui-même. Par conséquent, de mauvaises performances réduiront le trafic de votre site Web et réduiront votre classement dans les recherches.

Dans de nombreux cas, supprimer 100 % du code inutilisé est assez difficile, voire impossible. Mais même la suppression de la moindre quantité ou d'un script conflictuel améliorera les performances de votre site Web. Outre une "minimisation" typique du code, il existe plusieurs façons de réduire l'impact du code CSS inutilisé sans casser votre site Web.

Pourquoi le CSS inutilisé est-il même là ?

Parce que CSS est responsable du style de l'apparence de votre site Web WordPress, chaque thème que vous pouvez trouver l'inclut. Et non seulement les thèmes, mais de nombreux plugins ont leurs propres options de style et de personnalisation. Sans parler de toutes sortes de créateurs de sites Web, de bibliothèques et même d'éléments individuels, où vous n'en utilisez qu'une petite partie. En général, quelques plugins n'affecteront pas vraiment le site Web. Mais, si vous en avez beaucoup, l'effet cumulatif peut vraiment ralentir votre site Web.

Outils pour supprimer les CSS inutilisés

Bien qu'il existe de nombreux outils qui peuvent vous aider à supprimer les CSS inutilisés, la majorité ne s'applique pas à toutes les situations. Bien sûr, pour les sites Web statiques, la plupart d'entre eux seront très utiles. Cependant, les sites Web dynamiques chargent et stylisent souvent les éléments en injectant des classes CSS avec JavaScript. Et c'est la partie la plus difficile car il est difficile de détecter ces classes. Par exemple, les sites Web de commerce électronique qui stylisent dynamiquement les pages de produits et de paniers.

Pensez-y pendant le développement

Une solution pour se débarrasser dès le départ des CSS inutilisés est d'y penser lors du développement du site web. Vous pouvez essentiellement diviser votre code CSS en différents fichiers, chacun servant un objectif spécifique. Cependant, la plupart des gens préfèrent utiliser des thèmes WordPress pour éviter de créer un site Web à partir de zéro. Et c'est là que vous devez soit être très habile, soit trouver des experts WordPress pour le faire pour vous.

Utilisation de la solution en ligne UnusedCSS

Une autre façon consiste à utiliser des solutions premium comme UnusedCSS pour trouver et nettoyer facilement vos problèmes CSS. L'avantage de cet outil est qu'il est capable de scanner vos fichiers JavaScript et de rechercher des injections. Certaines de ses caractéristiques les plus remarquables sont :

• Recherche automatique des règles CSS inutilisées
• Vous fournir un CSS propre pour le téléchargement
• Explorer les règles de conception réactive et de requêtes multimédias
• Vérification du site Web pour les changements
• Aperçu des modifications
• et plus

PurgeCSS pour supprimer le CSS supplémentaire

C'est un autre outil très utile pendant le développement. Ceux qui travaillent avec Bootstrap, Foundation et des frameworks CSS similaires le trouvent très utile. Étant donné que vous n'utilisez probablement qu'une fraction des règles CSS, cet outil peut vous aider à filtrer tous les styles inutilisés. Fondamentalement, c'est un excellent moyen de réduire considérablement la taille de votre fichier CSS.

Plug-in d'optimisation automatique

Le prochain en ligne est le plugin WordPress très populaire. Avec lui, vous pouvez facilement réduire, combiner et mettre en cache les styles. Il injecte les règles nécessaires dans l'en-tête de la page, le CSS critique en ligne, minimise le HTML et déplace les scripts vers le pied de page. Essentiellement, il peut être utilisé pour implémenter le "lazy-load" pour les images, optimiser les polices et le JavaScript asynchrone non combiné. Chaque site Web peut bénéficier de ce plugin étendu.

Fusée WP

L'une des options les plus conviviales pour les débutants que vous puissiez trouver. WP Rocked propose des solutions efficaces pour votre page et l'optimisation de la vitesse. Non seulement cela vous donnera des résultats satisfaisants sur les tests de vitesse, mais cela améliorera visiblement l'expérience utilisateur pour les visiteurs. Lorsque vous souhaitez supprimer le CSS inutilisé, activez-le simplement, activez l'option « Optimisation des fichiers » et passez à l'option « Optimiser la livraison du CSS ». Il vous fournira un fichier CSS avec uniquement les règles CSS nécessaires, qui se chargeront avant les autres. De plus, WP Rocket videra automatiquement le cache et vous permettra de minifier et d'agréger les fichiers CSS.

Supprimer les CSS inutilisés avec Asset CleanUp

Vous pouvez utiliser Asset CleanUp pour décharger les fichiers inutilisés des thèmes et des plugins. Il vous permet d'effectuer cette tâche pour chaque page séparément. Bien que ce soit un peu complexe et fastidieux, c'est une méthode très efficace à utiliser. Tout comme certains autres plugins, il dispose de l'option "Mode test" pour éviter les effets indésirables sur votre site Web en direct. Cependant, Asset CleanUp peut également vous aider à supprimer les fichiers JavaScript inutilisés. Enfin, lorsque vous testez ce que vos visiteurs voient, vous pouvez simplement choisir de décharger tout ce qui n'est pas nécessaire.

Optimisez votre CSS avec Perfmatters

Le dernier, mais non le moindre, de cette liste est l'un des plugins de performance premium. Perfmatters vous aidera à supprimer à la fois le CSS et le JavaScript inutilisés. Après l'enregistrement, l'installation et l'activation, vous pourrez accéder à son gestionnaire de scripts. Ceci, entre autres options, peut vous aider à modifier facilement chacune de vos pages ou publications. Essentiellement, il vous fournit un menu de tableau de bord simple que vous pouvez utiliser pour supprimer tout CSS et JavaScript inutilisé sur des pages distinctes ou pour l'ensemble du site Web. Tout comme pour CSS, vous pouvez l'utiliser pour combiner ou réduire les fichiers JavaScript pour de meilleures performances.

Considérations supplémentaires pour améliorer la vitesse du site Web

Envisagez d'utiliser CDN pour fournir des fichiers CSS - afin de réduire considérablement la vitesse de chargement de votre CSS ou de tout autre fichier.

Minifiez et combinez régulièrement la plupart de vos fichiers CSS - pour supprimer les règles, classes et caractères supplémentaires inutiles de votre CSS dans WordPress. Cependant, on peut se demander si cela est utile pour tous les grands sites Web en raison de la complexité du code, de la taille de ces fichiers et de l'optimisation ultérieure supplémentaire.

Supprimer absolument toutes les portions de CSS inutilisées dans WordPress est presque impossible. Mais, vous pouvez utiliser les méthodes ci-dessus pour accélérer assez équitablement votre site Web. Cela dépendra du nombre de cas, mais si votre site Web WordPress contient vraiment beaucoup de code inutilisé, la différence sera assez notable. D'un autre côté, parfois même un petit changement peut tout signifier. Bien que l'objectif ne soit pas d'avoir le site Web le plus rapide au monde, de légers changements sont importants. Mais, d'autres efforts devraient être concentrés sur le contenu et l'utilité pour les utilisateurs, plutôt que de gagner des positions de vitesse maximale dans les tests des moteurs de recherche.