content-visibility: auto; : une seule ligne de CSS, posée sur les conteneurs répétés d’une longue liste de résultats WordPress, indique au navigateur qu’il peut sauter entièrement le calcul de style, de mise en page et le rendu visuel de tout élément situé hors du viewport, jusqu’à ce qu’il devienne proche de la zone visible.
Sur une page de résultats de recherche interne affichant plusieurs centaines d’entrées générées par une boucle WP_Query, le navigateur doit normalement calculer la mise en page de chaque élément dès le chargement initial, même ceux qui ne seront jamais vus sans un long défilement. Cette propriété change ce comportement par défaut sans nécessiter de pagination ni de chargement différé en JavaScript.
Mise en œuvre sur un conteneur de résultat
.resultat-recherche {
content-visibility: auto;
contain-intrinsic-size: 0 180px;
}
La propriété contain-intrinsic-size accompagne presque toujours content-visibility: auto : elle indique au navigateur une taille estimée à réserver pour l’élément avant que son contenu réel ne soit rendu, évitant que la barre de défilement ne saute de façon erratique au fur et à mesure que des blocs entrent dans le champ de rendu.
Ce que cela change concrètement au chargement
Sur une page listant 400 résultats, seule une poignée d’entre eux, ceux visibles à l’écran plus une marge de sécurité définie par le navigateur, sont réellement peints au chargement initial. Le reste attend d’être proche du viewport pour être calculé, ce qui réduit fortement le temps de première peinture complète et allège le travail du thread principal pendant le chargement.
Où cette propriété ne convient pas
- Sur un contenu dont la hauteur réelle varie énormément d’un élément à l’autre, où une estimation grossière via
contain-intrinsic-sizeprovoquerait des sauts visuels gênants au défilement. - Sur des éléments qui doivent rester détectables par une recherche de texte dans la page (Ctrl+F) avant même d’avoir défilé jusqu’à eux, un comportement que certains navigateurs traitent différemment selon leur version.
- Sur un nombre restreint d’éléments, où le gain reste négligeable face à la complexité ajoutée.
Vérifier l’effet avec les outils de développement
L’onglet Performance d’un navigateur basé sur Chromium permet de comparer, avant et après l’ajout de la propriété, le temps passé dans les phases de calcul de style et de mise en page (Layout) lors du chargement initial d’une longue page. La différence se lit directement dans la largeur des blocs correspondants sur la frise chronologique enregistrée.
Compatibilité à vérifier avant d’en dépendre
Cette propriété, introduite dans Chrome 85, n’est pas prise en charge par tous les navigateurs, notamment Safari qui l’a longtemps ignorée. Son usage reste sans danger en cas d’absence de support : le navigateur qui ne la reconnaît pas l’ignore simplement et rend le contenu normalement, sans erreur ni contenu manquant.
Choisir une estimation de hauteur réaliste
La valeur passée à contain-intrinsic-size ne doit pas être arbitraire : la méthode la plus fiable consiste à mesurer, via les outils de développement, la hauteur réellement rendue d’une carte de résultat représentative, puis à l’utiliser comme estimation. Sur ce projet, une carte de résultat contenant un titre sur deux lignes, un extrait et une image miniature mesurait en moyenne 176 pixels de hauteur, arrondis à 180 pixels dans la déclaration CSS pour laisser une petite marge.
Ce qui se passe en cas d’estimation trop éloignée
Si l’estimation choisie est très inférieure à la hauteur réelle, l’utilisateur peut percevoir un léger réajustement de la position du contenu au moment où l’élément entre dans la zone rendue par le navigateur, un comportement proche d’un décalage de mise en page. À l’inverse, une estimation trop généreuse laisse un espace vide temporaire avant que le contenu réel ne s’affiche. Dans les deux cas, l’effet reste mineur comparé au gain de performance obtenu, mais mérite d’être ajusté après une première mesure empirique plutôt que deviné.
En résumé
content-visibility: auto offre un moyen simple, purement déclaratif en CSS, d’alléger le rendu initial d’une longue liste générée par WordPress, sans réécrire la logique de pagination ni ajouter de JavaScript de défilement infini. Sa mise en œuvre demande seulement de choisir une estimation de hauteur raisonnable pour éviter les sauts visuels au défilement.
