Optimisation CSS

✔️ Balise : optimisation CSS

L'optimisation CSS est le processus d'amélioration des performances et de la vitesse de chargement des pages Web en réduisant la taille des fichiers CSS et en simplifiant leur structure. Ceci est important pour améliorer l'expérience utilisateur et améliorer le classement des moteurs de recherche.

Comment optimiser le CSS - Raccourcir le CSS

Raccourcir CSS signifie supprimer tous les caractères inutiles du code, tels que les espaces, les sauts de ligne et les commentaires. Cela réduit la taille du fichier CSS et accélère son chargement.

Combiner des fichiers CSS

La combinaison de plusieurs fichiers CSS en un seul peut également accélérer le chargement de la page. En effet, le navigateur doit faire moins de requêtes au serveur.

Utilisation des sélecteurs par classe et ID

L'utilisation de sélecteurs de classe et d'ID au lieu de sélecteurs de balises peut accélérer le traitement du CSS par le navigateur. Les sélecteurs de classe et d'ID sont plus spécifiques et permettent au navigateur de trouver rapidement des éléments correspondants sur la page.

Optimisation de l'ordre des styles

L'ordre des styles dans un fichier CSS peut également affecter la vitesse de rendu. Les styles appliqués aux éléments en haut de la page doivent être placés en haut du fichier CSS. Cela permettra au navigateur de rendre le contenu de la page plus rapidement.

L'optimisation CSS est un aspect important du développement de sites Web. Il aide à améliorer l'expérience utilisateur et à améliorer le classement des moteurs de recherche. Il existe de nombreuses techniques d'optimisation CSS telles que le raccourcissement du code, la concaténation de fichiers et l'utilisation de sélecteurs de classe et d'ID.

Minification CSS

La minification CSS est le processus de compression du code CSS en supprimant tous les caractères inutiles tels que les espaces, les sauts de ligne et les commentaires. Cela réduit la taille du fichier CSS et accélère son chargement. Il existe différents outils de minification CSS tels que CSS Minifier et CleanCSS.

Optimisation des images

L'optimisation des images peut également améliorer les performances de la page. Cela signifie compresser les images à la plus petite taille possible sans perte de qualité. Il existe divers outils d'optimisation d'image tels que TinyPNG et JPEGmini.

L'optimisation CSS est un aspect important du développement de sites Web. Il aide à améliorer l'expérience utilisateur et à améliorer le classement des moteurs de recherche. Il existe de nombreuses techniques d'optimisation CSS telles que le raccourcissement du code, la concaténation de fichiers et l'utilisation de sélecteurs de classe et d'ID. N'oubliez pas d'optimiser également les images pour améliorer les performances de la page.

Il existe quatre principaux aspects de l'optimisation CSS :

1. Performances de téléchargement - principalement en réduisant la taille des fichiers, en réduisant le blocage des téléchargements et en améliorant la simultanéité.

2. Performances du sélecteur.

3. Performances de rendu.

4. Maintenabilité, fiabilité.

Optimisation CSS - Performances de chargement

1. Compression CSS : L'empaquetage et la compression du CSS écrit peuvent réduire considérablement sa taille ;

2. Style CSS uniforme : lorsque les marges inférieure et gauche sont requises,

⟹ Sélectionnez plusieurs fois : marge : haut 0 bas 0 ;

⟹ Mais marge-bas : bas ; marge-gauche : gauche ; l'exécution est plus efficace ;

3. Réduisez l'utilisation de @import et utilisez un lien car ce dernier est chargé ensemble lorsque la page est chargée et le premier doit attendre que la page se charge avant de charger ;

4. Concevez judicieusement votre mise en page CSS, faites attention à la réutilisation des styles et réduisez le temps de rendu. Pour la sélection de classe et d'identifiant, utilisez un matcher moins global tel que * et définissez les styles de base de manière judicieuse (comme la définition d'une table{}) pour améliorer la réutilisation.

