Be Yours ha la capacità di caricare la pagina iniziale molto più velocemente.
Su questa pagina
Il meccanismo
In genere, il browser esegue il rendering di quasi tutti gli elementi di una pagina. Anche quando sei in cima, le parti in fondo alla pagina sono comunque coinvolte.
Ma ora non più, c'è una nuova proprietà CSS in città chiamata content-visibility . Potresti voler ignorare queste terminologie complesse. Per visualizzare, la tecnica salta il rendering degli elementi della pagina finché non stanno per entrare nella tua visualizzazione. Questa capacità è ora integrata in Be Yours. Possiamo dire al browser di rinviare il lavoro di rendering di determinati segmenti di pagina, come le sezioni con un layout pesante, e di renderli solo quando stanno per essere visibili.
Nella nostra demo, l'applicazione content-visibility alle sezioni della home page offre un aumento delle prestazioni di rendering 5 volte al caricamento iniziale.
Pro e contro
Ovviamente, questo aiuta a ridurre il costo di rendering di pagine lunghe senza compromettere la ricerca in-page o il SEO. Immagina di avere un negozio dropshipping e tante sezioni in home page che rappresentano prodotti o collezioni; oppure una sorta di negozio vetrina la cui landing page è piena di immagini, e la tecnica è vantaggiosa in questi casi.
Tuttavia, questa tecnica presenta anche limiti e bug. Se scorri la pagina, vedrai che la barra di scorrimento appare piuttosto frastagliata, significa che il contenuto della pagina si adatta al nuovo contenuto visualizzato. E poiché gli elementi non renderizzati perdono la loro altezza nel layout, a volte puoi vedere che il contenuto appare un po' lento mentre il mouse scorre.
È anche importante notare che questa tecnica non è completamente compatibile. Al momento non è supportato su Firefox e Internet Explorer:
