Rimuovi i file JavaScript che bloccano il rendering

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

Panoramica

Prima che un browser possa mostrare una pagina all'utente, deve sottoporla ad analisi. Se riscontra uno script esterno che blocca il rendering, deve interrompersi e scaricare tale file JavaScript. Ogniqualvolta venga eseguita, tale operazione comporta un tempo di round trip a livello di rete, che genera un ritardo sulla prima visualizzazione della pagina.

Consigli

Il file JavaScript necessario per visualizzare la parte above the fold della pagina deve essere incorporato. Il file JavaScript necessario per aggiungere ulteriori funzionalità alla pagina, invece, deve essere posticipato finché i contenuti above the fold non sono stati pubblicati. Ricorda che, per far sì che questo possa ridurre i tempi di caricamento, devi anche ottimizzare la pubblicazione dei file CSS.

File JavaScript incorporato di piccole dimensioni

Se gli script esterni hanno dimensioni ridotte, puoi includerli direttamente nel documento HTML. Tale metodo di incorporamento di file di piccole dimensioni consente al browser di procedere al rendering della pagina. Ad esempio, se il documento HTML ha questo 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 questo aspetto:

  /* contents of a small JavaScript file */

Lo script può essere incorporato nel seguente modo:

<html>
  <head>
    <script type="text/javascript">
      /* contents of a small JavaScript file */
    </script>
  </head>
  <body>
    <div>
      Hello, world!
    </div>
  </body>
</html>

Questo consente di eliminare la richiesta esterna relativa alla risorsa small.js incorporandola nel documento HTML.

Ritardo di caricamento del file JavaScript

Per impedire che il file JavaScript blocchi il caricamento della pagina, è consigliabile l'utilizzo dell'attributo HTML asincrono durante il caricamento del file JavaScript. Ad esempio:

<script async src="my.js">

Se le tue risorse JavaScript utilizzano document.write, non è sicuro utilizzare il caricamento asincrono. È consigliabile riscrivere gli script che utilizzano document.write in modo che utilizzino una tecnica differente.

Inoltre, quando carichi il file JavaScript in modo asincrono, se la pagina carica script che dipendono l'uno dall'altro, devi prestare particolare attenzione e assicurarti che questi vengano caricati dall'applicazione nell'ordine di dipendenza corretto.

Domande frequenti

Come devo comportarmi se utilizzo una raccolta di JavaScript come jQuery?
Molte raccolte di JavaScript, come JQuery, vengono utilizzate per ottimizzare la pagina con l'aggiunta di ulteriori elementi interattivi, animazioni e altri effetti. Tuttavia, molti di questi comportamenti possono essere aggiunti in modo sicuro dopo il rendering dei contenuti above the fold. Valuta la possibilità di posticipare l'esecuzione e il caricamento di questo file JavaScript rispetto al caricamento della pagina.
Come devo procedere se utilizzo una struttura JavaScript per sviluppare la pagina?
Se i contenuti della pagina vengono sviluppati mediante una struttura JavaScript lato client, devi valutare la possibilità di incorporare i moduli JavaScript pertinenti evitando così ulteriori round trip a livello di rete. Allo stesso modo, se sfrutti il rendering lato server puoi migliorare sensibilmente il rendimento del primo caricamento della pagina: visualizza i modelli JS sul server, incorpora i risultati nel documento HTML, quindi utilizza i modelli lato client una volta che l'applicazione è stata caricata. Per ulteriori informazioni sul rendering lato server, consulta http://youtu.be/VKTWdaupft0?t=14m28s.