CSS minimisant avec CSS Optimizer

Compression CSS: un outil puissant pour améliorer la vitesse du site Web

Points de base:

• La compression CSS réduit la taille du fichier en supprimant les caractères redondants du code, en accélérant ainsi les téléchargements et en enregistrant le transfert de données.
• CSS Optimizer (CSSO) est un outil de compression basé sur Node.js qui nécessite une familiarité avec l'interface de ligne de commande.
• CSSO supprime non seulement les espaces inutiles, les demi-colons et les commentaires, mais optimise également en fusionnant les blocs de déclaration avec des sélecteurs en double, en supprimant les attributs écrasés et en raccourcissant les codes de couleur.
• Bien que la compression de CSS puisse améliorer les performances du site Web, elle peut également rendre le code difficile à lire et à déboguer. Par conséquent, il est recommandé de conserver les fichiers CSS non compressés d'origine à des fins de développement.

(Ce qui suit est extrait du livre "The Master of CSS" écrit par Tiffany Brown. Le livre est disponible dans le monde entier, et vous pouvez également acheter la version E-Book ici.)

Les outils du développeur peuvent vous aider à trouver et à résoudre les problèmes de rendu, mais à quel point est-il efficace? La taille de notre fichier a-t-elle été minimisée? Pour ce faire, nous avons besoin d'outils de compression.

Dans le contexte du CSS, la compression signifie simplement éliminer les caractères excédentaires. Par exemple, considérez le bloc de code suivant:

<code>h1 {
    font: 16px / 1.5 'Helvetica Neue', arial, sans-serif;
    width: 80%;
    margin: 10px auto 0px;
}</code>

Ce code comprend des ruptures de ligne et des espaces, et mesure 98 octets de longueur. Regardons l'exemple compressé:

<code>h1{font:16px/1.5 'Helvetica Neue',arial,sans-serif;width:80%;margin:10px auto 0}</code>

Maintenant, notre CSS ne mesure que 80 octets, une diminution de 18%. Bien sûr, moins il y a d'octets, plus la vitesse de téléchargement est rapide et moins que vous et vos utilisateurs transfèrent.

Dans cette section, nous présenterons CSS Optimizer (CSSO), un outil de compression basé sur Node.js. Pour installer CSSO, vous devez d'abord installer Node.js et NPM. NPM est installé dans le cadre du processus d'installation Node.js, vous n'avez donc qu'à installer un seul package.

L'utilisation de CSSO vous oblige à vous familiariser avec l'interface de ligne de commande. Les utilisateurs de Linux et OS X peuvent utiliser des applications de terminal (pour OS X, Applications et GT; applications de terminal). Si vous utilisez Windows, utilisez l'invite de commande. Accédez au menu Démarrer ou Windows et tapez CMD dans la zone de recherche.

Installation de CSSO

Après avoir configuré Node.js et NPM, vous pouvez installer CSSO. À l'invite de la ligne de commande, tapez:

npm install -g csso -g Flags pour installer CSSO globalement afin que nous puissions l'utiliser dans la ligne de commande. Les utilisateurs OS X et Linux peuvent avoir besoin d'utiliser Sudo (sudo npm install -g csso). Lorsque NPM imprime son chemin d'installation vers la fenêtre de ligne de commande et que l'invite de ligne de commande réapparaît, vous savez qu'elle a été installée avec succès, comme le montre la figure 3.25.

Figure 3.25.

Maintenant, nous sommes prêts à comprimer CSS.

Compression en utilisant CSSO

Pour compresser le fichier CSS, exécutez la commande CSSO et passez le nom du fichier en tant que paramètre:

csso style.css Cela effectuera une compression de base. CSSO supprime les espaces inutiles, les demi-colons supplémentaires et les commentaires dans les fichiers d'entrée CSS.

Une fois terminé, CSSO imprime le CSS optimisé à la sortie standard, c'est-à-dire la borne actuelle ou la fenêtre d'invite de commande. Cependant, dans la plupart des cas, nous voulons enregistrer cette sortie dans un fichier. Pour ce faire, transmettez le deuxième paramètre à CSSO, le nom du fichier compressé. Par exemple, si nous voulons enregistrer la version compressée de style.css en tant que style.min.css, nous utiliserons la commande suivante:

csso style.css style.min.css Par défaut, CSSO réorganise les parties de CSS. Par exemple, il fusionne les blocs de déclaration avec des sélecteurs en double et supprime certains attributs écrasés. Considérez le CSS suivant:

body { margin: 20px 30px; padding: 100px; margin-left: 0px; }

h1 { font: 200 36px / 1.5 sans-serif; }

