CSS critico e blocco del rendering
Inserisca inline il CSS critico above-the-fold e rimandi gli stili non critici per eliminare il blocco del rendering.
CSS critico e blocco del rendering è una lezione CSS Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento CSS Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso CSS Academy include 4 lezioni in totale.
Come esegue il rendering il browser
Il browser analizza l'HTML trasformandolo in un DOM e il CSS in un CSSOM, li combina in un render tree, esegue il layout e infine il paint. Il CSS blocca il rendering finché il CSSOM non è completo: ogni byte di CSS sul critical path ritarda il first paint.
Che cos'è il CSS critico
Il CSS critico è l'insieme minimo di stili necessari per eseguire il rendering dei contenuti nella parte visibile iniziale della pagina. Inserirlo direttamente nei tag <style> nell'<head> elimina la richiesta del foglio di stile che blocca il rendering della vista iniziale.
Risorse che bloccano il rendering
Qualsiasi <link rel="stylesheet"> nell'head blocca il rendering. Anche gli script privi di async/defer bloccano l'analisi dell'HTML. Ridurre le risorse che bloccano il rendering migliora direttamente il Largest Contentful Paint (LCP) e il First Contentful Paint (FCP).
Estrazione del CSS critico
Strumenti come critical (npm), Penthouse ed estrattori basati su Puppeteer eseguono il rendering di una pagina a dimensioni specifiche della viewport e acquisiscono gli stili applicati agli elementi visibili. L'output viene inserito direttamente nella pagina, mentre il foglio di stile completo viene caricato in modo asincrono.
Caricamento asincrono del CSS non critico
Carichi il foglio di stile completo senza bloccare il rendering usando media="print" con uno scambio in onload, oppure il pattern rel="preload" + as="style" + onload="this.rel='stylesheet'".
<pre class="snippet"><link rel="preload" href="styles.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript></pre>Le media query come suggerimenti di caricamento
I file CSS caricati con una media query non corrispondente, ad esempio media="print", vengono scaricati con priorità bassa e non bloccano il rendering. Questo è il metodo classico per caricare i fogli di stile senza bloccare il critical path.
HTTP/2 e suddivisione del CSS
Con il multiplexing di HTTP/2, dividere il CSS in molti file piccoli comporta un overhead inferiore rispetto a HTTP/1. Carichi solo il CSS necessario per ogni route, come home.css e checkout.css, anziché un unico bundle monolitico che include gli stili di ogni pagina.
Il CSS e il preload scanner
Il preload scanner del browser individua presto i tag <link> dei fogli di stile e ne avvia il download prima che l'analizzatore HTML li raggiunga. Si assicuri che i fogli di stile siano in <head>, non nel body, in modo che il preload scanner li individui tempestivamente.
Misurazione dell'impatto del blocco del rendering
Il pannello Network di Chrome DevTools mostra nella waterfall il tempo durante il quale le risorse bloccano il rendering. Lighthouse segnala "Eliminate render-blocking resources" e indica il risparmio per ogni risorsa. WebPageTest mostra renderBlockingResources nella visualizzazione filmstrip.
CSS critico lato server
Framework come Next.js e Astro inseriscono automaticamente il CSS critico durante l'SSR. Il server identifica gli stili applicati all'HTML iniziale e li inserisce direttamente nella pagina: non è necessario alcun passaggio di estrazione lato client.
Compromessi pratici
Inserire troppo CSS direttamente nella pagina aumenta le dimensioni dell'HTML, rallenta il TTFB e riduce l'efficienza della cache, perché l'HTML non viene memorizzato in cache tanto a lungo quanto i file CSS. Mantenga il CSS critico inserito nella pagina entro 14KB per rientrare nella prima finestra di congestione TCP.
Verifica delle conoscenze
Perché un foglio di stile che blocca il rendering ritarda il First Contentful Paint?
Riepilogo
Il CSS critico inserisce gli stili della parte visibile iniziale della pagina per eliminare i ritardi causati dal blocco del rendering. Carichi il CSS rimanente in modo asincrono usando preload o i trucchi con le media query. Misuri l'impatto con Lighthouse e DevTools e punti a un payload di CSS critico inferiore a 14KB per ottenere prestazioni ottimali.
Domande Frequenti
La lezione «CSS critico e blocco del rendering» è gratuita?
Sì — il testo completo di «CSS critico e blocco del rendering» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso CSS Academy, passa a CoddyKit PRO. Il corso CSS Academy include 4 lezioni in totale.
Cosa imparerò in «CSS critico e blocco del rendering»?
Inserisca inline il CSS critico above-the-fold e rimandi gli stili non critici per eliminare il blocco del rendering. Eserciti CSS Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare CSS Academy?
Non è richiesta alcuna esperienza precedente. CSS Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.
Quanto tempo richiede la lezione «CSS critico e blocco del rendering»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione CSS Academy?
Sì. Ogni lezione CSS Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- CSS critico e blocco del rendering
- Layout, paint e compositing: la pipeline di rendering
- will-change e promozione dei livelli
- Copertura CSS e stili inutilizzati