Generatore di Critical CSS.

Genera il Critical Path CSS e velocizza il tuo sito

⚙

Critical CSS in 3 semplici passi

  1. Inserisci l'URL della pagina per cui vuoi creare il Critical CSS
  2. Incolla il risultato in un tag <style> sulla tua pagina, subito sotto il <title>
  3. Ritarda 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 renderizzare il viewport visibile. Il viewport visibile è spesso chiamato "contenuto above the fold". È quella parte di una pagina web che vedi nel browser senza scorrere. Poiché il viewport visibile è la prima cosa che un visitatore vede, devi dare priorità al suo rendering. Il Critical CSS ti aiuta a farlo.

Perché usare il Critical CSS

In sintesi: perché è molto più veloce. Il Critical Path CSS (above-the-fold) è una delle tecniche più importanti ed efficaci per ottimizzare la consegna del CSS. Per come funzionano i browser moderni, tutti gli stili da file esterni sono considerati render blocking. Questo significa che il browser non inizia 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 si blocca facilmente per 100 ms o più. Google PageSpeed Insights suggerisce 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 CSS necessario per mostrare solo la parte visibile della pagina. Questo Critical CSS è spesso inserito inline nell'head della pagina. Di conseguenza, il browser non deve scaricare file CSS prima di iniziare il rendering. Nel frattempo, mentre la pagina è visualizzata, il browser scarica i file CSS finali in background.

Come si usa il generatore di Critical CSS?

Per prima cosa devi generare il Critical Path CSS per la tua pagina. Inserisci l'URL della pagina e clicca su "Genera il Critical CSS". Dopo pochi secondi vedrai il CSS estratto
Copia quel CSS e inseriscilo nell'<head> della pagina in un tag <style> sulla tua pagina, subito sotto il <title>
Il passo successivo è ritardare il CSS originale. Ci sono 3 metodi per ritardarlo.

  1. Precarica il CSS e sostituisci l'attributo rel al caricamento
  2. Carica il CSS con media=print e al caricamento sostituisci l'elemento media
  3. Inserisci i link al CSS originale nel footer della pagina

Caching del CSS non critico

Il Critical CSS è estremamente veloce per i nuovi visitatori che non hanno ancora i file CSS nella cache del browser. Per i visitatori di ritorno, il Critical CSS è generalmente inutile poiché i file CSS vengono caricati dalla cache del browser.

Devo unire i fogli di stile?

Dopo aver implementato il Critical CSS, è più veloce unire i fogli di stile? Non c'è una risposta semplice. A volte unire i fogli di stile è più veloce, a volte no. Questo dipende dal critical rendering path. Se ci sono più di 5 risorse ad alta priorità, in genere ha senso unire alcuni fogli di stile.

Come funziona il generatore di Critical CSS?

Il generatore di Critical CSS funziona su una piattaforma Node.js personalizzata. Visitiamo la tua pagina web con un vero browser basato su Chrome. Valutiamo il tuo sito su diversi viewport e determiniamo quali parti dei fogli di stile servono per il rendering del viewport visibile (la parte visibile della pagina). Quindi puliamo e minimizziamo il CSS necessario per il rendering.

Esiste un plugin WordPress per il generatore di Critical CSS?

Sì. Si chiama plugin Core Web Vitals, progettato specificamente per funzionare con il nostro estrattore di 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? Riprova tra 5 minuti.

Hai feedback o manca una funzionalità? Fammelo sapere