L’impact des selecteurs CSS sur les performances

Après avoir présenté un super outil pour analyser les Core Web Vitals et les performances de vos sites, j’ai pu appréhender, grâce à Trys Mudford, l’impact des sélecteurs CSS sur le rendu des pages.

C’est à travers l’article de blog au titre très intriguant « I wasted a day on CSS selector performance to make a website load 2ms faster » que j’ai découvert comment l’usage des feuilles de style pouvait, un peu ternir, les performances de rendu d’une page.

Ce qui a particulièrement retenu mon attention c’est que les sélecteurs CSS sont exécutés de droite à gauche. Cette information n’est pas neutre. Pour en voir l’intérêt il faut remonter au niveau du navigateur. Ce dernier gère des noeuds HTML (nodes) qui formes des arbres à N niveaux. Ainsi pour appliquer une feuille de style, il est bien plus optimal de partir des noeuds les plus profonds et de remonter que l’inverse. Le Bottom-up parsing explique bien ce phénomène, même si je pense que l’implémentation des navigateurs est plus complexe que cela.

Pour ceux qui ont conscience du niveau d’imbrications des nodes sur les pages complexes, je pense que vous comprenez maintenant l’implication que cela peut avoir pour appliquer une feuille de style.

Si je reprend l’exemple de Trys, décortiquons le sélecteur suivant .parent > * + *

• * selectionne tous les nodes de la page (ouf)
• + * sélectionne tous les éléments qui suivent un autre élément, ce qui représente en gros toute la page
• .parent > * + * Séléctionne tous les enfants de .parent qui suivent un autre enfant.

Donc ce sélecteur match tous les éléments du DOM et réduit la liste alors que cela pourrait concerner réellement que quelques nodes. C’est donc énormément de calculs inutiles.

Il faut tout de même relativiser, les navigateurs sont très optimisés et implémentes des algorithmes puissants pour diminuer l’impact de ce type de sélecteur sur leurs performances. Le gain ne devrait être que de quelques ms. Malgré tout, à l’aire ou l’on doit économiser les ressources, chaque optimisation est bonne à prendre !

En tout cas désormais, je vais garder cette information en tête et faire attention à mon usage de CSS !