Comment résoudre les problèmes CSS inutilisés

10

J'exécute quelques speedtests sur un blog et je reçois toujours des plaintes concernant les CSS inutilisés. Mais ce n'est pas du CSS que je n'utilise jamais, il n'est tout simplement pas utilisé sur cette page particulière.

Maintenant, je travaille de manière structurée, mais il doit encore y avoir du CSS dans le fichier qui ne sera pas utilisé, car vous en avez besoin sur une autre page.

Je ne pense pas que l'utilisation de différents fichiers CSS sur différentes pages soit la voie à suivre, je pense que vous êtes beaucoup mieux en créant simplement un gros fichier qui peut être mis en cache.

Maintenant, existe-t-il une manière élégante de gérer cela, ou est-ce que vous vous en tenez à cela?

css optimization Saif Bechan
la source

Réponses:

7

Votre affirmation selon laquelle vous êtes mieux avec un fichier CSS plus gros est correcte. Il ne sera probablement que de quelques Ko lorsqu'il est compressé, et devrait être mis en cache, donc pas une énorme surcharge. Il y a cependant quelques points à vérifier.

Si du CSS n'est utilisé que sur une seule page, il peut être préférable dans ce cas de mettre le CSS sur la page, dans certaines balises de style. (Remarque: cela peut rendre les choses difficiles à maintenir, surtout lorsque vous décidez ultérieurement d'utiliser un style similaire ailleurs.)

Si vous prenez vos pages les plus populaires (par exemple, les pages qui représentent 50% + de vos pages vues) et constatez que seule une très petite quantité de votre CSS est utilisée sur ces pages, il peut être plus rapide pour les utilisateurs de la diviser en deux fichiers CSS. Désormais, les nouveaux utilisateurs visitant vos pages les plus populaires ont beaucoup moins à télécharger. Sur d'autres pages, il y a une demande HTTP supplémentaire, mais ce n'est pas énorme.

Assurez-vous que votre CSS est bien optimisé. Évitez les sélecteurs descendants lorsque cela est possible. Si le côté droit d'un sélecteur est trop générique, cela peut ralentir le temps de rendu. Par exemple, ce .class div {}serait un peu lent car le navigateur doit vérifier chaque <div>élément de la page, puis rechercher l'arborescence DOM tout en haut pour trouver (ou non) un élément avec la classe.

Chèvre mécontente
la source
2
Pour optimiser, je suggère d'utiliser quelque chose comme csslint.net
Toby
5

Je pense que c'est une lacune de l'outil speedtest que vous utilisez, qu'il ne regarde pas l'ensemble du site et ne voit pas du tout quel CSS n'est jamais utilisé. Si vous pouvez trouver un outil qui fonctionne, faites-le nous savoir!

Je pense qu'il vaut mieux créer un seul gros fichier qui peut être mis en cache.

Oui, cela a du sens, à moins qu'il y ait un ensemble de pages qui nécessitent un peu de CSS supplémentaire, auquel cas vous pouvez l'inclure sur celles-ci.

paulmorriss
la source
L'outil que j'utilise est gtmetrix.com . Il s'agit d'un test en ligne qui fait à la fois Yslow et Page Speed. Je ne sais pas s'ils testent le site complet. Yslow ne se plaint pas des CSS inutilisés, c'est Page Speed ​​qui s'en plaint. Il se plaint que H3 ne soit pas utilisé par exemple, je ne l'utilise pas en première page, mais je le fais dans d'autres pages. + Une autre chose est la section pour l'impression dans mon CSS, qui n'est utilisée nulle part sur le site Web normal, avez-vous des recommandations à ce sujet.
Saif Bechan
Le CSS pour l'impression peut être utilisé par n'importe quelle page, vous en avez donc besoin au cas où.
paulmorriss
@SaifBechan si vous avez les styles d'impression dans un CSS séparé, vous pouvez cibler l'intégralité du fichier sur media="print"- certains navigateurs n'émettront pas la demande jusqu'à ce que vous tentiez réellement d'imprimer / prévisualiser la page.
Zhaph - Ben Duguid
1

Il existe un petit plug-in Firefox pratique appelé Dust-Me Selectors , qui vérifie votre CSS et signale toutes les règles inutilisées. Cependant, cela ne fonctionne pas avec la dernière version de Firefox (v8.0), ce qui est un peu dommage.

PS: Si j'étais vous, je prendrais CSS Lint avec une pincée de sel - il y a une école de pensée qui dit que ses «recommandations» sont pédantes, et simplement exagérées. (Pour plus de détails, voir l'article convaincant de Matt Wilcox, « CSS Lint is nocif » ). Au mieux, ce n'est pas du tout officiel… et, avouons-le, avons-nous vraiment besoin d'un autre outil / pseudo-standard pour satisfaire?

Jordan Clark
la source
+1 Merci, je vais examiner cela. J'ai également vérifié CSS Lint, et ce que vous dites pourrait être vrai. Beaucoup de recommandations sont exagérées.
Saif Bechan
1

La façon la plus optimisée et évolutive que j'imagine de gérer cela consiste à:

  1. Création d' un fichier CSS principal pour tout ce qui concerne la "portée globale" (comme la conception du site, les classes globales, les bibliothèques, les plugins, etc ...).

  2. Création d'un système impliquant un dossier contenant un fichier CSS unique par pages (uniquement si nécessaire). Ces fichiers peuvent avoir le même nom de fichier que la page à laquelle ils sont liés afin que vous puissiez exécuter un script côté serveur sur chaque page qui recherche un fichier CSS dans ce dossier et l'ajouter à la page s'il y en a un.

  3. Peut-être, en créant différents fichiers CSS pour des choses spécifiques au navigateur que vous ne chargez que lorsque le visiteur a le navigateur correspondant.

En faisant cela, vous vous retrouverez avec un moyen solide et optimisé de séparer votre CSS. Oui, il y aura toujours des règles inutilisées dans le fichier principal, mais elles seront là où elles sont censées être d'un point de vue logique.

Gardez également à l'esprit que ces 3 "couches" de fichiers CSS seront mises en cache comme le serait un seul fichier CSS.

WiMantis
la source