Generatore di Critical CSS.

Genera Critical Path CSS e velocizza il tuo sito web

⚙

Critical CSS in 3 semplici passaggi

  1. Inserisci l'URL della pagina per la quale vuoi creare il Critical CSS
  2. Incolla i risultati in un tag <style> nella tua pagina, subito sotto il tag <title>
  3. Posticipa 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 è una raccolta di dichiarazioni CSS utilizzate per renderizzare il viewport visibile. Il viewport visibile è spesso indicato come 'contenuto above the fold'. È quella parte di una pagina web che puoi vedere nel tuo browser senza dover scorrere. Poiché il viewport visibile è la prima cosa che un visitatore vede, dovresti dare priorità alla renderizzazione del viewport visibile. Il Critical CSS può aiutarti a farlo!

Perché dovrei usare il Critical CSS

In poche parole: perché è molto più veloce! Il Critical path (above-the-fold) CSS è una delle tecniche più importanti e d'impatto disponibili per ottimizzare la distribuzione dei CSS. A causa del modo in cui funzionano tutti i browser moderni, tutti gli stili provenienti da file esterni sono considerati render blocking. Ciò significa che un browser non inizierà il rendering (generare il render tree per essere specifici) finché non avrà scaricato tutti i file CSS esterni nell'head della pagina. Quando un browser deve scaricare 1 o più file CSS, una pagina può facilmente bloccarsi per 100ms o più. Google PageSpeed Insights suggerisce di eliminare le risorse render-blocking per aiutare la tua pagina a caricarsi più velocemente.
Un modo per evitarlo è utilizzare il Critical CSS. Il Critical CSS è una raccolta di CSS necessaria per mostrare solo la parte visibile della pagina. Questo Critical CSS viene spesso mostrato inline, nell'head della pagina. Di conseguenza, un browser non deve scaricare 1 o più file CSS prima di poter iniziare il rendering. Nel frattempo, mentre la pagina viene visualizzata, il tuo browser scarica i file CSS finali in background.

Come si usa il generatore di Critical CSS?

Prima di tutto devi generare il Critical Path CSS per la tua pagina web. Inserisci semplicemente l'URL della tua pagina e poi premi 'Generate Critical CSS'. Dopo pochi secondi vedrai il CSS estratto
Copia quel CSS e inseriscilo nell'<head> della pagina in un tag <style> nella tua pagina, subito sotto il tag <title>
Il passo successivo è posticipare il caricamento dei tuoi CSS originali. Ci sono 3 metodi per posticipare i tuoi CSS.

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

Cache dei CSS non critici

Il Critical CSS è estremamente veloce per i visitatori che accedono per la prima volta e che non hanno ancora i tuoi file CSS memorizzati nella cache del browser. Per i visitatori di ritorno di solito c'è poco bisogno del Critical CSS poiché i file CSS possono essere caricati dalla cache del browser.

Dovrei combinare i miei fogli di stile?

È più veloce, dopo aver implementato il Critical CSS, combinare i fogli di stile? Non c'è una risposta facile a questa domanda. A volte è più veloce combinare i fogli di stile e a volte no. Questo ha a che fare con il critical rendering path. Se ci sono più di 5 risorse ad alta priorità di solito ha senso combinare alcuni fogli di stile.

Come funziona il generatore di Critical CSS?

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

Esiste un plugin WordPress per il generatore di Critical CSS?

Sì, esiste. Si chiama Core Web Vitals plugin, progettato specificamente per funzionare insieme al nostro estrattore di Critical Path.

Feedback / stato beta

Attualmente il generatore di Critical CSS è in stato beta. Ciò significa che sto ancora sperimentando continuamente. Il generatore di Critical CSS non funziona per te? Non preoccuparti... riprova tra 5 minuti!

Feedback o manca una funzionalità? Fammelo sapere