# WebPerf - Chargement des listes - Content-Visibility

**URL:** https://communaute.moning.co/t/webperf-chargement-des-listes-content-visibility/795
**Category:** Idées & Suggestions pour Moning ✨
**Created:** [Avril 23, 2021, 1:13 UTC](https://communaute.moning.co/t/webperf-chargement-des-listes-content-visibility/795 "2021-04-23T13:13:14Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![denis.truffaut](https://communaute.moning.co/user_avatar/communaute.moning.co/denis.truffaut/32/20734_2.png) [@denis.truffaut](https://communaute.moning.co/u/denis.truffaut)
#### Post date: [Avril 23, 2021, 1:13 UTC](https://communaute.moning.co/t/webperf-chargement-des-listes-content-visibility/795/1 "2021-04-23T13:13:14Z")

</div>

Si le site n’utilise pas de virtual scroller JS (DOM recycling), et charge toutes les actions dans la page, ça vaut peut-être le coup d’utiliser la propriété CSS suivante :

`content-visibility:auto;`

> **[content-visibility: the new CSS property that boosts your rendering performance](https://web.dev/content-visibility/)**
>
> The CSS content-visibility property enables web content rendering performance benefits by skipping rendering of off-screen content. This article shows you how to leverage this new CSS property for faster initial load times, using the auto keyword....

[https://developer.mozilla.org/en-US/docs/Web/CSS/content-visibility](https://developer.mozilla.org/en-US/docs/Web/CSS/content-visibility)

Ca vaut pour toutes les listes (portefeuille, search, forum, messages d’un topic, etc.)

Cela permet de réduire l’impact du chargement des noeuds HTML sur le main thread du browser

---

<div class="post-metadata">

### Author: ![nicolas.blanco](https://communaute.moning.co/user_avatar/communaute.moning.co/nicolas.blanco/32/34172_2.png) [@nicolas.blanco](https://communaute.moning.co/u/nicolas.blanco)
#### Post date: [Avril 23, 2021, 2:18 UTC](https://communaute.moning.co/t/webperf-chargement-des-listes-content-visibility/795/2 "2021-04-23T14:18:14Z")

</div>

Yes !

En fait les actions dans le screener sont chargées par blocs de quelques dizaines et le bloc suivant est chargé durant le scrolling 🙂

---

<div class="post-metadata">

### Author: ![denis.truffaut](https://communaute.moning.co/user_avatar/communaute.moning.co/denis.truffaut/32/20734_2.png) [@denis.truffaut](https://communaute.moning.co/u/denis.truffaut)
#### Post date: [Avril 23, 2021, 2:23 UTC](https://communaute.moning.co/t/webperf-chargement-des-listes-content-visibility/795/3 "2021-04-23T14:23:21Z")

</div>

C’est déjà très bien !

A voir si à la longue les nodes qui s’accumulent peuvent impacter la webperf.

Dans ce cas, avec `content-visibility:auto;` les nodes disparaissant du viewport seraient court-circuités de la boucle de rendu.

---

<div class="post-metadata">

### Author: ![m.j](https://communaute.moning.co/user_avatar/communaute.moning.co/m.j/32/13620_2.png) [@m.j](https://communaute.moning.co/u/m.j)
#### Post date: [Avril 23, 2021, 3:02 UTC](https://communaute.moning.co/t/webperf-chargement-des-listes-content-visibility/795/4 "2021-04-23T15:02:25Z")

</div>

![kaamelott GIF](https://communaute.moning.co/uploads/default/original/1X/6a73003efbc0530c715793445f244d3ca21bd80b.webp)

---

<div class="post-metadata">

### Author: ![nicolas.blanco](https://communaute.moning.co/user_avatar/communaute.moning.co/nicolas.blanco/32/34172_2.png) [@nicolas.blanco](https://communaute.moning.co/u/nicolas.blanco)
#### Post date: [Avril 23, 2021, 3:57 UTC](https://communaute.moning.co/t/webperf-chargement-des-listes-content-visibility/795/5 "2021-04-23T15:57:26Z")

</div>

Je testerai cela la semaine prochaine 😃