Gli utenti adorano le app Web veloci. Si aspettano che la pagina si carichi velocemente e funzioni senza problemi. Se ci sono animazioni interrotte o ritardi durante lo scorrimento, c'è un'alta probabilità che gli utenti abbandonino il tuo sito web.

In qualità di sviluppatore, potresti fare molte cose per migliorare l'esperienza dell'utente. Questo articolo si concentrerà su 4 suggerimenti CSS che puoi utilizzare per migliorare la velocità di rendering della pagina.

1. Content-visibility

In generale, la maggior parte delle app Web ha elementi dell'interfaccia utente complessi e si espande oltre ciò che l'utente vede nella visualizzazione del browser. In tali occasioni, possiamo utilizzare la classe

content-visibility

per saltare il rendering dello stesso fuori schermo. Ciò ridurrà drasticamente il tempo di rendering della pagina se hai una grande quantità di contenuto fuori dallo schermo.

Questa funzione è una delle ultime aggiunte e è una delle funzionalità di maggior impatto per migliorare le prestazioni di rendering. Sebbene content-visibility accetti diversi valori, possiamo usare content-visibility: auto; su un elemento per ottenere miglioramenti immediati delle prestazioni.

Consideriamo la pagina seguente che contiene molte schede con informazioni diverse. Mentre circa 12 carte si adattano allo schermo, ci sono circa 375 carte nell'elenco. Come puoi vedere, il browser ha impiegato 1037 ms per visualizzare questa pagina.

Pagina HTML normale

Come passaggio successivo, puoi aggiungere

content-visibility

a tutte le schede.
In questo esempio, dopo aver aggiunto la visibilità del contenuto alla pagina, il tempo di rendering è sceso a 150 ms. Si tratta di un miglioramento delle prestazioni di oltre 6 volte.

Con content-visibility

Come puoi vedere, la visibilità del contenuto è piuttosto potente e molto utile per migliorare il tempo di rendering della pagina. Secondo le cose di cui abbiamo discusso finora, devi pensarlo come un proiettile d'argento per il rendering delle pagine.

Limitazioni della visibilità dei contenuti

Tuttavia, ci sono poche aree in cui la visibilità dei contenuti cade a pezzi. Voglio evidenziare due punti da considerare.
Questa funzione è ancora sperimentale.

A partire da questo momento, Firefox (versioni per PC e Android), Internet Explorer (non credo abbiano intenzione di aggiungerlo a IE) e Safari (Mac e iOS) non supportano la visibilità dei contenuti.

Problemi relativi al comportamento della barra di scorrimento.

Poiché gli elementi vengono inizialmente renderizzati con un'altezza di 0 px, ogni volta che scorri verso il basso, questi elementi vengono visualizzati sullo schermo. Verrà eseguito il rendering del contenuto effettivo e l'altezza dell'elemento verrà aggiornata di conseguenza. Ciò renderà la barra di scorrimento a un comportamento involontario.

Comportamento di scorrimento con visibilità del contenuto

Per risolvere il problema della barra di scorrimento, puoi utilizzare un'altra proprietà CSS chiamata contain-intrinsic-size. Specifica la dimensione naturale di un elemento. Pertanto l'elemento verrà renderizzato con l'altezza data invece di 0px.

Tuttavia, durante la sperimentazione, ho notato che anche con la dimensione containt-intrinsic-size, se abbiamo un numero elevato di elementi con content-visibility impostata su auto, avrai ancora problemi con la barra di scorrimento più piccoli.

Pertanto, il mio consiglio è di pianificare il layout, scomporlo in alcune sezioni e quindi utilizzare la visibilità del contenuto su quelle sezioni per un migliore comportamento della barra di scorrimento.

Suggerimento: condividi i tuoi componenti riutilizzabili tra i progetti utilizzando Bit (Github).

