Améliorez le temps de chargement initial en ignorant l'affichage du contenu hors écran.
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](https://web.dev/static/articles/content-visibility/image/demo-figures.jpg?authuser=6&hl=fr)
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
content-visibility
s'appuie sur des primitives dans le contenu CSS.
Spécification. Alors que content-visibility
est seulement
compatible avec Chromium 85 pour le moment (et "valeur
"prototypage" pour
Firefox), la spécification de confinement est prise en charge dans la plupart des
des navigateurs.
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 comme un ensemble de contenu, ce qui permet aux navigateurs de raisonner sur le contenu avoir besoin de prendre en compte l'état en dehors de la sous-arborescence. 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
: le confinement de la taille d'un élément garantit que la zone de l'élément peut être 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.
À l'inverse, les éléments point de repère avec des caractéristiques de style telles que display: none
ou visibility: hidden
apparaissent également dans l'arborescence d'accessibilité lorsqu'ils sont hors écran, car le navigateur n'affiche pas ces styles tant qu'ils n'entrent pas dans la fenêtre d'affichage. 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
content-visibility: auto
à des zones découpé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:
- Une partie de la page est téléchargée depuis le réseau, ainsi que tout ressources.
- 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.
- Le navigateur revient à l'étape 1 jusqu'à ce que toutes les pages et ressources soient téléchargée.
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.](https://web.dev/static/articles/content-visibility/image/a-screenshot-a-travel-bl-d12bedce7d152.jpg?authuser=6&hl=fr)
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
blocs 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 constatons un temps de rendu de 232 ms Délai d'affichage de 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.](https://web.dev/static/articles/content-visibility/image/an-annotated-screenshot-9dac5c2e32b01.jpg?authuser=6&hl=fr)
story
appliquée, pour recevoir content-visibility: auto
. Voir la démonstration sur CodepenEnsuite, 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 du 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.
Masquer du contenu avec content-visibility: hidden
Que faire si vous souhaitez que le contenu ne s'affiche pas
s'affiche à l'écran, tout en tirant parti des avantages de l'état d'affichage 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. Ce ne supprime pas vraiment l'élément du document, car il (et c'est sa sous-arborescence) occupe toujours un espace géométrique sur la page et il est toujours possible de cliquer dessus. 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).
Voici quelques cas d'utilisation intéressants de content-visibility: hidden
lors de l'implémentation
des outils de défilement 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 la peinture suivante (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 les tâches excessives effectuées sur le thread principal, y compris le travail d'affichage.
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 rendu. L'utilisation de la propriété CSS content-visiblity
, le cas échéant, peut réduire les tâches d'affichage, en particulier au démarrage, lorsque la plupart des tâches d'affichage et de mise en page sont effectuées.
La réduction du travail de rendu a un effet direct sur 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: