Optimisation CSS - 21 façons d'accélérer votre site Web

Écoutez cet article

CSS doit passer par un pipeline relativement complexe, tout comme HTML et JavaScript. Le navigateur doit télécharger les fichiers depuis le serveur, puis les analyser et les appliquer au DOM. En raison des niveaux d'optimisation extrêmes, ce processus est généralement assez rapide - pour les petits projets Web qui ne sont pas basés sur des frameworks, CSS ne représente généralement qu'une petite partie de la consommation totale de ressources.

Les cadres brisent cet équilibre. Incluez une pile d'interface graphique JavaScript telle que l'interface utilisateur jQuery et observez la croissance exponentielle de votre CSS, JS et HTML. Souvent, les développeurs ne se sentent pas mal - lorsqu'ils sont assis devant un puissant poste de travail à huit cœurs avec T3 Internet, personne ne se soucie de la vitesse. Cela change à mesure que les latences ou les appareils avec des limitations de CPU entrent en jeu.

Optimisation CSS nécessite une approche multidimensionnelle. Bien que le code manuscrit puisse être réduit à l'aide de diverses méthodes, l'itération manuelle du code du framework est inefficace. Dans ces cas, l'utilisation du minimiseur automatique donne de meilleurs résultats.

Les étapes suivantes vous aideront à optimiser votre CSS. Tous ne sont peut-être pas directement applicables à votre projet, gardez cela à l'esprit.

Le contenu de l'article :

• Utiliser les suggestions CSS de raccourci
• Supprimer le code CSS inutilisé
• Travaillez avec CSS de manière plus pratique
• Soyez toujours conscient des problèmes liés à vos styles
• CSS critique en ligne
• Analyse anti-parallèle
• Remplacez vos images par du CSS
• Utiliser des combinaisons de couleurs
• Supprimer les zéros et les uns inutiles
• Supprimer les points-virgules supplémentaires
• Utiliser des sprites de texture
• Supprimer le pixel indésirable
• Évitez les proportions exigeantes
• Supprimer les espaces inutiles
• Supprimer les commentaires indésirables
• Utiliser la compression automatique
• Exécuter à partir de NPM
• Gardez Sass et les autres sous contrôle
• Configurer la mise en cache
• vider le cache
• N'oubliez pas les bases

Utiliser les suggestions CSS de raccourci

La phrase CSS la plus rapide est celle qui n'est jamais analysée. L'utilisation de suggestions abrégées telles que la déclaration de champ illustrée ci-dessous réduira considérablement la taille de vos fichiers CSS. De nombreux raccourcis supplémentaires peuvent être trouvés en recherchant "CSS Shorthand" sur Google.

Voici un exemple:

p { marge-haut : 1px ; marge droite : 2 px ; marge inférieure : 3px ; marge gauche : 4px ; } p {marge : 1px 2px 3px 4px ; }

Supprimer le code CSS inutilisé

L'élimination des parties inutiles de votre balisage se traduit évidemment par une énorme augmentation de la vitesse. Le navigateur Google Chrome a cette fonctionnalité prête à l'emploi.

Allez simplement dans Affichage> Développeur> Outils de développement, ouvrez l'onglet Sources dans la dernière version et ouvrez le menu de commandes. Après cela, sélectionnez "Afficher la couverture" et admirez la fenêtre d'analyse de la couverture mettant en évidence le code inutilisé sur la page Web actuelle.

Travaillez avec CSS de manière plus pratique

La navigation dans l'analyse ligne par ligne n'est pas nécessairement pratique. Chrome Web Performance Audit renvoie des informations similaires : ouvrez-le simplement à partir de la barre d'outils, choisissez Affichage > Développeur > Outils de développement > Audit, puis exécutez-le. Lorsque cela est fait, une liste des éléments problématiques apparaîtra.

Soyez toujours conscient des problèmes liés à vos styles