Optimisation CSS - Performances du sélecteur

1. Les sélecteurs CSS sont mis en correspondance de droite à gauche. Lors de l'utilisation de sélecteurs enfants, le navigateur examine tous les éléments enfants pour déterminer s'il s'agit de l'élément spécifié, et ainsi de suite ;

2. Évitez d'utiliser des caractères génériques. Par exemple, *{} le nombre de calculs est incroyable ! Sélectionnez uniquement les éléments dont vous avez besoin.

3. Choisissez le moins de balises possible, mais utilisez une classe. Par exemple : #nav li{}, vous pouvez ajouter le nom de classe nav_item à li, sélectionnez .nav_item{} comme suit.

4. N'utilisez pas de balises pour qualifier des identifiants ou des sélecteurs de classe. Par exemple : ul#nav doit être simplifié en #nav.

5. Utilisez le moins possible le sélecteur enfant et réduisez le poids du sélecteur. La surcharge des sélecteurs descendants est la plus élevée, essayez de garder la profondeur des sélecteurs au minimum, le niveau le plus élevé ne dépasse pas trois couches, et plus utilisez des classes pour lier chaque élément d'étiquette.

6. Pensez à l'héritage. Sachez quelles propriétés peuvent être héritées et évitez de répéter les règles pour ces propriétés.

Optimisation CSS - performances de rendu

1. Utilisez avec précaution les attributs de haute performance : flottement, positionnement ;

2. Minimiser l'échange et le rafraîchissement des pages ;

3. Réorganiser conformément à l'ordre d'écriture css :

⟹ Position : position, haut, gauche, z-index, flotteur, affichage.

⟹ Taille : largeur, hauteur, marges, rembourrage.

⟹ Série de texte : police, hauteur de ligne, couleur, espacement des lettres.

⟹ Bordure d'arrière-plan : arrière-plan, bordure.

⟹ Autre : animation, transition.

4. Redessiner : bordure, contour, arrière-plan, boîte-ombre, si vous pouvez utiliser la couleur d'arrière-plan, essayez de ne pas utiliser l'arrière-plan ;

5. Supprimez les règles vides : {} ;

6. Lorsque la valeur de l'attribut est 0, aucune unité n'est ajoutée ;

7. La valeur de l'attribut est un nombre décimal flottant 0.**, et le 0 avant le point décimal peut être omis ;

8. Normalisez les différents préfixes de navigateur : ceux avec des préfixes de navigateur viennent en premier. Les attributs standard suivent ;

9. N'utilisez pas le préfixe @import, cela affectera la vitesse de chargement du CSS ;

10. Exploitez pleinement les propriétés d'héritage CSS pour réduire la quantité de code ;

11. Extraction abstraite des styles publics et réduction de la quantité de code ;

12. Le sélecteur optimise l'imbrication et essaie d'éviter les niveaux trop profonds ;

13. image de sprite css, une petite icône de la même partie de la même page, pratique à utiliser et à réduire le nombre de requêtes sur la page, mais l'image elle-même deviendra plus grande, lors de son utilisation, considérez clairement les avantages et les inconvénients, puis utilisez-le;

14. Placez le fichier CSS en haut de la page.

Maintenabilité et fiabilité

1. Extrayez des styles avec les mêmes attributs, intégrez-les et utilisez-les sur des pages via des classes pour améliorer la maintenabilité CSS ;

2. Après le précédent, oocss est également un moyen d'améliorer les performances CSS. En définissant des classes de base réutilisables et sémantiquement bonnes, puis en les ajoutant au html, cette technique est également utilisée par de nombreux frameworks d'interface utilisateur tels que :class="btn btn-active btn-blue" ;

3. Séparation du style et du contenu : le code css est défini en css externe ;

4. Séparation du contenant et du style ;

⟹ Voici les documents traitant de ce sujet :