Cosa sono le render-blocking resources
Le risorse render-blocking sono file (tipicamente CSS e JavaScript) che il browser DEVE scaricare e processare prima di iniziare a renderizzare la pagina. Bloccano il rendering iniziale e impattano FCP, LCP e tutta l'esperienza utente.
CSS sempre bloccante per default
I link rel="stylesheet" nell'head bloccano il rendering finché il foglio non e scaricato e parsato. Il browser teme un FOUC (flash of unstyled content) e attende. Eccezioni: con media query non corrispondente (es. media="print") o con disabled, il CSS non blocca ma viene comunque scaricato.
JavaScript: bloccante senza async/defer
Un script senza attributi blocca parsing HTML, download successivo e rendering. async sblocca il parsing ma esegue appena pronto (interrompe ancora). defer sblocca tutto e esegue a fine parsing. type=module ha defer implicito.
Identificare con Lighthouse
L'audit "Eliminate render-blocking resources" in Lighthouse elenca tutte le risorse bloccanti con tempo risparmiato stimato eliminandole o differendole. Mostra URL, dimensione e Transfer time. Concentrati sulle risorse con più alto impatto.
Chrome DevTools Coverage
Apri DevTools, Cmd+Shift+P, digita Coverage, clicca "Start instrumenting coverage". Ricarica la pagina. Vedrai per ogni CSS/JS la percentuale utilizzata vs totale: spesso 70-90% di CSS framework non e usata sulla pagina. Strumento prezioso per identificare codice da rimuovere o caricare on-demand.
Soluzioni per render-blocking
CSS: inline il critical CSS, differisci il resto con preload + onload o media=print trick. JS: aggiungi defer (preferito) o async. Tree-shake bundle (Vite, Rollup, webpack). Code splitting per pagina. Rimuovi librerie inutilizzate. Sostituisci jQuery con vanilla JS. Lazy load componenti below-the-fold.
Hai bisogno di aiuto?
Se vuoi un sito veloce ottimizzato dal team di G Tech Group, scrivici tramite il modulo di contatto.