Che cosa blocca il rendering
I principali colpevoli sono le risorse sincrone in <head>:
- Fogli di stile esterni (<link rel="stylesheet">).
- Script sincroni (<script src="…"> senza defer o async).
- @import annidati nel CSS.
Il browser mette in pausa la costruzione della pagina finché questi file non sono caricati ed elaborati, e l'utente vede più a lungo una schermata bianca.
Come correggere il CSS
L'approccio migliore è inserire il critical CSS (gli stili dell'area visibile) inline in un tag <style> e caricare il file principale in modo asincrono:
<style>/* critical CSS */</style>
<link rel="preload" href="styles.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>Aiutano anche le media query: i file destinati solo alla stampa o agli schermi grandi non sono considerati render-blocking per la vista iniziale.
Come correggere il JavaScript
Aggiungi l'attributo defer per gli script che devono eseguirsi dopo il parsing dell'HTML, oppure async per quelli indipendenti (analytics, contatori). Esempio:
<!-- defer – recommended for most cases -->
<script src="app.js" defer></script>
<!-- async – for scripts that don't affect the DOM -->
<script src="analytics.js" async></script>Come rilevare le risorse render-blocking
Esegui PageSpeed Insights o Lighthouse e cerca l'audit «Eliminate render-blocking resources». In Chrome DevTools il pannello Network mostra barre rosse nel waterfall per le richieste che bloccano il rendering iniziale.