Cosa è Critical CSS

Ai tempi d’oggi costruire un buon sito web vuol dire anche occuparsi delle prestazioni e della velocità, Critical CSS è un metodo efficace per migliorare la velocità di rendering della pagina ai nostri visitatori.

Il metodo del Critical CSS nasce dallo studio dell’interpretazione del codice HTML e delle risorse in esso incluse da parte dei browser moderni.

Come funziona Critical CSS

I browser moderni interpretano le pagine HTML e le mostrano ai visitatori, esattamente come? Riflettendo è chiaro che se la prima parte della pagina (senza effettuare scroll) viene interpretata velocemente, la sensazione per il visitatore sarà di estrema velocità e non noterà il resto del caricamento, ecco a cosa serve il Critical CSS.

Inseriamo in <head> quasi tutte le risorse importanti, il browser quindi prima di elaborare il contenuto successivo elabora i files richiamati in <head> (CSS, JS, ecc…) causando un rallentamento evidente del rendering finale.

Se invece usassimo solo il CSS necessario alla prima schermata in <head>?

Critical CSS schermata prioritaria

Implementare Critical CSS

Inseriamo in <head> il codice CSS necessario (Critical CSS) alla visualizzazione della prima schermata (senza scrollare) della nostro output HTML.

Il modo più veloce per il browser di caricare gli stili CSS è inline <style>.codice</style> così da evitare che il browser debba richiedere una risorsa esterna (anche se nello stesso sever), ed in seguito tramite javascript o jquery includere gli altri fogli di stile CSS subito dopo il rendering della prima schermata.

Esempi Critical CSS

Selezioniamo le classi CSS che ci serviranno a riempire il nostro Critical CSS ed inseriamole inline nella sezione head.

<!doctype html>
<head>
<style> /* inline critical CSS */ </style>
<script> loadCSS(‘non-critical.css’); </script>
</head>
<body>
…contenuto
</body>
</html>

In questo esempio abbiamo inserito il Critical CSS inline ed in seguito mediante la funzione javascript loadCSS() richiamo in modo asincronico (caricamento parallelo) i file CSS, grazie al caricamento parallelo il browser non aspetterà l’elaborazione delle risorse prima di passare al contenuto e il sito web risulterà più veloce.