content-Visibility: la nouvelle propriété CSS qui améliore les performances d'affichage

Améliorez le temps de chargement initial en ignorant l'affichage du contenu hors écran.

Una Kravets
Jeremy Wagner
Vladimir Levin
Vladimir Levin

La content-visibility , lancée dans Chromium 85, pourrait être l'une des nouvelles CSS les plus efficaces permettant d'améliorer le chargement des pages. content-visibility active le pour ignorer le travail de rendu d'un élément, y compris la mise en page et la peinture, jusqu'à ce que cela soit nécessaire. Comme l'affichage est ignoré, si une grande partie contenu hors écran, l'utilisation de la propriété content-visibility rend l'utilisateur initial se charge beaucoup plus rapidement. Cela permet également d'interagir plus rapidement avec le contenu à l'écran. Plutôt chouette.

démo avec des figures représentant les résultats d'un réseau
Dans la démonstration de notre article, l'application de content-visibility: auto à des zones de contenu fragmentées permet de booster les performances d'affichage x7 lors du chargement initial. Lisez la suite pour en savoir plus.

Prise en charge des navigateurs

Navigateurs pris en charge

  • Chrome: 85
  • Edge: 85
  • Firefox: 125
  • Safari: 18.

Source

content-visibility s'appuie sur des primitives de la spécification de structuration CSS. Bien que content-visibility ne soit compatible qu'avec Chromium 85 pour le moment (et considéré comme "intéressant à prototyper" pour Firefox), la spécification de structuration est compatible avec la plupart des navigateurs modernes.

Confinement CSS

L'objectif principal et principal du confinement CSS est de permettre l'affichage améliorent les performances du contenu Web grâce à une isolation prévisible une sous-arborescence DOM dans le reste de la page.

En gros, un développeur peut indiquer à un navigateur quelles parties de la page sont encapsulées en tant qu'ensemble de contenu, ce qui permet aux navigateurs de raisonner sur le contenu sans avoir à prendre en compte l'état en dehors du sous-arbre. Savoir quels éléments de contenu (sous-arborescences) contiennent du contenu isolé, ce qui signifie que le navigateur peut effectuer l'optimisation pour l'affichage des pages.

Il existe quatre types de CSS le confinement, une valeur potentielle pour la propriété CSS contain, qui peut être combinée ; dans une liste de valeurs séparées par des espaces:

  • size : la structuration de la taille d'un élément garantit que la zone de l'élément peut être mise en page sans avoir à examiner ses descendants. Cela signifie que nous pouvons vous pouvez ignorer la mise en page des descendants si nous n'avons besoin que de la taille du .
  • layout: le confinement de la mise en page signifie que les descendants n'affectent pas le mise en page externe des autres zones de la page. Cela nous permet de passer potentiellement des descendants si nous voulons simplement mettre en page d'autres cases.
  • style: le confinement du style garantit que les propriétés qui peuvent avoir un effet sur plus que ses descendants n'échappent pas à l'élément (par exemple, les compteurs). Ce nous permet d'ignorer potentiellement les calculs de style pour les descendants si tous les est de calculer des styles sur d'autres éléments.
  • paint: le confinement de la peinture garantit que les descendants de la boîte englobante ne s'affichent pas en dehors de ces limites. Rien ne peut visiblement déborder de l’élément, Si un élément est hors écran ou n'est pas visible, ses descendants ni être visibles. Cela nous permet d'éviter de peindre si l'élément est hors écran.

Omission de l'affichage avec content-visibility

Il peut être difficile de déterminer quelles valeurs de confinement utiliser, car le navigateur les optimisations ne peuvent s'activer que si un ensemble approprié est spécifié. Vous pouvez jouer avec les valeurs pour voir ce qui fonctionne best, ou vous vous pouvez utiliser une autre propriété CSS appelée content-visibility pour appliquer les automatiquement. content-visibility vous permet d'obtenir la plus grande le navigateur vous apporte un minimum d'efforts, développeur.

La propriété "content- visibility" accepte plusieurs valeurs, mais c'est auto qui est la seule. qui améliore immédiatement les performances. Un élément qui a content-visibility: auto améliore la structuration des layout, des style et des paint. Si l'élément apparaît en dehors de l'écran (et n'est pas pertinent pour l'utilisateur) ; sont ceux qui sont sélectionnés dans leur sous-arborescence. renforce également le confinement de size (et cesse peinture et tests de positionnement son contenu).

Qu'est-ce que cela signifie ? En bref, si l'élément est en dehors de l'écran, ses descendants sont n'est pas affichée. Le navigateur détermine la taille de l'élément sans tenir compte et s'arrête là. La majeure partie du rendu, comme le style et la mise en page de la sous-arborescence de l'élément sont ignorées.

