I file CSS sono risorse che bloccano il rendering, come rimuovere CSS inutilizzato e rinviare CSS non critico

Per impostazione predefinita, un browser deve scaricare, analizzare ed elaborare tutti i fogli di stile esterni che incontra prima di poter visualizzare o eseguire il rendering di qualsiasi contenuto sullo schermo.

Non avrebbe senso che un browser tenti di visualizzare il contenuto prima che i fogli di stile siano stati elaborati, perché i fogli di stile potrebbero contenere regole che influenzano lo stile della pagina.
In questa guida, imparerai come rinviare i CSS non critici con l’obiettivo di ottimizzare il percorso di rendering critico e migliorare il First Contentful Paint (FCP)

---

Per approfondire ti consigliamo Critical Rendering Path è il processo sequenziale del browser

Per comprenderne il funzionamento prendiamo in esame l’uso di un tag <link>:

<link href="style.css" rel="stylesheet">

Questo ci informa della presenza di un file esterno nominato style.css memorizzato separatamente dall’HTML, ogni file esterno deve essere prima scaricato dalla rete per far continuare il parsing* della pagina, aumentando cosi il tempo di apertura della pagina web.

Il CSS non utilizzato rallenta anche la costruzione di un albero di rendering del browser.
L’albero di rendering è come l’albero DOM, con in più l’inclusione degli stili per ciascun nodo. Per costruire l’albero di rendering, un browser deve percorrere l’intero albero DOM e verificare quali regole CSS si applicano a ciascun nodo, per questo un CSS inutilizzato fà perdere più tempo al browser nel calcolo degli stili di ciascun nodo.

---

*parsing: In informatica, il parsing, analisi sintattica o parsificazione è un processo che analizza un flusso continuo di dati in ingresso (input, letti per esempio da un file o una tastiera) in modo da determinare la correttezza della sua struttura grazie ad una data grammatica formale. Un parser è un programma che esegue questo compito.

CSS critico e CSS non critico

• Il CSS necessario per caricare una pagina è chiamato CSS critico. In generale, il caricamento di una pagina dovrebbe essere bloccato solo sui CSS critici, l’approccio più ottimale è quello di integrare direttamente i CSS critici nel HEAD dell’HTML. Una volta scaricato l’HTML, un browser ha tutto ciò di cui ha bisogno per visualizzare la pagina. Non ha bisogno di fare altre richieste di rete.
• Il CSS non critico è tutto quel CSS che potrebbe necessitare in seguito dopo l’apertura della pagina. Ad esempio, supponiamo di fare clic su un pulsante per far apparire una form. Il form appare solo dopo aver cliccato sul pulsante. Le regole di stile della form non sono critiche, poiché la form non verrà mai visualizzata quando la pagina viene caricata per la prima volta.

Utilizzando la scheda Copertura del DevTools presente sul browser possiamo scoprire CSS critici e non critici

1. 1. Premi Comando + Maiusc + P (Mac) o Control + Maiusc + P (Windows, Linux, Chrome OS) mentre DevTools è attivo per aprire il menu dei comandi.
   2. Inizia a digitare la coverage e seleziona Mostra copertura . Viene visualizzata la scheda Copertura.
      

      

   3. Fai clic su   . La pagina verrà ricaricata e la scheda Copertura ti fornirà una panoramica della quantità di CSS (e JavaScript) utilizzati da ciascun file caricato dal browser.
   4. la barra verde rappresenta la quantità di CSS usato. Il rosso rappresenta il CSS non utilizzato.
   5. Fare clic su un file CSS per visualizzare una suddivisione riga per riga di ciò che nel file CSS viene utilizzato di colore verde (CSS critico) e ciò che non viene utilizzato di colore rosso (CSS non critico).

   

   La soluzione: Inserisci il CSS critico inline e utilizza le Media Query, rinvia il CSS non critico

   CSS critico inline

   Incorpora gli stili critici richiesti per il first contentful paint all’interno di un blocco <style> all’inizio della pagina HTML.

   <style type="text/css"> .nome-classe{background-color:#ADD8E6;color:#444;} </style>

   Media Query

   Una media query è costituita da un media type e da zero o più espressioni che controllano le condizioni di quelle particolari funzioni media.

   Vediamone 5 tipici utilizzi

   1. La nostra prima dichiarazione del foglio di stile non fornisce alcun media type o media query, dunque sarà applicata in tutti i casi, questo per dire che bloccherà sempre il rendering.

      <link href="style.css" rel="stylesheet">

   2. Anche la seconda dichiarazione blocca il rendering: “all” è il tipo predefinito e se non specifichi alcun tipo, sarà implicitamente impostato su “all”.

      <link href="style.css" rel="stylesheet" media="all">

   3. La terza dichiarazione presenta una media query dinamica che verrà valutata quando viene caricata la pagina. A seconda dell’orientamento del dispositivo quando la pagina viene caricata, portrait.css potrebbe bloccare il rendering o meno.

      <link href="portrait.css" rel="stylesheet" media="orientation:portrait">

   4. La dichiarazione del quarto foglio di stile viene applicata solo quando la pagina viene stampata, dunque non blocca il rendering quando la pagina viene caricata per la prima volta nel browser.

      <link href="print.css" rel="stylesheet" media="print">

   5. Infine, l’ultima dichiarazione del foglio di sitle fornisce una “media query” che viene eseguita dal browser: se le condizioni corrispondono, allora il browser bloccherà il rendering finché il foglio di stile non viene scaricato ed elaborato.

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

   CSS non critico

   Rimandando i CSS non critici ad un caricamento successivo utilizzando un collegamento di preload.

   <link rel="preload" href="styles.css" as="style" 
   onload ="this.onload=null;this.rel='stylesheet'"> 
   <noscript><link rel="stylesheet" href="styles.css"></noscript>
   

   ---

   Prendi in considerazione l’idea di automatizzare il processo di estrazione e integrazione del CSS “Above the Fold” utilizzando il Critical Tool.