Gardez à l'esprit que l'analyse CSS automatisée peut toujours entraîner des erreurs. Faites un test approfondi de l'ensemble du site Web après avoir remplacé les fichiers CSS par des fichiers minifiés - vous ne savez jamais quelles erreurs l'optimiseur a commises. Et à l'avenir, un hébergeur décent peut vous aider à aplanir les rides de votre site.

CSS critique en ligne

Le chargement des feuilles de style externes prend du temps en raison de la latence - est-ce que quelqu'un se souvient du "flash de contenu sans style" ? De cette façon, les morceaux de code les plus importants peuvent être placés dans la balise d'en-tête.

Cependant, essayez de ne pas en faire trop. Gardez à l'esprit que le code doit également être lu par les personnes effectuant des tâches de maintenance.

Voici un exemple:

<html> 
<head> 
<style> .blue{color:blue;} </style>
</head> 
<body> 
<div class="blue"> Bonjour le monde! </div>

Analyse anti-parallèle

@importer ajoute de la structure à votre code CSS. Malheureusement, les avantages ne sont pas gratuits : puisque les importations peuvent être imbriquées, elles ne peuvent pas être analysées en parallèle. La méthode la plus parallèle utilise une série de balises que le navigateur peut obtenir en une seule fois.

Exemple:

@import url("a.css"); @import url("b.css"); @import url("c.css");

Remplacez vos images par du CSS

Il y a quelques années, un ensemble de fichiers PNG translucides pour créer des effets translucides sur les sites Web était monnaie courante. Actuellement, les filtres CSS sont une alternative économe en ressources. Par exemple, l'extrait accompagnant cette étape garantit que l'image en question est affichée comme une version en niveaux de gris d'elle-même.

Exemple:

img { -webkit-filter : niveaux de gris (100%) ; /* ancien safari */ filtre : niveaux de gris (100%) ; }

Utiliser des combinaisons de couleurs

Le bon sens veut que les descripteurs de couleurs à six chiffres soient le moyen le plus efficace d'exprimer les couleurs. Ce n'est pas le cas - dans certains cas, les descriptions abrégées ou les noms de couleurs peuvent être plus courts.

