Introduzione al problema CSS che bloccano la visualizzazione nei contenuti above-the-fold
Chiunque abbia utilizzato PageSpeed Insight almeno una volta si è trovato davanti al frustrante messaggio di errore “Elimina Javascript e CSS che bloccano la visualizzazione nei contenuti above-the-fold” prima di iniziare con i dettagli tecnici vorrei spiegare perchè questo accade e perchè è importante risolvere questo problema.
La velocità di caricamento di un sito internet è uno dei fattori più importanti per attrarre nuovi visitatori ed è anche considerato un importante fattore di ranking per l’indicizzazione sui motori di ricerca. Uno studio condotto da Akamai dimostra come circa la metà degli utenti si aspetti che un sito internet venga caricato in 2 secondi o meno e in generale altrimenti abbandonano la pagina rivolgendo le proprie ricerche altrove. Questo significa che non solo rischi di perdere visitatori ma anche potenziali conversioni di vendita dei tuoi prodotti. Pertanto se vuoi competere per le migliori posizioni nella serp di Google ti consiglio di leggere questa guida.
Perchè gli stili css bloccano il rendering della pagina?
Per costruire la struttura di una pagina web, il browser esegue numerose operazioni in seguenza. Questo significa che la pagina viene caricata solo quando tutte le informazioni, compresi gli stili css sono stati scaricati ed elabrati correttamente. In particolare per caricare i fogli di stile esterni è necessario che vengano eseguite numerose comunicazioni tra il server ed il browser stesso causando ritardi nel render della pagina.
Quanti di voi non hanno inserito il link ai file CSS nella sezione <head> della pagina HTML utilizzando il codice <link rel=”stylesheet” href=”mycssfile.css”> ? Questo significa che il contenuto “above the fold” cioè la prima porzione di pagina che viene visualizzata dai vostri utenti non verrà mostrata fino a quando il browser non avrà elaborato tutti i vostri stili CSS.
Se andiamo ad interpellare le linee guida di Google, il suggerimento è quello di eseguire il caricamento del file CSS e javasscript in manienra asincrona, questo significa che questi vengono caricati in parallelo al codice HTML velocizzando di gran lunga il rendering strutturale della pagina. Se questo è facilemente realizzabile per i files javascript semplicemente utilizzando il comando async in questo modo <script src=”myjsfile.js” async</script> vi chiederete invece come possa essere possibile farlo con i fogli di stile CSS dal momento che non è possibile utilizzare async all’interno del codice <link rel=”stylesheet” href=”mycssfile.css”>
Come caricare gli stili CSS in modo asincrono?
Di certo esistono numerose soluzioni tuttavia quella che io preferisco perchè un approccio più moderno è l’utilizzo di rel=”preload” questo informa il browser che una determinata risorsa è necessaria come parte della navigazione corrente e che dovrebbe essere recuperata il prima possibile. In questo modo i files CSS vengono pre-caricaricati per poi essere utilizzati in un secondo momento per il rendering della stessa pagina HTML. L’unico problema è che, per il momento, questo formato è solo supportato dal browser Google Chrome anche se in futuro dovrebbe essere anche implementato su Firefox e Safari. Per controllare la compatibilità con il browser puoi utilizzare il sito caniuse.com e per ovviare a questo ostacolo possiamo utilizzare una funzione javascript sviluppata da Filamentgroup e chiamata LoadCSS.
Risolvere il problema di compatibilità utilizzando LoadCSS
Il plugin javascript LoadCSS permette di utilizzare la tecnologia HTTP/2 Server Push la quale permette di inviare all’utente i dati strutturali della pagina anche se il browser non li chiesti espicitamente permettendo in questo modo di velocizzare enormement eil caricamento dell pagine. Ma come implementare questo plugin nelle vostre pagine? Basta utilizzare una combinazione dell’attributo preload e un po’ di javascript tramite il plugin LoadCSS come di seguito
Inserisci il seguente codice nella sezione <head> sostituendo l’url del file CSS d’esempio con
<link rel=”preload” href=”path/to/mystylesheet.css” as=”style” onload=”this.rel=’stylesheet'”>
<noscript><link rel=”stylesheet” href=”path/to/mystylesheet.css”></noscript>
Come potete notare l’utilizzo di <noscript> permette di continuare a caricare il file CSS anche qualora il browser dell’utente non supporti javascript permettendo in questo modo di eseguire correttamente il rendering della pagina nella maniera tradizionale.
Successivamente dovrete inserire il rispettivo codice javascript che trovate qui LoadCSS rel=preload polyfil all’interno del tag <script> il codice finale quindi sarà
<link rel=“preload“ href=“path/to/mystylesheet.css“ as=“style“ onload=“this.onload=null;this.rel=’stylesheet’“>
<noscript><link rel=“stylesheet“ href=“path/to/mystylesheet.css“></noscript>
<script>
/*! loadCSS rel=preload polyfill.
(function(){ … }());
</script>
Conclusioni
La modalità in cui il browser scarica gli stili CSS è la cause del rallentamento del rendering delle pagine web, questo in particolare potrebbe essere un problema per gli utenti che hanno una connessione internet più lenta come quelli che si collegano da smartphone. In questo articolo ho illustrato una delle tante possibili soluzioni, voi cosa ne pensate? SAvete avuto modo di lavorare su questo problema e come lo avete risolto? Non esitate a commentare
Lascia un commento