Lorsque l'élément s'approche de la fenêtre d'affichage, le navigateur n'ajoute plus size. le confinement et commence à peindre et à tester le contenu de l'élément. Ce permet d'effectuer le rendu juste à temps pour être vu par l'utilisateur.

Remarque sur l'accessibilité

L'une des fonctionnalités de content-visibility: auto est que le contenu hors écran reste disponible dans le modèle d'objet de document et, par conséquent, dans l'arborescence d'accessibilité (contrairement à visibility: hidden). En d'autres termes, il est possible de rechercher ce contenu sur la page et d'y accéder sans attendre qu'il se charge et que les performances d'affichage soient sacrifiées.

En revanche, les éléments repère avec des fonctionnalités de style telles que display: none ou visibility: hidden apparaissent également dans l'arborescence d'accessibilité lorsqu'ils sont hors écran, car le navigateur ne les affiche pas tant qu'ils ne sont pas dans le viewport. Pour éviter que ces éléments ne soient visibles dans l'arborescence d'accessibilité et qu'ils ne s'encombrent pas, veillez également à ajouter aria-hidden="true".

Exemple: blog de voyages

Dans cet exemple, nous avons base notre blog de voyage sur la droite et appliquons content-visibility: auto aux zones fragmentées sur la gauche. Les résultats indiquent des temps d'affichage allant de 232 ms à 30 ms pour le chargement initial de la page.

Un blog de voyage contient généralement des histoires accompagnées de quelques images, un texte descriptif. Voici ce qui se passe dans un navigateur classique lorsqu'il accède à un blog de voyage:

  1. Une partie de la page est téléchargée à partir du réseau, ainsi que les ressources nécessaires.
  2. Le navigateur applique un style et met en page tout le contenu de la page, déterminer si le contenu est visible par l'utilisateur.
  3. Le navigateur revient à l'étape 1 jusqu'à ce que la page et toutes les ressources soient téléchargées.

Lors de l'étape 2, le navigateur traite l'ensemble du contenu à la recherche d'éléments susceptibles ont changé. Il met à jour le style et la mise en page de tout nouvel élément, ainsi que les éléments qui ont pu changer à la suite de nouvelles mises à jour. Il s'agit du rendu travail. Cela prend du temps.

Capture d'écran d'un blog de voyage.
Exemple de blog de voyage. Voir la démo sur Codepen

Voyons maintenant ce qui se passe si vous placez content-visibility: auto sur chacun des des articles individuels dans le blog. La boucle générale est la même : le navigateur télécharge et affiche des parties de la page. Toutefois, la différence réside dans le la quantité de travail qu’il effectue à l’étape 2.

Avec la visibilité du contenu, elle applique un style et une mise en page à tous les contenus actuellement visibles par l'utilisateur (ils sont à l'écran). Toutefois, lors du traitement qui est entièrement hors écran, le navigateur ignore le rendu et uniquement le style et la mise en page de la zone de l'élément elle-même.

Cette page se chargerait comme si elle s'affichait en plein écran. et des cases vides pour chacune des stories hors écran. Elle est très efficace avec une réduction attendue d'au moins 50% par rapport au coût de rendu chargement en cours. Dans notre exemple, nous observons une amélioration de la durée de rendu de 232 ms à 30 ms. Les performances sont multipliées par sept.

Que devez-vous faire pour en profiter ? Tout d'abord, nous Divisez le contenu en sections:

Capture d'écran annotée de la segmentation du contenu en sections avec une classe CSS.
Exemple de segmentation du contenu en sections avec la classe story appliquée, pour recevoir content-visibility: auto. Voir la démo sur Codepen

Ensuite, nous appliquons la règle de style suivante aux sections:

.story {
  content-visibility: auto;
  contain-intrinsic-size: 1000px; /* Explained in the next section. */
}

Spécifier la taille naturelle d'un élément avec contain-intrinsic-size

Pour profiter des avantages potentiels de content-visibility, le navigateur doit appliquer un confinement de la taille pour s'assurer que l'affichage des contenus n'affecte en aucune façon la taille de l'élément. Cela signifie que l'élément s'affichera comme s'il était vide. Si aucune hauteur n'est spécifiée pour l'élément dans une mise en page de blocs standard, sa hauteur est nulle.

Ce n'est peut-être pas idéal, car la taille de la barre de défilement change, qui dépend de chaque histoire ayant une hauteur non nulle.

