Cos’è il Critical CSS? Definizione
Il Critical CSS è una tecnica di ottimizzazione delle prestazioni web che consiste nell’identificare e inlineare i CSS essenziali per il rendering del contenuto above-the-fold di una pagina web. Il contenuto above-the-fold è la parte della pagina web che è visibile senza scorrere.
Perché è importante il Critical CSS?
Il Critical CSS è importante perché può migliorare significativamente i tempi di caricamento delle pagine web. Quando un browser carica una pagina web, deve scaricare tutti i file CSS necessari per renderizzare la pagina. I file CSS possono essere di grandi dimensioni, e questo può rallentare il caricamento della pagina.
Il Critical CSS inlinea i CSS essenziali per il rendering del contenuto above-the-fold, il che significa che il browser non deve scaricare tutti i file CSS necessari per renderizzare la pagina. Questo può migliorare significativamente i tempi di caricamento della pagina, soprattutto per gli utenti che hanno connessioni internet lente.
Come implementare il Critical CSS
Esistono diversi modi per implementare il Critical CSS. Un modo è quello di utilizzare un Critical CSS Generator. Un Critical CSS Generator è un tool che analizza una pagina web e identifica i CSS essenziali per il rendering del contenuto above-the-fold. Il tool genera quindi un file CSS contenente i CSS essenziali, che può essere inlineato nella pagina web.
Un altro modo per implementare il Critical CSS è quello di estrarre manualmente i CSS essenziali per il rendering del contenuto above-the-fold. Questo può essere fatto utilizzando uno strumento di sviluppo web come Chrome DevTools.
Critical CSS Generator
Esistono diversi Critical CSS Generator disponibili online. Alcuni dei più popolari sono:
- Critical CSS Generator by Corewebvitals.io
- Critical CSS Generator by TestingBot
- Critical Path CSS Generatori by Jonas Ohlsson
Come “defer” il non critical CSS
Una volta identificati i CSS essenziali per il rendering del contenuto above-the-fold, è possibile utilizzare l’attributo
defer
per posticipare il caricamento dei CSS non essenziali. L’attributo
defer
indica al browser di caricare i CSS non essenziali solo dopo che il contenuto above-the-fold è stato visualizzato.
Come estrarre manualmente il critical CSS
Per estrarre manualmente i CSS essenziali per il rendering del contenuto above-the-fold, è possibile utilizzare uno strumento di sviluppo web come
Per fare ciò, seguire questi passaggi:
- Apri la pagina web in Chrome DevTools (F12).
- Clicca sulla scheda “Network”.
- Ricarica la pagina web.
- Nella scheda “Network”, seleziona il file CSS che vuoi estrarre.
- Clicca sulla scheda “Headers”.
- Copia il contenuto del campo “Content-Type”.
- Crea un nuovo file CSS e incolla il contenuto del campo “Content-Type” all’inizio del file.
- Copia il contenuto del file CSS originale nel nuovo file CSS.
- Salva il nuovo file CSS.
Come trovare il critical CSS
Un altro modo per trovare i CSS essenziali per il rendering del contenuto above-the-fold è quello di utilizzare uno strumento di analisi delle prestazioni web come PageSpeed Insights. PageSpeed Insights analizza una pagina web e fornisce consigli su come migliorare le prestazioni della pagina. Uno dei consigli che PageSpeed Insights può fornire è quello di inlineare il Critical CSS.
Critical CSS: plugin WordPress
Esistono diversi plugin WordPress che possono essere utilizzati per implementare il Critical CSS in WordPress. Alcuni dei plugin più popolari sono:
- Jetpack Boost: velocità, prestazioni e CSS critici del sito web
- 10Web Booster – Ottimizzazione della velocità del sito web, Cache & Ottimizzatore della velocità della pagina
- PageSpeed Ninja
Critical CSS Magento 2
Esistono diverse estensioni Magento 2 che possono essere utilizzate per implementare il Critical CSS in Magento 2. Alcuni dei plugin più popolari sono:
Conclusione
Il Critical CSS è una tecnica di ottimizzazione delle prestazioni web che può migliorare significativamente i tempi di caricamento delle pagine web. Esistono diversi modi per implementare il Critical CSS, tra cui l’utilizzo di un Critical CSS Generator o l’estrazione manuale dei CSS essenziali. Se stai cercando un modo per migliorare le prestazioni del tuo sito web, l’implementazione del Critical CSS è un ottimo punto di partenza.
Iscriviti alla newsletter. Resta aggiornato!
Te la invieremo periodicamente per comunicazioni importanti e news sul mondo digitale. Potrai disiscriverti in ogni momento cliccando l'apposito link in calce alla newsletter.
