Optimiser les performances de rendu avec la propriété CSS content-visibility

Les navigateurs exécutent souvent les étapes de mise en page, de style et de peinture pour des éléments situés très en dessous de la zone d'affichage (viewport), même si l'utilisateur ne consulte que le haut de la page. Pour réduire cette surcharge, la propriété CSS content-visibility: auto permet d'ignorer le rendu des sous-arbres du DOM hors écran tant qu'ils ne deviennent pas pertinents pour l'utilisateur.

Gestion des sous-arbres hors écran par content-visibility

L'utilisation de content-visibility: auto s'appuie sur le confinement CSS pour sauter les travaux de style, de mise en page et de peinture des éléments hors du viewport. L'élément reste présent dans le DOM et le chargement de ses ressources réseau n'est pas différé par cette seule règle, ce qui la distingue du lazy loading. La règle indique simplement au moteur de rendu de faire l'économie des calculs pour un contenu non encore visible.

Lors d'un test contrôlé mené par freeCodeCamp sur 150 cartes HTML complexes sans framework, l'application de content-visibility: auto a réduit l'activité de rendu initiale mesurée dans Chrome DevTools de 42 ms à 20 ms. L'auteur précise que cette mesure reflète uniquement le temps de rendu initial rapporté par les DevTools et non la vitesse globale de chargement ou les Core Web Vitals, les gains effectifs dépendant de la complexité du layout, de l'appareil et de la taille du viewport.

Préservation de la stabilité du layout avec contain-intrinsic-size

Ignorer le rendu des éléments hors écran peut provoquer des décalages de mise en page, le navigateur ne disposant pas de la géométrie exacte des nœuds ignorés. Les développeurs compensent cet espace en associant content-visibility à contain-intrinsic-size. Par exemple, contain-intrinsic-size: auto 900px fournit une taille de secours lorsque le contenu est ignoré et permet de mémoriser les dimensions réelles une fois l'élément défilé et affiché.

Dans le test de freeCodeCamp, l'ajout d'une taille intrinsèque explicite a fait passer la médiane des mesures de rendu initial à 10 ms. Cependant, choisir une hauteur de secours inexacte peut entraîner des réajustements géométriques lorsque les nœuds hors écran défilent dans le viewport et affichent leurs dimensions réelles.

Accessibilité et conditions de déploiement

Bien que le rendu visuel soit ignoré, les éléments sous content-visibility: auto restent accessibles dans l'arbre d'accessibilité du navigateur. Il ne faut donc pas s'appuyer sur cette propriété pour masquer sémantiquement du contenu aux technologies d'assistance. De plus, différer le rendu ne supprime pas le travail : les traitements sont exécutés lorsque les éléments arrivent par défilement dans la zone d'affichage.

La propriété content-visibility bénéficie d'une large compatibilité inter-navigateurs au sein de Baseline 2024. Elle offre une valeur maximale sur les pages lourdes en éléments DOM comportant beaucoup de contenu hors écran, comme les catalogues de produits, les flux d'articles ou les tableaux de bord à plusieurs sections.

Illustration éditoriale générée par IA ; ce n’est pas une photographie documentaire.

Source: How CSS content-visibility Works and How It Can Improve Rendering Performance