La minimisation de la taille de fichier de la feuille de style CSS a été considérée par beaucoup comme un bon moyen d'augmenter la vitesse de chargement de votre site. En effet, en réduisant le fichier CSS de plusieurs kilooctets, le serveur prendra moins de temps à charger et se traduira par une page Web plus rapide.
Dans l'éventualité où vos articles atteignent la page d'accueil de Digg, cela pourrait aussi être l'un des rares facteurs décisifs (il y en a beaucoup d'autres), que votre serveur tombe en panne ou non.
Certaines des méthodes les plus courantes utilisées pour minimiser / optimiser une feuille de style CSS impliquent l'élimination des sélecteurs inutilisés, des espaces non désirés, des tabulations, des commentaires et la modification de la déclaration longue en notation abrégée.
Je sais que certains d'entre vous ne maîtrisent pas suffisamment la technologie pour éditer votre propre code CSS. Je vais donc vous fournir quelques outils utiles que vous pourrez utiliser pour optimiser votre code CSS, même si vous n'avez aucune connaissance de ce code. Codage CSS.
Vérifiez votre code CSS
W3C CSS Validator
Le validateur CSS du W3C est un outil que vous pouvez utiliser pour valider votre CSS. Vous pouvez soit télécharger le validateur Java sur votre ordinateur et l'utiliser hors ligne, soit utiliser le formulaire en ligne pour vérifier votre code CSS.
Module de validation CSS Firefox Add-On
Pour faciliter la validation de votre code CSS, il y a cette extension Firefox - CSS Validator - que vous pouvez installer sur votre navigateur. Une fois installé, vous pouvez facilement et rapidement vérifier votre code avec un clic droit de la souris.
CSSCheck
Même si votre code CSS est validé, cela ne signifie pas qu'il ne contient aucune erreur. La validation signifie uniquement qu'elle est conforme aux normes CSS définies par le W3C. Si vous voulez valider et examiner quelques problèmes de compatibilité avec votre feuille de style, CSSCheck est un bon outil pour vous.
Analyseur CSS
CSS Analyzer est un outil utile qui vous permet de valider votre feuille de style par rapport au standard du W3C, d'effectuer un test de contraste des couleurs et un test pour vous assurer que les tailles pertinentes sont spécifiées dans les unités de mesure relatives.
Au cas où vous vous poseriez la question, le test de contraste des couleurs consiste à vérifier que les combinaisons de couleurs d'avant-plan et d'arrière-plan fournissent un contraste suffisant lorsqu'elles sont vues par une personne ayant des déficits de couleur ou sur un écran noir et blanc.
Nettoyez votre code CSS
Sélecteurs de poussière
Dust-Me Selectors est une extension Firefox qui trouve des sélecteurs CSS inutilisés sur la page que vous consultez. Lorsque vous testez les pages suivantes du même domaine, le résultat est recoupé avec les données précédentes et tous les sélecteurs rencontrés sont rayés de la liste. Vous pouvez l'utiliser pour tester des pages individuelles ou pour l'obtenir sur l'ensemble du site.
À la fin, vous obtiendrez un rapport sur les sélecteurs qui ne sont utilisés nulle part sur le site. Vous pouvez ensuite supprimer ces sélecteurs de votre feuille de style (un code moindre signifie une taille de fichier plus petite).
CSS Redundancy Checker
Semblable à Dust-Me Selectors, cet outil vérifie la présence de sélecteurs CSS inutilisés et redondants sur votre site. La seule chose qui est différente est que vous devez entrer manuellement l'URI pour chaque page que vous voulez tester.
Optimiser et compresser votre code CSS
Une fois que vous avez vérifié la validité de votre CSS et nettoyé le code inutile, il est temps d'optimiser le fichier CSS et de le réduire à la plus petite taille possible.
CSS Tidy
CSS Tidy est un logiciel open source que vous pouvez utiliser pour optimiser et compresser votre fichier CSS. Il est disponible au format .exe (Windows uniquement) et un format de script PHP compressé (toutes les plates-formes, pour les développeurs Web). Ce que CSS Tidy fait est principalement enlever le commentaire, les espaces inutiles et changer une partie du code en raccourci. Pendant la compression, vous pouvez choisir entre la lisibilité du code ou la compression maximale. Selon la longueur de votre code, vous pouvez facilement atteindre un taux de compression allant jusqu'à 30% ou plus.
Depuis CSS Tidy est un projet open source, il y a eu plusieurs sites Web qui utilisent le code et l'ont transformé en un outil en ligne pour les gens à utiliser. En voici quelques uns:
- CLEAN CSS
- Code Beautifier
- CSS Formatter et Optimizer de CSS Portal
Autres optimiseurs CSS
FlumpCakes CSS Optimizer
Un optimiseur simple qui vient avec plusieurs options pour vous de choisir.
Compresseur CSS Robson
Bien qu'il puisse sembler le même que d'autres, j'ai trouvé que le taux de compression pour Robson CSS Compressor était le plus élevé parmi tous. Bien qu'il existe plusieurs options pour vous permettre de modifier le paramètre, laisser toutes les options intactes (toutes les options cochées) produit toujours le meilleur résultat.
Compresseur CSS du lecteur CSS
Le compresseur CSS offert par CSS Drive est disponible en deux modes que vous pouvez utiliser: Regular et Advanced. En mode Regular, il vous suffit de sélectionner le niveau de compression souhaité (Light, Normal ou Super Compact) et le compresseur CSS fera le reste. En mode Avancé, vous disposez de plus d'options et d'une plus grande influence sur l'optimisation de votre feuille de style.
Optimiseur CSS
L'Optimiseur CSS de mabblog.com est une application de ligne de commande pour Mac et Linux. Il est destiné à ceux qui sont plus à l'aise avec le terminal plutôt que d'une interface en ligne. Il y a aussi une version en ligne simple disponible pour ceux qui veulent en finir rapidement.
Heureusement, les outils listés ici vous suffisent pour ajuster et optimiser votre feuille de style CSS. Si vous avez utilisé d'autres outils plus utiles que ceux mentionnés ci-dessus, partagez-les avec nous dans les commentaires.