Eliminare il render-blocking: alleggerire CSS e JavaScript

Ha compresso le sue immagini, scelto un buon hosting, e nonostante ciò il test di velocità mostra un avviso: «Risorse che bloccano il rendering». Suona come un problema per specialisti, ma nel suo nucleo è semplicissimo da capire. Ed è proprio qui che si nasconde spesso l'ultimo secondo che separa una pagina veloce da una davvero veloce.

Le spiego senza gergo tecnico cosa significa render-blocking, perché frena il suo sito e come si ottimizzano le risorse critiche in modo che i contenuti appaiano subito.

Cosa significa in realtà render-blocking?

Quando qualcuno apre la sua pagina, il browser non carica semplicemente il testo e lo mostra. Prima vuole sapere come deve apparire il tutto, quindi carica i file di aspetto (CSS) e spesso anche il codice di programma (JavaScript). Finché questi file non sono caricati ed elaborati, il browser non mostra proprio nulla. Lo schermo resta bianco.

Esattamente questo intende «render-blocking»: un file blocca la visualizzazione. Il visitatore aspetta davanti a una pagina vuota, benché il contenuto vero e proprio sia da tempo pronto. Con un singolo piccolo file lo si nota appena. Con un costruttore che carica una dozzina di fogli di stile e altrettanti script, diventano in fretta uno o due secondi persi, e in quel tempo molti visitatori se ne sono già andati.

Perché proprio CSS e JavaScript frenano

I due tipi di file bloccano per motivi diversi, ed è importante capirlo:

• Il CSS blocca la visualizzazione, perché il browser non vuole mostrare una pagina incompleta e traballante. Preferisce aspettare finché sa dove va tutto.
• Il JavaScript blocca, perché il browser non sa se lo script sta per ricostruire l'intera pagina. Quindi si ferma e lo esegue prima, prima di proseguire.

L'insidia: spesso viene caricato codice che per il primo sguardo non è affatto necessario. Uno script per un modulo di contatto in fondo alla pagina trattiene comunque il titolo in cima. È come far aspettare l'intero ordine perché un contorno è ancora in cucina.

Come riconosce il render-blocking

Per questo non deve essere uno sviluppatore. Inserisca il suo indirizzo su Google PageSpeed Insights, uno strumento gratuito di Google. Nel rapporto, fra le raccomandazioni, compare spesso il punto «Elimina le risorse che bloccano il rendering». Lì vede persino quali file sono interessati e quanto tempo si potrebbe risparmiare.

Un secondo indizio: se la sua pagina durante il caricamento resta un attimo bianca e poi appare tutto in un colpo con uno scatto, è un segno classico di risorse che bloccano.

Come si ottimizzano le risorse critiche

La buona notizia: non si deve caricare tutto in una volta. Ci sono modi collaudati per dire al browser cosa serve davvero subito e cosa può aspettare:

• L'essenziale per primo: caricare subito solo quel CSS necessario per l'area superiore, visibile. Il resto arriva dopo. Così la prima impressione appare all'istante.
• Rimandare il JavaScript: gli script che non servono per la prima visualizzazione si caricano «in ritardo» (con le indicazioni defer o async). Il browser mostra allora prima la pagina e si occupa del codice dopo.
• Lasciar via la zavorra: molte cose bloccano solo perché vengono caricate, benché nessuno ne abbia bisogno. Plugin inutilizzati, vecchi caratteri, script dimenticati, via con quelli.
• Unire e ridurre i file: invece di dodici piccoli file, meglio pochi e snelli. Ogni singola richiesta costa tempo.

Nota lo schema: non si tratta tanto di inserire qualcosa di magico, quanto di lasciar via il superfluo e mettere l'ordine giusto. È proprio qui che un sito fatto a mano ha un vantaggio, non porta fin dall'inizio zavorra di cui poi ci si deve faticosamente sbarazzare.

Quanto porta davvero?

Eliminare il render-blocking agisce direttamente su ciò che Google e i suoi visitatori percepiscono più fortemente: quanto velocemente appare il primo contenuto. Questo migliora i Core Web Vitals e quindi il suo posizionamento, ma soprattutto l'impressione sulla persona davanti allo schermo. Una pagina che mostra subito qualcosa risulta veloce, anche se sullo sfondo sta ancora caricando qualcosa.

Se vuole approfondire il tema velocità, trova nei miei altri articoli anche una spiegazione comprensibile dei Core Web Vitals e dei freni più frequenti del tempo di caricamento.

Piccolo nello sforzo, grande nell'effetto

Il render-blocking fa parte delle cose che agiscono in modo invisibile: nessuno vede il codice che blocca, ma tutti percepiscono l'attesa. Eliminarlo costa di solito uno sforzo contenuto e porta un salto percepibile, proprio sul telefono, dove la pazienza è più scarsa.

Se il suo test di velocità segnala risorse che bloccano e non è sicuro di cosa si possa rimuovere o spostare senza rischi, ci guardo volentieri per lei. Ci contatti semplicemente tramite il modulo di contatto, le dico onestamente dove sul suo sito c'è la maggior velocità da ricavare.