CSS Optimisation des performances

Optimisation du CSS

L'optimisation du CSS permet à votre site web de se charger plus rapidement et de fonctionner de manière plus fluide, ce qui se traduit également par une meilleure expérience utilisateur.

Voici quelques conseils pour optimiser le CSS :

1. Utilisez des sélecteurs simples

Utilisez des sélecteurs simples lorsque cela est possible. Les sélecteurs complexes augmentent le temps de parsing.

Mauvais exemple

body #navlist ul li a.button:hover {
background-color: blue;
}

Meilleur exemple

.button:hover {
background-color: blue;
}

2. Évitez le sélecteur universel pour le style

Évitez le sélecteur universel (*) lorsqu'il n'est pas strictement nécessaire. Le sélecteur universel (*) affecte chaque élément et peut ralentir le rendu de la page.

Exemple

* {
margin: 0;
padding: 0;
font-size: 16px;
}

3. Évitez les styles en ligne

Évitez les styles en ligne lorsque cela n'est pas nécessaire. Les styles en ligne alourdissent votre HTML et sont plus difficiles à gérer.

Mauvais exemple

<div style="color: red; font-size: 18px;">Bonjour</div>
<p style="color: blue; font-size: 16px;">Test</p>

4. Évitez @import

Évitez d'utiliser @import pour charger du CSS externe, car cela retarde le chargement des feuilles de style.

Ajoutez du CSS externe avec la balise <link> dans la section head, afin qu'il se charge avant que la page ne soit rendue.

Exemple

<link rel="stylesheet" href="style.css">

5. Utilisez des propriétés abrégées

Utilisez des propriétés abrégées lorsque cela est possible. Cela permet d'économiser de l'espace et d'accélérer le parsing.

Exemple

/* Version longue */
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;

/* Version abrégée */
margin: 10px 20px;

6. Réduisez les animations inutiles

Un grand nombre d'animations et des animations lourdes nécessitent plus de puissance de traitement, ce qui dégrade les performances. Par conséquent, supprimez les animations inutiles.

7. Utilisez des propriétés qui ne provoquent pas de repaint lors des animations

Les performances des animations dépendent également des propriétés que vous animez.

Certaines propriétés (comme width, height, left, top) déclenchent un recalcul de la mise en page lorsqu'elles sont animées et doivent être évitées.

Si possible, utilisez des propriétés d'animation qui ne provoquent pas de repaint, comme les transformations, l'opacité et le filtre.

8. Combinez et minifiez le CSS

Utilisez un seul fichier CSS lorsque cela est possible, et supprimez les espaces et les commentaires pour réduire la taille du fichier.

Vous pouvez utiliser des outils comme :

  • CSS Minifier
  • PostCSS
  • Compresseurs en ligne

9. Mettez en cache votre CSS

Assurez-vous que votre fichier CSS est mis en cache par le navigateur en lui donnant un long temps d'expiration dans les paramètres de votre serveur. Cela réduit la fréquence à laquelle les utilisateurs doivent le recharger.

Résumé

  • Gardez les sélecteurs courts et simples
  • Évitez les opérations de layout-thrashing
  • Utilisez des techniques d'animation efficaces
  • Utilisez des feuilles de style externes, minifiées et mises en cache