Estrattore di Critical CSS: stili above the fold inline | We.Inc
Incolla HTML e CSS, scegli una dimensione dello schermo e tieni solo le regole che danno stile a ciò che si vede prima di scorrere. Copia un blocco style inline più lo schema di preload.
Estrattore di Critical CSS
Il critical CSS è il piccolo insieme di regole necessario per disegnare ciò che un visitatore vede prima di scorrere. Incolla qui l'HTML e il foglio di stile di una pagina, scegli una dimensione dello schermo, e questo strumento impagina la pagina in un riquadro bloccato, tiene le regole che corrispondono agli elementi visibili e ti dà un blocco style inline più un link al foglio di stile caricato in differita.
Cosa tiene l'estrattore
Tipo di regola
Tenuta quando
Perché
Regola di stile
Il suo selettore corrisponde a un elemento il cui bordo superiore è entro l'altezza scelta
Quell'elemento viene disegnato alla prima visualizzazione
html, body, :root, *
Sempre
Font, colori e custom property di base influenzano tutto ciò che è visibile
Blocco @media
Tenuto solo con le regole interne corrispondenti
Anche le altre dimensioni dello schermo ottengono il primo disegno corretto
@font-face
Sempre (si può disattivare)
Il testo visibile ha bisogno che il suo font sia dichiarato
@keyframes
Il suo nome è usato da una regola tenuta
Le animazioni sugli elementi visibili continuano a funzionare
I browser aspettano ogni foglio di stile nell'head prima di disegnare qualsiasi cosa. Mettere inline le poche regole che servono alla prima schermata, poi caricare il file completo senza bloccare, fa apparire la pagina prima. Questo strumento fa questa selezione per te dal codice che incolli. Gira nel tuo browser e non recupera mai un URL, quindi incolla l'HTML e il CSS finali della pagina invece di un link.
Incolla l'HTML della pagina (basta il contenuto del body) e il CSS del suo foglio di stile.
Scegli una dimensione dello schermo predefinita oppure digita una larghezza e un'altezza della piega in pixel.
Lo strumento esegue il rendering del tuo HTML in un riquadro sandbox a quella dimensione con gli script disattivati, poi confronta ogni selettore con gli elementi sullo schermo.
Copia il blocco style inline per l'head e il link di preload che carica poi il foglio di stile completo. Le statistiche mostrano quante regole sono state tenute e la dimensione del risultato.
Eseguilo a una dimensione da telefono e a una da desktop, e unisci i due risultati, perché la piega si trova in un punto diverso su ciascuno.
Gli stati interattivi come :hover e :focus vengono confrontati sull'elemento stesso, quindi un pulsante visibile mantiene la sua regola hover. Rimuovili a mano se vuoi il risultato più piccolo.
I contenuti aggiunti da JavaScript dopo il caricamento non sono nell'HTML incollato, quindi i loro stili non vengono rilevati. Incolla l'HTML come appare una volta renderizzato se la tua pagina si costruisce nel browser.
Mantieni piccolo il blocco inline. web.dev suggerisce di tenere il contenuto above the fold entro circa 14 KB compressi così può arrivare nei primi round trip.
Ripeti l'estrazione ogni volta che cambia la parte superiore della pagina. Un critical CSS non aggiornato causa un flash di contenuto senza stile al primo caricamento.
Domande frequenti
È lo stesso dei pacchetti Critical o Penthouse?
Segue la stessa idea in modo più semplice. Quegli strumenti da riga di comando pilotano un vero browser headless sulle tue pagine compilate. Questa pagina usa il tuo browser e il codice incollato, quindi considera il risultato un'approssimazione fedele e testa la pagina dopo.
Perché il link di preload ha bisogno di onload?
rel=preload con as=style scarica il foglio di stile senza applicarlo. Il gestore onload cambia rel in stylesheet quando il file arriva, il che lo applica senza bloccare il primo disegno. La copia in noscript copre i visitatori con gli script disattivati.
Mettere il CSS inline peggiora la cache?
Le regole inline vengono reinviate con ogni pagina HTML, ed è per questo che il blocco deve restare piccolo. Il foglio di stile completo resta un file separato, quindi viene messo in cache come al solito dopo la prima visita.
Può leggere il mio sito online?
No. Una pagina statica nel tuo browser non può caricare il codice di un altro sito, quindi non viene recuperato nulla. Apri la tua pagina, visualizza il sorgente e il foglio di stile, e incollali entrambi. Niente di ciò che incolli viene caricato online.
E se il mio CSS usa un framework come Tailwind?
Incolla il file CSS compilato prodotto dalla tua build, non il sorgente con le righe @tailwind o @import. L'estrattore lavora sulle regole finali, e le classi utility nel tuo HTML vengono confrontate come qualsiasi altro selettore.
Dove si trova davvero la piega
Non esiste un'unica piega. Un telefono in verticale può mostrare 650 pixel di altezza mentre un portatile ne mostra 800 e un monitor grande di più. Scegli le dimensioni che i tuoi visitatori usano di più, e lascia un margine sotto la linea perché spesso le persone iniziano subito a scorrere.
L'estrattore considera visibile un elemento quando il suo bordo superiore si trova sopra l'altezza scelta. Un hero alto che inizia sullo schermo e finisce sotto viene tenuto, ed è ciò che vuoi.
Inserire il risultato nella tua pagina
Metti il blocco style inline nell'head prima di qualsiasi altra cosa che viene renderizzata. Sostituisci il tuo normale link al foglio di stile con lo schema di preload così il resto del CSS si carica senza trattenere il primo disegno.
Verifica il risultato con la rete rallentata negli strumenti per sviluppatori del browser. Se qualcosa salta o cambia stile quando arriva il file completo, è stata persa una regola per un elemento visibile; aggiungila al blocco inline.
Lo schema di caricamento che scrive lo strumento
Regole critiche inline, poi carica il resto senza bloccare
È lo schema descritto su web.dev. Il blocco style contiene le regole estratte; il link di preload recupera il file completo e lo applica al caricamento, e la riga noscript è il fallback.
Limiti noti di un estrattore nel browser
Cosa controllare a mano
Situazione
Cosa succede
Cosa fare
Stili aggiunti dagli script
Non rilevati, gli script non girano nel riquadro
Incolla l'HTML renderizzato invece del template
Immagini senza width e height
Possono ridursi ad altezza zero e tirare su i contenuti successivi
Aggiungi gli attributi width e height alle immagini
Web font
Non scaricati, quindi il testo può andare a capo diversamente
Lascia un margine sotto l'altezza della piega
Selettori rifiutati dal browser
Scartati dal browser prima del controllo
Correggi la sintassi; le statistiche indicano quante regole sono state lette
Pagine molto lunghe
Viene tenuta solo la prima schermata, come previsto
Ripeti per ogni dimensione dello schermo che ti interessa
Estrai il critical CSS
Lo strumento si carica con una pagina di esempio di una panetteria così puoi vedere il risultato prima di incollare il tuo codice.
HTML della pagina
CSS del foglio di stile
Dimensione dello schermo
Tablet 820 x 1000
Portatile 1366 x 768
Desktop 1920 x 1000
Larghezza (px)
Altezza della piega (px)
Tieni sempre le regole @font-face
La tua pagina alla dimensione scelta, script disattivati
La linea tratteggiata indica la piega.
Lette {read} regole, tenute {kept}. Il critical CSS pesa {bytes} byte prima della compressione.
Impaginazione della pagina in corso...
Nessuna regola corrisponde. Verifica che HTML e CSS appartengano alla stessa pagina.