Heureusement, le CSS fournit une autre propriété, contain-intrinsic-size, qui spécifie bien la taille naturelle de l'élément si celui-ci est affectées par le confinement de la taille. Dans notre exemple, nous le définissons sur 1000px une estimation de la hauteur et de la largeur des sections.

Cela signifie qu'il s'affiche comme s'il n'avait qu'un seul enfant de "taille intrinsèque" et des dimensions spécifiques. contain-intrinsic-size sert de taille d'espace réservé au lieu du contenu affiché.

Dans Chromium 98 et les versions ultérieures, un nouveau auto mot clé pour contain-intrinsic-size. Si spécifié, le navigateur se souviendra la dernière taille affichée, le cas échéant, et l'utiliser à la place de l'espace réservé fourni par le développeur la taille de l'image. Par exemple, si vous avez spécifié contain-intrinsic-size: auto 300px, de l'élément commence par une taille intrinsèque de 300px pour chaque dimension, mais une fois le contenu de l'élément est affiché, la taille intrinsèque affichée est conservée. Toute modification ultérieure de la taille de rendu est également mémorisée. En pratique, cela signifie que si vous faire défiler un élément avec content-visibility: auto appliqué, puis le faire défiler vers l'arrière hors écran, la largeur et la hauteur idéales sont automatiquement conservées, à la taille de l'espace réservé. Cette fonctionnalité est particulièrement utile pour les utilisateurs de défilement infini, qui permet désormais d'améliorer automatiquement l'estimation de la taille au fil du temps, à mesure que l'utilisateur explore la page.

Masquage du contenu avec content-visibility: hidden

Que faire si vous souhaitez conserver le contenu non affiché, que ce soit à l'écran ou non, tout en profitant des avantages de l'état de rendu mis en cache ? Saisissez: content-visibility: hidden

La propriété content-visibility: hidden offre les mêmes avantages que contenu non affiché et l'état d'affichage mis en cache, comme le fait content-visibility: auto en dehors de l'écran. Cependant, contrairement à auto, il ne commence pas automatiquement à s'affiche à l'écran.

Cela vous donne plus de contrôle, vous permettant de masquer le contenu d'un élément et plus tard, les réafficher rapidement.

Comparez ce comportement à d'autres méthodes courantes pour masquer le contenu d'un élément:

  • display: none: masque l'élément et détruit son état de rendu. Ce signifie que l'affichage de l'élément coûte autant que le rendu d'un nouvel élément avec même contenu.
  • visibility: hidden: masque l'élément et conserve son état de rendu. Cette opération ne supprime pas réellement l'élément du document, car il (et son sous-arbre) occupe toujours un espace géométrique sur la page et peut toujours être cliqué. Il met également à jour l'état de rendu à chaque fois que cela est nécessaire, même lorsqu'il est masqué.

En revanche, content-visibility: hidden masque l'élément préserver son état de rendu. Ainsi, si des modifications doivent être apportées se produisent uniquement lorsque l'élément est de nouveau affiché (c'est-à-dire lorsque content-visibility: hidden a été supprimée).

content-visibility: hidden est particulièrement utile pour implémenter des défileurs virtuels avancés et mesurer la mise en page. Ils sont également parfaits pour applications monopages (SPA). Les vues d'applications inactives peuvent être conservées dans le DOM avec content-visibility: hidden a appliqué pour empêcher son affichage, mais conserver son mis en cache. La vue s'affiche ainsi rapidement lorsqu'elle est réactivée.

Effets sur l'interaction avec le prochain rendu (INP)

INP est une métrique qui évalue la capacité d'une page à répondre de manière fiable aux entrées utilisateur. La réactivité peut être affectée par toute quantité excessive de travail effectuée sur le thread principal, y compris le travail de rendu.

Chaque fois que vous pouvez réduire la charge de travail d'affichage sur une page donnée, vous donnez au thread principal la possibilité de répondre plus rapidement aux entrées utilisateur. Cela inclut le travail de rendu. L'utilisation de la propriété CSS content-visiblity, le cas échéant, peut réduire le travail de rendu, en particulier au démarrage, lorsque la plupart des tâches de rendu et de mise en page sont effectuées.

La réduction du travail de rendu a un impact direct sur l'INP. Lorsque les utilisateurs tentent d'interagir avec une page qui utilise correctement la propriété content-visibility pour différer la mise en page et l'affichage des éléments hors écran, vous donnez au thread principal la possibilité de répondre aux tâches essentielles visibles par l'utilisateur. Cela peut améliorer l'INP de votre page dans certains cas.

Conclusion

content-visibility et la spécification CSS Containment Spec offrent des performances intéressantes des boosts dans votre fichier CSS. Pour en savoir plus sur ces consultez les ressources suivantes: