Be Yours a la capacité de rendre le chargement de la page initiale beaucoup plus rapide.
Sur cette page
Le mécanisme
En règle générale, le navigateur affiche presque tous les éléments d'une page. Même lorsque vous êtes en haut, les parties en bas de la page sont toujours impliquées.
Mais plus maintenant, il existe une nouvelle propriété CSS appelée content-visibility . Vous souhaiterez peut-être ignorer ces terminologies complexes. Pour visualiser, la technique ignore le rendu des éléments de la page jusqu'à ce qu'ils soient sur le point d'apparaître. Cette capacité est désormais intégrée à Be Yours. Nous pouvons demander au navigateur de différer le travail de rendu de certains segments de page, comme les sections à forte mise en page, et de ne les restituer que lorsqu'ils sont sur le point d'être visibles.
Dans notre démo, l'application de content-visibility aux sections de la page d'accueil permet d'augmenter les performances de rendu 5 fois lors du chargement initial.
Avantages et inconvénients
Évidemment, cela permet de réduire le coût de rendu des longues pages sans interrompre la recherche sur la page ou le référencement. Imaginez que vous ayez une boutique dropshipping et de nombreuses sections sur la page d'accueil représentant des produits ou des collections ; ou une sorte de magasin vitrine dont la page de destination est remplie de nombreuses images, et la technique est bénéfique dans ces cas-là.
Cependant, cette technique comporte également ses limites et ses bugs. Si vous faites défiler la page, vous verrez que la barre de défilement apparaît plutôt irrégulière, c'est-à-dire que le contenu de la page s'adapte au nouveau contenu rendu. Et comme les éléments non rendus perdent de leur hauteur dans la mise en page, vous pouvez parfois voir le contenu apparaître un peu en retard lors du défilement de la souris.
Il est également important de noter que cette technique n’est pas totalement compatible. Il n'est actuellement pas pris en charge sur Firefox et Interner Explorer :