h1 { color: #ff6600; }

Dans ce segment de code, margin-left écrase la déclaration précédente margin. Nous avons également réutilisé h1 comme sélecteur pour les blocs de déclaration continue. Après optimisation et compression, nous obtenons:

<code>h1 {
    font: 16px / 1.5 'Helvetica Neue', arial, sans-serif;
    width: 80%;
    margin: 10px auto 0px;
}</code>

CSSO supprime les espaces inutiles, les nouvelles lignes et les semi-colons et raccourcit #ff6600 vers #f60. Le CSSO fusionne également les propriétés margin et margin-left dans une déclaration (margin: 20px 30px 20px 0) et combine nos blocs de sélecteur h1 séparés en un. Maintenant, si vous doutez de la façon dont le CSSO va réécrire votre CSS, vous pouvez désactiver sa fonction de refactorisation. Utilisez simplement le logo --restructure-off ou -off. Par exemple, l'exécution csso style.css style.min.css -off obtiendra les résultats suivants:

<code>h1{font:16px/1.5 'Helvetica Neue',arial,sans-serif;width:80%;margin:10px auto 0}</code>

Maintenant, notre CSS est comprimé, mais pas optimisé. La désactivation de la refactorisation empêchera votre fichier CSS d'atteindre la taille minimale. Évitez de désactiver la refactorisation à moins que vous ne rencontriez des problèmes. Le préprocesseur introduit dans le chapitre 9 fournit des capacités de compression dans son ensemble d'outils;

Des questions fréquemment posées sur l'utilisation de CSS Optimizer pour comprimer CSS

Quelle est l'importance de compresser les CS dans le développement Web?

La compression du CSS est un aspect important du développement Web car il contribue à réduire la taille des fichiers CSS. La taille réduite des fichiers entraînera un chargement de site Web plus rapide, offrant ainsi une meilleure expérience utilisateur. Le fichier CSS comprimé supprime les caractères inutiles tels que les espaces, les ruptures de ligne et les commentaires, qui n'affectent pas les fonctionnalités du code. Ce processus peut considérablement améliorer les performances du site Web, en particulier pour les utilisateurs avec des connexions Internet plus lentes.

Comment fonctionne CSS Optimizer?

CSS Optimizer fonctionne en analysant votre code CSS et en supprimant les caractères et une redondance inutiles. Il comprime les fichiers CSS en éliminant les espaces, les ruptures de ligne et les commentaires et simplifier la structure du code. Cela entraînera des tailles de fichiers plus petites et des téléchargements plus rapides à partir du navigateur Web, améliorant ainsi les performances globales du site Web.

Quels sont les risques de compression du CSS?

Bien que la compression de CSS puisse améliorer considérablement les performances de votre site Web, il convient de noter qu'il peut également rendre le code plus difficile à lire et à déboguer. En effet, le processus supprime tous les formats et commentaires qui rendent le code facile à lire. Par conséquent, il est recommandé de conserver les fichiers CSS non compressés d'origine pour le débogage et le développement.

Puis-je compresser manuellement CSS?

Oui, vous pouvez compresser manuellement CSS en supprimant tous les caractères inutiles et en simplifiant le code. Cependant, ce processus peut être très long et sujet aux erreurs, en particulier pour les fichiers CSS plus grands. Ce processus peut être automatisé à l'aide d'outils tels que CSS Optimizer pour s'assurer que votre CSS est compressé avec précision et efficacement.

Comment utiliser CSS Optimizer?

Pour utiliser CSS Optimizer, vous collez simplement le code CSS dans le champ de saisie du site Web CSS Optimizer et cliquez sur le bouton "Optimiseur". L'outil analysera ensuite votre code et vous donnera une version compressée que vous pouvez copier et utiliser dans votre site Web.

La compression de CSS affectera-t-elle les fonctionnalités de mon site Web?

Non, la compression de CSS n'affectera pas les fonctionnalités de votre site Web. Le processus supprime uniquement les caractères inutiles et simplifie le code, mais ne change pas la façon dont le navigateur interprète les règles CSS. Par conséquent, l'apparence et la fonctionnalité de votre site Web resteront les mêmes, mais elle se chargera plus rapidement en raison de la taille de fichier plus petite.

Puis-je utiliser CSS Optimizer pour les grands fichiers CSS?

Oui, CSS Optimizer peut gérer de grands fichiers CSS. Cependant, plus le fichier est grand, plus il faut pour que l'outil analyse et compresse le code. Néanmoins, avec de grands fichiers CSS, l'utilisation de CSS Optimizer est encore plus efficace et précise que d'essayer de compresser manuellement le code.

CSS Optimizer est-il gratuit?

Oui, CSS Optimizer est un outil gratuit que vous pouvez utiliser pour compresser le code CSS. Il s'agit d'un outil Web, vous n'avez donc pas besoin de télécharger ou d'installer quoi que ce soit pour l'utiliser. Vous avez juste besoin de visiter le site Web CSS Optimizer, collez votre code CSS et vous obtiendrez une version compressée.

Puis-je inverser ce processus si j'ai besoin de changer le CSS?

Oui, vous pouvez inverser ce processus à l'aide du fichier CSS non compressé d'origine. C'est pourquoi il est recommandé de conserver une copie du fichier CSS d'origine avant de le comprimer. Si vous devez modifier ou déboguer le code, vous pouvez utiliser le fichier d'origine, puis le compresser à nouveau lorsque vous avez terminé.

Quelles autres pratiques puis-je combiner avec la compression CSS pour améliorer les performances de mon site Web?

En plus de compresser CSS, vous pouvez également compresser les fichiers HTML et JavaScript. Cela peut réduire davantage le temps de chargement du site Web. D'autres pratiques incluent l'optimisation des images, l'utilisation des réseaux de distribution de contenu (CDN), l'activation de la compression et la mise en œuvre de la mise en cache du navigateur. Ces pratiques combinées à la compression CSS peuvent améliorer considérablement les performances et l'expérience utilisateur de votre site Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!