Critical CSS: cos’è, perché è importante e come implementarlo

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:

1. Apri la pagina web in Chrome DevTools (F12).
2. Clicca sulla scheda “Network”.
3. Ricarica la pagina web.
4. Nella scheda “Network”, seleziona il file CSS che vuoi estrarre.
5. Clicca sulla scheda “Headers”.
6. Copia il contenuto del campo “Content-Type”.
7. Crea un nuovo file CSS e incolla il contenuto del campo “Content-Type” all’inizio del file.
8. Copia il contenuto del file CSS originale nel nuovo file CSS.
9. 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:

• Critical CSS by Mageworx
• Critical CSS by Amasty

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.