Date de publication: 30 octobre 2024
L'introduction de l'Interaction to Next Paint (INP) en tant que métrique Core Web Vitals début 2024 a suscité un intérêt accru pour les performances de rendu. Une partie de l'INP se concentre sur ce qu'il faut au navigateur pour peindre le frame suivant après qu'un utilisateur a initié une interaction avec la page. En réduisant l'INP de votre site Web, vous donnerez l'impression aux utilisateurs que votre site répond à leurs interactions aussi rapidement et facilement que possible.
Il est également important de prendre en compte le travail de rendu qui doit être effectué lorsque une page se charge, ce qui peut retarder le début des interactions. Il est utile de trouver des moyens de réduire la quantité de travail effectuée pendant cette partie cruciale du cycle de vie de la page. La propriété CSS content-visibility est un bon moyen d'y parvenir. Nous avons le plaisir de vous annoncer qu'elle est désormais Baseline Newly disponible depuis septembre 2024.
content-visibility est une propriété CSS qui indique à l'user-agent de différer le rendu des éléments jusqu'à ce qu'ils s'approchent du viewport. Pour les pages contenant de nombreux éléments DOM, cela peut être bénéfique, car cela signifie que le chargement initial d'une page déclenchera moins de travail de rendu. Au lieu de cela, le travail est effectué juste avant que l'utilisateur ait besoin de le voir.
content-visibility: auto à des zones de contenu fragmentées permet d'obtenir un rendu sept fois plus performant lors du chargement initial. Pour en savoir plus, poursuivez votre lecture !
Pour activer cette optimisation pour les éléments hors écran, appliquez-leur la règle content-visibility: auto dans le CSS de votre site Web:
.render-me-later {
content-visibility: auto;
}
content-visibility fonctionne selon certains des comportements définis pour la propriété contain dans la section Encapsulation CSS. L'objectif du confinement CSS est d'isoler certaines parties de l'arborescence DOM. Cela permet de limiter le champ d'application des opérations de rendu à une partie spécifique de l'arborescence DOM. La mise en page n'est donc invalidée et refaite que pour un sous-ensemble de l'arborescence DOM. Pour appliquer cette méthode aux performances de rendu, vous devez connaître les différentes valeurs de la propriété contain et savoir comment les utiliser efficacement.
Lorsque content-visibility: auto est appliqué à des éléments, ils héritent automatiquement de certaines des propriétés fournies par la propriété contain. Par conséquent, les éléments affectés sont initialement affichés avec une hauteur de 0px, ce qui signifie qu'ils ne sont pas affichés.
Toutefois, cela comporte des effets secondaires. Par exemple, la barre de défilement de la page peut se décaler et changer de hauteur à mesure que l'utilisateur fait défiler la page vers des éléments précédemment non affichés qui s'affichent juste à temps pour que l'utilisateur les voie. Pour limiter ce problème, appliquez la propriété contain-intrinsic-size.
content-visibility étant récemment disponible en tant que référence, vous pouvez avoir des inquiétudes concernant les utilisateurs dont les navigateurs n'ont pas encore été mis à jour pour utiliser la nouvelle propriété. Étant donné que content-visibility est une propriété CSS, vous ne devriez pas vous inquiéter outre mesure. Les navigateurs qui le comprennent l'utiliseront, et ceux qui ne le comprennent pas ne l'utiliseront pas. Autrement dit, en plus des avantages offerts par les navigateurs compatibles avec content-visibility en termes de performances, vous pouvez vous attendre à ce que les pages fonctionnent pour une grande partie de la même manière.
content-visibility offre un avantage additif. Si vous pouvez l'utiliser pour réduire le travail de rendu lors du chargement de la page, vous devriez envisager de l'utiliser pour vous assurer que vos pages disposent de la puissance de traitement maximale possible lorsqu'elles en ont le plus besoin. Maintenant que cette fonctionnalité utile est Baseline Newly disponible, n'hésitez pas à l'utiliser pour que les utilisateurs puissent bénéficier du travail d'affichage qu'elle évite jusqu'à ce que cela soit nécessaire.