Controllo risorse bloccanti
Risposta breve
Trova script e fogli di stile che bloccano il rendering e le abitudini che rallentano le pagine: async/defer mancanti, gestori di eventi inline e document.write.
Cosa non fa: Legge l’HTML e segnala gli schemi; non carica la pagina né misura per quanto ogni risorsa blocca il rendering. Il test di velocità della pagina fornisce tempi misurati.
Cosa fa
Controlla l'HTML di una pagina in due parti. Risorse bloccanti per il rendering: script in `<head>` senza `async` o `defer`, fogli di stile che bloccano il rendering e regole CSS `@import`. Igiene degli script: quanti script esterni e inline carica la pagina, se gli script esterni usano `async` o `defer`, gestori di eventi inline come `onclick`, chiamate a `document.write` e se vengono usati moduli ES.
Perché è importante
Un browser deve scaricare ed eseguire ogni script e foglio di stile bloccante nel `<head>` prima di poter disegnare qualsiasi cosa, il che ritarda il First Contentful Paint e spesso il Largest Contentful Paint. `document.write` peggiora la situazione: Chrome può rifiutarsi di eseguire gli script che inietta sulle connessioni lente, e i gestori inline ostacolano una Content-Security-Policy rigorosa.
Come funziona
-
Inserisci l'URL di una pagina o incolla il suo HTML
-
Analizziamo il `<head>` e ogni `<script>` della pagina
-
Segnaliamo gli script e i fogli di stile bloccanti, poi controlliamo gli script per async/defer, gestori inline e document.write
-
Restituiamo un risultato per ciascuna parte, con le risorse segnalate
Esempio di input e output
url: https://rankproof.eu/tools
Risorse bloccanti per il rendering: 2 <script src="analytics.js"> blocking <link rel="stylesheet" href="theme.css"> blocking nessun @import nel CSS OK Igiene degli script script: 7 (5 esterni, 2 inline) gli script esterni usano async o defer warn nessun gestore di eventi inline OK nessun document.write OK usa moduli ES OK 0 aree su 2 sono a posto
Chi lo usa
-
Ingegnere delle performance
Prima di un periodo intenso, sposta ogni script bloccante su async o defer e ricontrolla che nulla di nuovo si sia infiltrato nel `<head>`.
-
Sviluppatore frontend
Trova lo snippet di analytics o widget che si carica ancora in modo sincrono e passalo a un caricamento differito.
-
Specialista SEO
Controlla i template dietro alle tue pagine più lente e passa le risorse segnalate al team di sviluppo.
Domande frequenti
- Come sblocco un foglio di stile?
- Per il CSS non critico, aggiungi `media="print"` e `onload="this.media='all'"`. Per il CSS critico, inseriscilo inline in tag `<style>`.
- Posso semplicemente differire tutti i miei script?
- Non sempre: gli script che devono essere eseguiti prima del primo rendering, i polyfill necessari per il layout e gli script inline non possono sempre aspettare. Valutali in base all'impatto.
- Cosa c'è di sbagliato in document.write?
- Costringe il browser a mettere in pausa l'analisi, e Chrome può bloccare gli script che inietta sulle connessioni lente. Inserisci invece gli elementi con i metodi DOM.
- Perché segnalare i gestori di eventi inline?
- Gestori come `onclick="…"` mescolano il comportamento nel markup e richiedono `unsafe-inline` in una Content-Security-Policy. Collega invece i listener da un file di script.
- E i widget di terze parti?
- Caricali con `<script async>` o tramite un tag manager con caricamento differito. Meglio ancora, carica i widget sotto la piega solo allo scroll o all'interazione.