Critical CSS in 3 semplici passaggi
- Inserisci l'URL della pagina per cui vuoi creare il critical CSS
- Incolla il risultato in un tag <style> nella pagina, subito sotto <title>
- Differisci il caricamento dei fogli di stile originali
<link rel = "preload" href = "orig.css" type = "text / css" as = "style" onload = "this.onload = null; this.rel = 'stylesheet' ; "/>
Cos'è il critical CSS
Il critical CSS è un insieme di dichiarazioni CSS usate per il rendering del viewport visibile. Il viewport visibile viene spesso definito 'contenuto above the fold': è la parte della pagina web visibile nel browser senza dover scorrere. Dato che il viewport visibile è la prima cosa che vede un visitatore, devi dare priorità al suo rendering. Il critical CSS serve proprio a questo!
Perché usare il critical CSS
In breve: perché è molto più veloce! Il CSS del critical path (above-the-fold) è una delle tecniche più importanti ed efficaci per ottimizzare la delivery del CSS. Per come funzionano tutti i browser moderni, gli stili dei file esterni sono considerati render blocking. Questo significa che il browser non avvia il rendering (nello specifico, non genera il render tree) finché non ha scaricato tutti i file CSS esterni nell'head della pagina. Quando il browser deve scaricare uno o più file CSS, la pagina può facilmente rimanere bloccata per 100ms o più. Google PageSpeed Insights consiglia di eliminare le risorse render blocking per velocizzare il caricamento della pagina.
Un modo per evitarlo è usare il critical CSS. Il critical CSS è l'insieme di stili necessario per mostrare solo la parte visibile della pagina. In genere questo critical CSS viene inserito inline nell'head della pagina. Di conseguenza, il browser non deve scaricare uno o più file CSS prima di avviare il rendering. Nel frattempo, mentre la pagina viene mostrata, il browser scarica i file CSS completi in background.
Come si usa il generatore di critical CSS?
Prima di tutto devi generare il critical path CSS per la pagina. Inserisci l'URL della pagina e premi 'Genera critical CSS'. Dopo pochi secondi vedrai il CSS estratto
Copia quel CSS e inseriscilo nell'<head> della pagina in un tag <style>, subito sotto <title>
Il passaggio successivo consiste nel differire il CSS originale. Esistono 3 metodi per differire il CSS.
- Fai il preload del CSS e sostituisci il rel al caricamento
- Carica il CSS con media=print e sostituisci l'attributo media al caricamento
- Inserisci i link al CSS originale nel footer della pagina
Caching del CSS non critico
Il critical CSS è velocissimo per i nuovi visitatori che non hanno ancora i file CSS salvati nella cache del browser. Per i visitatori di ritorno di solito serve a poco, dato che i file CSS possono essere caricati direttamente dalla cache del browser.
Conviene unire i fogli di stile?
Dopo aver implementato il critical CSS, unire i fogli di stile rende la pagina più veloce? Non c'è una risposta semplice. A volte unire i fogli di stile è più veloce, altre volte no. Dipende dal critical rendering path. Se ci sono più di 5 risorse ad alta priorità, di solito ha senso unire alcuni fogli di stile.
Come funziona il generatore di critical CSS?
Il generatore di critical CSS funziona su una piattaforma NodeJs personalizzata. Visitiamo la pagina web con un vero browser basato su Chrome. Valutiamo il sito su diversi viewport e determiniamo quali parti dei fogli di stile servono per il rendering del viewport visibile (la parte visibile della pagina). Poi ripuliamo e minifichiamo il CSS necessario per il rendering.
Esiste un plugin WordPress per il generatore di critical CSS?
Sì. Si chiama plugin Core Web Vitals ed è progettato appositamente per funzionare con il nostro estrattore del critical path.
Feedback / stato beta
Attualmente il generatore di critical CSS è in stato beta. Questo significa che continuo a fare esperimenti. Il generatore di critical CSS non funziona? Non preoccuparti ... riprova tra 5 minuti!
Feedback o manca una funzionalità? Fammi sapere