Rimuovi il codice JavaScript che blocca il rendering

Questa regola viene attivata quando PageSpeed Insights rileva che il tuo codice HTML fa riferimento a un file JavaScript esterno che blocca la visualizzazione nella parte above the fold della pagina.

Panoramica

Prima che il browser possa eseguire il rendering di una pagina, deve creare l'albero DOM analizzando il markup HTML. Durante questo processo, ogni volta che l'analizzatore sintattico rileva uno script, deve arrestarlo ed eseguirlo prima di poter continuare l'analisi del codice HTML. Nel caso di uno script esterno, l'analizzatore sintattico è anche costretto ad attendere il download della risorsa, il che potrebbe comportare uno o più round trip di rete e ritardare il primo rendering della pagina. Consulta la sezione Aggiunta di interattività con JavaScript per scoprire di più su come JavaScript influisce sul percorso di rendering critico.

Suggerimenti

Dovresti evitare e ridurre al minimo l'uso di JavaScript di blocco, in particolare gli script esterni che devono essere recuperati prima di poter essere eseguiti. Gli script necessari per visualizzare i contenuti della pagina possono essere incorporati per evitare richieste di rete aggiuntive. Tuttavia, i contenuti incorporati devono essere di piccole dimensioni e devono essere eseguiti rapidamente per offrire buone prestazioni. Gli script che non sono fondamentali per il rendering iniziale devono essere resi asincroni o differiti fino a dopo il primo rendering. Tieni presente che, per far sì che questo possa migliorare il tempo di caricamento, devi anche ottimizzare la pubblicazione del CSS.

JavaScript incorporato

Gli script di blocco esterni obbligano il browser ad attendere il recupero di JavaScript. Ciò potrebbe aggiungere uno o più round trip di rete prima che la pagina possa essere visualizzata. Se gli script esterni sono di piccole dimensioni, puoi incorporarne i contenuti direttamente nel documento HTML ed evitare la latenza delle richieste di rete. Ad esempio, se il documento HTML ha il seguente aspetto: 
<html>
  <head>
    <script type="text/javascript" src="small.js"></script>
  </head>
  <body>
    <div>
      Hello, world!
    </div>
  </body>
</html>
E la risorsa small.js ha il seguente aspetto: 
  /* contents of a small JavaScript file */
Puoi incorporare lo script nel seguente modo: 
<html>
  <head>
    <script type="text/javascript">
      /* contents of a small JavaScript file */
    </script>
  </head>
  <body>
    <div>
      Hello, world!
    </div>
  </body>
</html>
L'incorporamento dei contenuti dello script elimina la richiesta esterna per small.js e consente al browser di offrire un tempo più rapido per il primo rendering. Tuttavia, tieni presente che l'incorporamento aumenta anche le dimensioni del documento HTML e che gli stessi contenuti dello script potrebbero dover essere incorporati in più pagine. Di conseguenza, ti consigliamo di incorporare solo script di piccole dimensioni per ottenere il miglior rendimento possibile.

Imposta JavaScript come asincrono

Per impostazione predefinita, JavaScript blocca la creazione del DOM e, di conseguenza, ritarda il tempo di rendering iniziale. Per impedire a JavaScript di bloccare l'analizzatore sintattico, ti consigliamo di utilizzare l'attributo HTML async negli script esterni. Ad esempio: 
<script async src="my.js">
Consulta la sezione Blocco dell'analisi e JavaScript asincrono per saperne di più sugli script asincroni. Tieni presente che non è garantita l'esecuzione degli script asincroni nell'ordine specificato e non è consigliabile utilizzare document.write. Gli script che dipendono dall'ordine di esecuzione o che devono accedere o modificare il DOM o il CSSOM della pagina potrebbero dover essere riscritti per tenere conto di questi vincoli.

Ritardo di caricamento del file JavaScript

Il caricamento e l'esecuzione di script che non sono necessari per il rendering iniziale della pagina possono essere differiti fino al termine del rendering iniziale o di altre parti fondamentali della pagina. In questo modo puoi ridurre il conflitto di risorse e migliorare le prestazioni.

Domande frequenti

Come devo comportarmi se utilizzo una raccolta di JavaScript come jQuery?
Molte librerie JavaScript, come JQuery, vengono utilizzate per migliorare la pagina al fine di aggiungere ulteriori interattività, animazioni e altri effetti. Tuttavia, molti di questi comportamenti possono essere aggiunti in sicurezza dopo la visualizzazione dei contenuti above the fold. Esamina come rendere asincrono questo codice JavaScript o posticipane il caricamento.
Che cosa succede se utilizzo un framework JavaScript per costruire la pagina?
Se i contenuti della pagina vengono creati mediante codice JavaScript lato client, devi valutare la possibilità di incorporare i moduli JavaScript pertinenti per evitare ulteriori round trip di rete. Allo stesso modo, l'utilizzo del rendering lato server può migliorare notevolmente le prestazioni del primo caricamento della pagina: esegui il rendering dei modelli JavaScript sul server per una prima visualizzazione veloce, quindi utilizza i modelli lato client dopo il caricamento della pagina. Per ulteriori informazioni sul rendering lato server, consulta http://youtu.be/VKTWdaupft0?t=14m28s.

Feedback

Hai trovato utile questa pagina?