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 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.