Quels pièges peuvent survenir lors de l'optimisation des performances CSS?

Sélecteurs non optimisés. Le navigateur analyse le CSS de droite à gauche, donc les sélecteurs complexes et excessifs, en particulier avec le sélecteur universel * ou le sélecteur descendant >, ralentissent le calcul des styles.

Un grand nombre de règles @import dans le CSS. Elles bloquent le chargement parallèle des styles, ce qui retarde le rendu de la page.

L'utilisation de propriétés CSS complexes ou gourmandes en ressources, telles que les ombres (box-shadow, text-shadow) ou le flou (filter: blur), lors d'animations ou avec de nombreux éléments.

CSS illisible ou excessif, écrit sans tenir compte de la spécificité et de l'héritage, conduisant à la réécriture des règles et à l'augmentation de la taille du fichier.

CSS inutilisé ("dead CSS") — règles qui ne s'appliquent pas à la structure actuelle. Augmente la taille du fichier et le temps d'analyse.

Images de fond de grande taille ou dans un format inapproprié, qui se chargent lentement et bloquent le rendu.

Utilisation de frameworks qui ajoutent beaucoup de styles inutilisés.

Une layout mal conçue avec trop d'éléments ou une profondeur d'imbrication excessive, ce qui augmente le temps de repaint (repaint) et de reflow (reflow).

Mauvaise utilisation de will-change — peut entraîner une consommation excessive de mémoire GPU ou la création inutile de couches.

Absence de compression (Gzip ou Brotli) lors de la transmission des fichiers CSS depuis le serveur.