Accélérer l’affichage avec content-visibility

Quand un internaute ouvre une page longue (un blog, une liste d’articles, une fiche riche en sections), le navigateur calcule la mise en page et peint l’intégralité du contenu, y compris ce qui se trouve très en dessous de la ligne de flottaison. Ce travail de rendu prend du temps et retarde l’affichage perçu. La propriété CSS content-visibility permet au navigateur d’ignorer le rendu d’un élément (mise en page et peinture) tant qu’il n’est pas nécessaire, c’est-à-dire tant qu’il reste hors écran.

Pour le SEO, l’enjeu est direct. Un rendu initial plus léger améliore la vitesse ressentie et libère le thread principal, deux facteurs qui pèsent sur les Core Web Vitals et sur l’expérience que Google mesure ; pour aller plus loin sur la réactivité, voyez comment optimiser l’INP. Sur la démonstration officielle de web.dev, appliquer content-visibility à des sections fragmentées fait passer le temps de rendu de 232 ms à 30 ms au chargement initial, soit une amélioration des performances d’environ sept fois.

Content-visibility s’appuie sur le confinement CSS (CSS Containment). L’idée est d’isoler de façon prévisible un sous-arbre du DOM afin que le navigateur puisse raisonner sur une zone sans tenir compte du reste de la page. Plutôt que de choisir manuellement les bonnes valeurs de la propriété contain, content-visibility applique automatiquement le confinement utile, un levier de plus pour fluidifier le rendu des pages.

Un élément doté de content-visibility: auto gagne le confinement de mise en page (layout), de style et de peinture (paint). S’il se trouve hors écran et qu’il n’est pas pertinent pour l’utilisateur, il obtient en plus le confinement de taille (size) : le navigateur détermine alors sa taille sans traiter son contenu, puis s’arrête. La majeure partie du rendu de la sous-arborescence est ainsi ignorée jusqu’à ce que l’élément approche de la fenêtre d’affichage.

La propriété accepte plusieurs valeurs, mais deux retiennent l’attention en pratique. La valeur auto offre des gains immédiats sur les sections hors écran tout en les rendant automatiquement dès qu’elles s’approchent du viewport. La valeur hidden masque le contenu tout en conservant son état de rendu en cache, ce qui le rend très rapide à réafficher : c’est utile pour les vues inactives d’une application monopage ou pour des défileurs virtuels avancés.

Quand le navigateur applique le confinement de taille, l’élément est mis en page comme s’il était vide. Sans hauteur déclarée, il occuperait zéro pixel, ce qui ferait sauter la barre de défilement à mesure que les sections se rendent. La propriété contain-intrinsic-size résout ce point en indiquant une taille naturelle estimée qui sert d’espace réservé.

Avec le mot clé auto, le navigateur mémorise la dernière taille rendue et la réutilise ensuite à la place de l’estimation initiale. C’est précieux pour les défilements infinis, dont l’estimation s’affine automatiquement au fil de la navigation, en complément des techniques pour différer images et iframes. L’exemple ci-dessous applique le motif recommandé à des sections portant la classe story.