Front End
css content-visibility per ottimizzare i tempi di caricamento

Nuova proprietà css content visibility

Frank Vessia
20 ott 2020
Foto: Luca Campioni | Unsplash
Tempo di lettura: 3 minuti, 22 secondi

Nascondere i contenuti non renderizzati per velocizzare i tempi di caricamento.


L'ottimizzazione dei tempi di caricamento ha un grande impatto sulle performance e sull'accessibilità del nostro sito anche a livello SEO, un sito velocissimo con un caricamento immediato giova da diversi punti di vista, mantiene l'utente sul sito e nel caso si debba generare delle conversioni, ne aumenta le percentuali di successo.

Molti sviluppatori web perdono le notti nel cercare di ottimizzare i siti dei clienti, alla ricerca di quei millisecondi persi qua e la, tra compressioni estreme di immagini, unificazioni e minificazioni di javascript e piccoli tweaks lato server e file htaccess.
Ma ci sono anche altre cose che si possono fare e oggi vediamo una bella proprietà css uscita da poco, ovvero il content-visibility. Come da documentazione ufficiale questa (supportata da Chromium 85+ e in fase di considerazione da parte di Firefox) permette di non renderizzare un blocco html se questo non è visibile, quindi fuori dallo schermo, impattando di conseguenza i tempi iniziali di caricamento della pagina. L'impostazione classica di questa proprietà è content-visibility:auto.

Come funziona

In pratica lo user agent viene istruito attraverso questa proprietà a non renderizzare una porzione della pagina come se avesse visibility:hidden impostato e senza neanche rispondere a eventi di puntamento. Questa proprietà anche se funziona in modo autonomo, si basa sul modulo CSS Containment che stabilisce il modo in cui un blocco viene considerato, se indipendente o meno in relazione agli altri elementi html o annidati al suo interno, proprio per ottimizzare i tempi di caricamento o altre impostazioni grafiche, gestito attraverso la proprietà contain.

Il content visibility non fa altro che automatizzare l'applicazione della proprietà contain, impostando infatti content-visibility:auto ereditiamo il contain layout, style e paint che fanno si che gli elementi annidati all'interno del contentitore non influiscano sul contenitore stesso, anche a livello di dimensioni, inoltre se fuori dallo schermo non verranno renderizzati, acquisendo anche l'opzione size di contain. Man mano che un utente scrolla, il contenuto perderà l'opzione size e verrà renderizzato in tempo per essere visto.

Proprietà css content-visibility autoCon questa sola proprietà css quindi possiamo ottimizzare di parecchio il caricamento di una pagina definendo cosa non è strettamente necessario in prima battuta.

Nella pratica dovremmo studiare il nostro layout considerando un percorso di lettura, pensa ad un post di un blog che potrebbe essere molto lungo e contenere molte immagini (anche le eventuali immagini incluse ne beneficiano), sarebbe cosa buona suddividere il contenuto in diversi blocchi e applicare il content-visibility:auto in modo da renderizzare i vari blocchi man mano che vengano letti dall'utente.

Attenzione alle dimensioni

C'è però un aspetto molto importante da considerare che impatta l'usabilità del sito. Come detto prima il nostro elemento non renderizzato prende anche la proprietà size del contain, questa oltre ad ottenere i benefici sù citati dice all'elemento di non considerare le dimensioni degli elementi annidati, per cui il nostro blocco che risulterà non visibile e quindi vuoto, avrà dimensioni pari a 0. Il tutto si riproduce con spiacevoli comportamenti della barra di scorrimento che dovrà ricalcolare la dimensione del blocco quando sarà di nuovo visibile.

Come risolviamo il problema? Ci viene in aiuto un'altrà proprietà chiamata contain-intrinsic-size che appunto ci permette di definire una dimensione naturale del blocco che ha contain:size impostato, comportandosi quasi fosse un placeholder. Ovviamente la dimensione dovrà essere approssimativa, non potrà essere calcolata al volo, ma sicuramente risolve il problema della barra di scorrimento.

Ecco quindi un esempio di stile completo applicato ad un elemento che vogliamo non venga renderizzato da subito:

.reading-block {
    content-visibility: auto;
    contain-intrinsic-size: 800px;
}

Un'altra opzione del content-visibility è anche hidden, in questo caso il blocco sarà sempre non visualizzto, che sia a schermo oppure no, pur preservando il suo stato di renderizzazione (a differenza di un classico display:none), dandoci la possibilità di visualizzarlo a nostro piacimento e solo in determinati casi, un esempio su tutti è uno scroller realizzato in javascript magari con un effetto fading, quindi un evento non predefinito del browser ma controllato da noi.

Conclusioni


Per altri approfondimenti puoi leggere l'articolo scritto su Google Web Dev a questo indirizzo.