Data di pubblicazione: 30 ottobre 2024
L'introduzione di Interaction to Next Paint (INP) come metrica di Core Web Vitals all'inizio del 2024 ha suscitato un maggiore interesse per le prestazioni di rendering. Una parte dell'INP si concentra sul tempo necessario al browser per dipingere il frame successivo dopo che un utente avvia un'interazione con la pagina. Mantenere basso l'INP del tuo sito web significa che gli utenti avranno la sensazione che il sito risponda alle loro interazioni nel modo più rapido e fluido possibile.
È importante anche il lavoro di rendering che deve essere eseguito durante il caricamento di una pagina, che ha il potenziale di ritardare le interazioni fin dall'inizio. Vale la pena trovare modi per ridurre la quantità di lavoro che si verifica durante questa parte cruciale del ciclo di vita della pagina. La proprietà content-visibility del CSS è uno dei modi per raggiungere questo obiettivo e siamo lieti di annunciare che da settembre 2024 è diventata Nuova disponibilità di base di riferimento.
content-visibility è una proprietà CSS che indica allo user agent di posticipare il rendering degli elementi finché non si avvicinano al viewport. Per le pagine con molti elementi DOM, questo può essere utile, in quanto il caricamento iniziale di una pagina avvierà meno attività di rendering. Il lavoro viene eseguito appena prima che l'utente debba visualizzarlo.
content-visibility: auto alle aree di contenuti suddivise in blocchi consente di migliorare le prestazioni di rendering di 7 volte al caricamento iniziale. Per saperne di più, continua a leggere quanto segue.
Per attivare questa ottimizzazione per gli elementi fuori dallo schermo, applica la regola content-visibility: auto al CSS del tuo sito web:
.render-me-later {
content-visibility: auto;
}
content-visibility funziona in base ad alcuni dei comportamenti definiti per la proprietà contain nel contenimento CSS. Lo scopo del contenimento CSS è fornire isolamento a parti dell'albero DOM. In questo modo, le operazioni di rendering vengono limitate a una parte specifica dell'albero DOM, quindi il layout viene invalidato e rielaborato solo per un sottoinsieme dell'albero DOM. Sebbene l'applicazione di questa tecnica per il rendimento del rendering richieda una buona conoscenza dei vari valori della proprietà contain e di come utilizzarli in modo efficace,
Quando content-visibility: auto viene applicato agli elementi, questi assumono automaticamente alcune delle proprietà fornite dalla proprietà contain. Di conseguenza, gli elementi interessati verranno inizialmente visualizzati con un'altezza di 0px, il che significa che non vengono visualizzati.
Tuttavia, questo ha alcuni effetti collaterali. Ad esempio, la barra di scorrimento della pagina può spostarsi e cambiare altezza mentre l'utente scorre verso elementi non visualizzati in precedenza che vengono visualizzati appena in tempo per essere visti dall'utente. Per attenuare questo problema, applica la proprietà contain-intrinsic-size.
Poiché content-visibility è di recente disponibile come riferimento, potresti avere dei dubbi sugli utenti con browser che non sono ancora stati aggiornati per utilizzare la nuova proprietà. Dato che content-visibility è una proprietà CSS, non dovresti preoccuparti troppo. I browser che la supportano la useranno, mentre quelli che non la supportano no. Ciò significa che, a parte i vantaggi in termini di prestazioni che otterresti dai browser che supportano content-visibility, puoi aspettarti che le pagine funzionino in gran parte allo stesso modo.
content-visibility offre un vantaggio additivo e, se puoi utilizzarlo per ridurre il lavoro di rendering durante il caricamento della pagina, ti consigliamo di utilizzarlo per fare in modo che le pagine abbiano a disposizione la massima potenza di elaborazione possibile quando ne hanno più bisogno. Ora che questa utile funzionalità è disponibile come Base di riferimento, non esitare a utilizzarla, in modo che gli utenti possano trarre vantaggio dal lavoro di rendering evitato fino a quando non sarà necessario.