Isola le regole usate nella parte alta

Gli sviluppatori front-end isolano così il CSS iniziale quando la parte visibile di una pagina deve apparire più in fretta.

Isola le regole usate nella parte alta. I dati restano sul dispositivo e il risultato è facile da controllare e riutilizzare.

Come si usa

  1. Incolla l'HTML della parte della pagina visibile in alto.
  2. Aggiungi una riga separatrice composta da due trattini.
  3. Incolla il foglio di stile completo usato da quella pagina sotto il separatore.
  4. Avvia l'estrazione per ottenere le regole necessarie al primo rendering.

Esempio

Uno sviluppatore front-end sta ottimizzando una pagina iniziale in cui l'intestazione e il menu devono apparire rapidamente. Incolla l'HTML dell'intestazione, aggiunge i due trattini, poi include il foglio di stile completo. L'output aiuta a preparare un blocco di CSS critico prima di ulteriori ottimizzazioni. Poi testa il risultato su una copia per individuare regole mancanti.

Input

<h1 class="title">Hello</h1>
--
.title { color: #333; }
p { margin: 0; }

Limiti e formati

Dove avviene il trattamento

L'HTML e il CSS che incolli rimangono nel tuo browser. L'estrazione delle regole avviene sul tuo dispositivo e nulla viene inviato all'esterno della pagina. Il risultato non viene conservato dopo che esci.

Domande frequenti

Quale HTML devo fornire?

Fornisci il markup di ciò che gli utenti vedono prima di scorrere, come l'intestazione, la navigazione e il primo blocco di contenuto. Il CSS critico dipende da quella viewport iniziale. Un'estrazione più ampia di solito produce regole meno mirate.

Perché mancano alcune regole?

Lo strumento legge l'HTML e il CSS che incolli, ma non esegue il JavaScript della pagina. Le classi aggiunte in seguito o gli stili calcolati dal browser potrebbero essere assenti. Aggiungili manualmente se il primo rendering ne ha bisogno.

Posso pubblicare direttamente il CSS estratto?

Testalo prima su una copia. Controlla che il layout iniziale rimanga intatto e che i font restino disponibili. Il CSS critico di solito integra il foglio di stile principale invece di sostituirlo in ogni situazione.

Strumenti della stessa categoria