Velocità Impatto alto Medio 30–60 min

Risorse bloccanti (render-blocking)

CSS e JS nell'header che rallentano il primo rendering.

Cos'è

Le risorse render-blocking sono file (tipicamente CSS e JS sincrono nell'<head>) che il browser deve scaricare ed elaborare prima di renderizzare il contenuto. Fino ad allora l'utente vede il vuoto.

Perché è importante

Sono la causa più comune di un primo rendering lento e di un cattivo LCP. Più sono numerose e grandi, più tempo passa prima che appaia il contenuto.

Come fare

1Posticipa gli script con defer/async.
2Identifica il "critical CSS" (gli stili per la parte visibile) e inseriscilo inline, carica il resto in modo asincrono.
3Unisci e minifica i file CSS/JS, rimuovi gli stili inutilizzati.
4Carica i font esterni con font-display: swap e precaricali.

Conclusione

L'obiettivo è consegnare il contenuto visibile il prima possibile e posticipare tutto il resto. Inizia posticipando gli script (vittoria rapida) e ottimizzando il CSS (critical CSS). Quest'area ha un impatto diretto sull'LCP, una metrica che Google monitora.

Argomenti correlati