cible { couleur de fond : #ffffff ; } cible { arrière-plan : #fff ; }

Supprimer les zéros et les uns inutiles

CSS prend en charge un large éventail d'unités et de formats de nombres. Ils sont une cible bienvenue pour l'optimisation - les zéros à la fin et à la fin peuvent être supprimés, comme indiqué dans l'extrait ci-dessous. Gardez également à l'esprit que zéro est toujours zéro et que l'ajout d'une dimension n'augmente pas la valeur des informations contenues.

rembourrage : 0,2 em marge : 20.0em valeur : 0px ; rembourrage : .2em ; marge : 20em valeur : 0 ;

Supprimer les points-virgules supplémentaires

Cette optimisation est quelque peu critique car elle affecte les changements de code. La spécification CSS vous permet d'omettre le dernier point-virgule dans un groupe de propriétés. Étant donné que les économies réalisées par cette méthode d'optimisation sont minimes, nous en parlons principalement pour ceux qui travaillent avec l'optimiseur automatique.

p{. . . taille de police : 1,33 em

Utiliser des sprites de texture

Le chargement de plusieurs petits sprites est inefficace en raison de la surcharge du protocole. Les sprites CSS combinent une série de petites images dans un gros fichier PNG, qui est ensuite séparé à l'aide de règles CSS. Des programmes tels que packer de textures , simplifie grandement le processus de création.

.download { largeur : 80px ; hauteur : 31px ; position d'arrière-plan : -160px -160px ; } .download:hover { largeur:80px; hauteur : 32px ; position d'arrière-plan : -80px -160px ; }

Supprimer le pixel indésirable

Une façon astucieuse d'améliorer les performances est une fonctionnalité de la norme CSS. Les valeurs numériques sans unité sont supposées être des pixels - la suppression de pixels permet d'économiser deux octets pour chaque nombre.

h2 {remplissage : 0px ; marge : 0px ;} h2 {remplissage : 0 ; marge : 0}

Évitez les proportions exigeantes

L'analyse a montré que certaines balises coûtent plus cher que d'autres. La liste qui accompagne cette étape est considérée comme particulièrement exigeante en matière de performances - évitez-la lorsque vous en avez l'occasion.

filtre de transformation border-radius box-shadow :nth-child position : fixe ; etc.

Supprimer les espaces inutiles

Les espaces - pensez aux tabulations, aux retours chariot et aux espaces - facilitent la lecture du code, mais ne font pas grand-chose du point de vue de l'analyseur. Éliminez-les avant l'expédition. Mieux encore, déléguez ce travail à un script shell ou à un périphérique similaire.

Supprimer les commentaires indésirables

Les commentaires sont également inutiles pour le compilateur. Créez votre propre analyseur pour les supprimer avant la livraison. Cela permet non seulement d'économiser de la bande passante, mais rend également plus difficile pour les attaquants et les cloneurs de comprendre ce qui se cache derrière le code.

Utiliser la compression automatique

L'équipe d'interface utilisateur de Yahoo a créé une application qui effectue beaucoup de travail de compression. Il se présente sous la forme d'un fichier JAR et peut être exécuté avec la JVM de votre choix.

java -jar yuicompressor-xyzjar Utilisation : java -jar yuicompressor-xyzjar [options] [fichier d'entrée] Options globales -h, --help Affiche ces informations --type Spécifie le type du fichier d'entrée

Exécuter à partir de NPM

Si vous préférez intégrer le produit dans Node.JS, veuillez visiter npmjs.com/package/yuicompressor . Le référentiel mal entretenu contient un ensemble de fichiers wrapper et une API JavaScript.

var compresseur = require('yuicompressor'); compresseur.compress('/path/to/ file or String of JS', { //Options du compresseur : charset : 'utf8', type : 'js',

Gardez Sass et les autres sous contrôle

Bien que les performances du sélecteur CSS ne soient plus aussi critiques qu'il y a quelques années (voir ressource), des frameworks comme Sass produisent parfois du code extrêmement complexe. Passez en revue les fichiers de sortie de temps en temps et réfléchissez à la manière d'optimiser les résultats. Vous avez des résultats à partager avec l'équipe ? Stockez des fichiers dans un stockage cloud public.

Configurer la mise en cache

Le vieil adage dit que le fichier le plus rapide est celui qui ne passe jamais sur le fil. L'interrogation du cache du navigateur y parvient efficacement. Malheureusement, la définition des en-têtes de mise en cache doit être effectuée sur le serveur. Faites bon usage des deux outils présentés dans les captures d'écran, ils fournissent un moyen rapide d'analyser les résultats de vos modifications.

vider le cache

Les concepteurs n'aiment souvent pas la mise en cache par crainte de problèmes avec les modifications à venir. Une façon astucieuse de résoudre ce problème consiste à inclure des balises avec le nom du fichier. Malheureusement, le schéma décrit dans le code qui accompagne cette étape ne fonctionne pas partout, car certains proxies refusent de mettre en cache des fichiers avec des chemins "dynamiques".

N'oubliez pas les bases

L'optimisation CSS n'est qu'une partie de l'effort d'optimisation. Si votre serveur n'utilise pas HTTP/2 et la compression gzip, beaucoup de temps est perdu lors du transfert de données. Heureusement, résoudre ces deux problèmes est assez simple. Mon exemple montre plusieurs paramètres pour un serveur Apache largement utilisé à l'aide d'un fichier .htaccess. Si vous vous trouvez sur un système différent, référez-vous simplement à la documentation du serveur.

pico /etc/httpd/conf/httpd.conf AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/css

Je serai très heureux si cet article vous est utile. Eh bien, je continuerai à ajouter de nouveaux documents pertinents sur ce sujet.

Lire cet article :

• Comment faire une redirection 301 dans un fichier .htaccess - exemples détaillés
• Optimisation des performances des pages Web

Merci d'avoir lu : SEO HELPER | NICOLA.TOP