Bit semplifica la condivisione, la documentazione e il riutilizzo di componenti indipendenti tra i progetti. Usalo per massimizzare il riutilizzo del codice, mantenere un design coerente, collaborare come un team, velocizzare la consegna e creare app scalabili.

Bit supporta Node, React Native, React, Vue, Angular e altro.
 

Esempio: componenti React condivisi su Bit.dev

2. Proprietà Will-change

Le animazioni sul browser non sono una novità. Di solito, queste animazioni vengono renderizzate regolarmente con altri elementi. Tuttavia, i browser ora possono utilizzare la GPU per ottimizzare alcune di queste operazioni di animazione.

Quello che succede sotto è che il browser creerà un livello separato per l'elemento. Successivamente, delega il rendering di quell'elemento alla GPU insieme ad altre ottimizzazioni. Ciò si tradurrà in un'animazione più fluida poiché l'accelerazione GPU prende il sopravvento sul rendering dell'animazione.

Considera la seguente classe CSS:

Durante il rendering dello snippet di cui sopra nel browser, riconoscerà la proprietà di modifica e ottimizzerà le modifiche future relative all'opacità.

Senza usare will-change

Con will-change;

Quando non usare il will-change

Sebbene will-change  abbia lo scopo di migliorare le prestazioni, può anche degradare le prestazioni dell'app Web se la usi in modo improprio.

L'uso di will-change indica che l'elemento cambierà in futuro.

Quindi, se provi a utilizzare will-change insieme a un'animazione contemporaneamente, non otterrai l'ottimizzazione. Pertanto, si consiglia di utilizzare il cambio di volontà sull'elemento genitore e l'animazione sull'elemento figlio.

.my-class{
  will-change: opacity;
}.child-class{
  transition: opacity 1s ease-in-out;
}

Non utilizzare elementi che non si animano.

Quando si utilizza will-change su un elemento, il browser cercherà di ottimizzarlo spostando l'elemento in un nuovo livello e consegnando la trasformazione alla GPU. Se non hai nulla da trasformare, si tradurrà in uno spreco di risorse.

Un'ultima cosa da tenere a mente è che è consigliabile rimuovere il cambio di volontà da un elemento dopo aver completato tutte le animazioni.

3. Riduzione del tempo di blocco del rendering

Oggi, molte app Web devono soddisfare molti fattori di forma, inclusi PC, tablet e telefoni cellulari, ecc. Per ottenere questa natura reattiva, dobbiamo scrivere nuovi stili in base alle dimensioni dei supporti. Quando si tratta del rendering della pagina, non è possibile avviare la fase di rendering fino a quando il

CSS Object Model (CSSOM) è pronto. A seconda dell'applicazione web, potresti avere un foglio di stile di grandi dimensioni che soddisfa tutti i fattori di forma del dispositivo.

 Singolo foglio di stile

Dopo averlo scomposto in più fogli di stile:

Come puoi vedere, avere fogli di stile scomposti in base a fattori di forma può ridurre il tempo di blocco del rendering.

4. Evitare @import per includere più fogli di stile

Con @import, possiamo includere un foglio di stile in un altro foglio di stile. Quando stiamo lavorando a un progetto di grandi dimensioni, avere @import rende il codice più pulito.

# style.css
@import url("windows.css");# windows.css
@import url("componenets.css");

Invece di usare @import, possiamo ottenere lo stesso risultato con prestazioni molto migliori avendo più collegamenti in quanto ci consente di caricare fogli di stile in parallelo.

Cascata con collegamento

Conclusione

Oltre alle 4 aree che abbiamo discusso in questo articolo, ci sono pochi altri modi in cui possiamo usare i CSS per migliorare le prestazioni della pagina web. Una delle recenti funzionalità dei CSS, la visibilità dei contenuti, sembra così promettente negli anni a venire in quanto offre un aumento delle prestazioni multiplo con il rendering delle pagine.

La cosa più importante è che abbiamo ottenuto tutte le prestazioni senza scrivere una singola dichiarazione di JavaScript.