CSS che blocca il rendering

Ilya Grigorik
Ilya Grigorik

Per impostazione predefinita, il codice CSS viene considerato come una risorsa di blocco della visualizzazione, il che significa che il browser non eseguirà il rendering dei contenuti elaborati fino alla creazione del CSSOM. Assicurati che il tuo CSS sia snello, pubblichilo il più rapidamente possibile e utilizza query e tipi di contenuti multimediali per sbloccare il rendering.

Durante la costruzione dell'albero di rendering, abbiamo visto che il percorso di rendering critico richiede sia il DOM sia il CSSOM per creare l'albero di rendering. Ciò crea un'importante implicazione sulle prestazioni: sia HTML che CSS sono risorse di blocco della visualizzazione. L'HTML è ovvio, poiché senza il DOM non avremmo nulla da visualizzare, ma il requisito CSS potrebbe essere meno ovvio. Cosa succede se proviamo a eseguire il rendering di una pagina tipica senza bloccare il rendering su CSS?

Riepilogo

  • Per impostazione predefinita, il file CSS viene considerato come una risorsa di blocco della visualizzazione.
  • I tipi di contenuti multimediali e le query supporti ci consentono di contrassegnare alcune risorse CSS come blocco senza visualizzazione.
  • Il browser scarica tutte le risorse CSS, indipendentemente dal comportamento che blocchi o non lo bloccano.
NYTimes con CSS
The New York Times con CSS
NYTime senza CSS
The New York Times senza CSS (FOUC)

L'esempio riportato sopra, che mostra il sito web del NYTimes con e senza CSS, dimostra perché il rendering è bloccato finché il codice CSS non è disponibile. Senza il codice CSS la pagina è relativamente inutilizzabile. L'esperienza sulla destra è spesso definita "Flash di contenuti senza stile" (FOUC). Il browser blocca il rendering finché non ha sia il DOM sia il CSSOM.

CSS è una risorsa di blocco della visualizzazione. Presentala al cliente il prima e il più rapidamente possibile per ottimizzare i tempi di rendering iniziale.

Tuttavia, cosa succede se alcuni stili CSS vengono utilizzati solo in determinate condizioni, ad esempio quando la pagina viene stampata o proiettata su un grande monitor? Sarebbe bello se non dovessimo bloccare il rendering su queste risorse.

I "tipi di media" e le "query supporti" CSS ci consentono di esaminare i seguenti casi d'uso:

<link href="style.css" rel="stylesheet" />
<link href="print.css" rel="stylesheet" media="print" />
<link href="other.css" rel="stylesheet" media="(min-width: 40em)" />

Una query multimediale è composta da un tipo di elemento multimediale e da una o più espressioni che verificano le condizioni di particolari funzionalità multimediali. Ad esempio, la nostra prima dichiarazione del foglio di stile non fornisce una query o un tipo di supporto, quindi viene applicata a tutti i casi, ossia si tratta sempre di un blocco del rendering. D'altra parte, la seconda dichiarazione del foglio di stile è valida solo quando i contenuti vengono stampati. Ad esempio, potresti voler riorganizzare il layout, cambiare i caratteri e così via. Pertanto, questa dichiarazione del foglio di stile non deve bloccare il rendering della pagina al primo caricamento. Infine, l'ultima dichiarazione del foglio di stile fornisce una "media query", che viene eseguita dal browser: se le condizioni corrispondono, il browser blocca il rendering fino a quando il foglio di stile non viene scaricato ed elaborato.

Utilizzando le query supporti, possiamo personalizzare la presentazione in base a casi d'uso specifici, ad esempio display o stampa, nonché a condizioni dinamiche come cambiamenti nell'orientamento dello schermo, eventi di ridimensionamento e altro ancora. Quando dichiari gli asset del foglio di stile, presta particolare attenzione al tipo di contenuti multimediali e alle query, poiché incidono notevolmente sulle prestazioni del percorso di rendering critico.

Vediamo alcuni esempi pratici:

<link href="style.css" rel="stylesheet" />
<link href="style.css" rel="stylesheet" media="all" />
<link href="portrait.css" rel="stylesheet" media="orientation:portrait" />
<link href="print.css" rel="stylesheet" media="print" />
  • La prima dichiarazione è il blocco della visualizzazione e le corrispondenze in tutte le condizioni.
  • Anche la seconda dichiarazione blocca il rendering: "all" è il tipo predefinito, quindi se non specifichi nessun tipo, sarà implicitamente impostato su "all". Di conseguenza, la prima e la seconda dichiarazione sono effettivamente equivalenti.
  • La terza dichiarazione contiene una query supporti dinamica che viene valutata quando la pagina viene caricata. A seconda dell'orientamento del dispositivo durante il caricamento della pagina, portrait.css potrebbe bloccare o meno la visualizzazione.
  • L'ultima dichiarazione viene applicata solo quando la pagina viene stampata, quindi non blocca il rendering quando la pagina viene caricata per la prima volta nel browser.

Infine, tieni presente che per "blocco della visualizzazione" si intende soltanto se il browser deve mantenere il rendering iniziale della pagina su quella risorsa. In entrambi i casi, il browser scarica comunque l'asset CSS, anche se con una priorità inferiore per le risorse che non bloccano la visualizzazione.

Feedback