Critical CSS e velocità sito web
Indice dei contenuti
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>?
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.
Commenti e Opinioni: