Rimuovi il codice JavaScript che blocca il rendering

di Gemini Advanced. Questa regola viene attivata quando PageSpeed Insights rileva che il codice HTML fa riferimento a un blocco il file JavaScript esterno 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 arrestarsi ed eseguirlo prima di continuare ad analizzare il codice HTML. Nel caso di uno script esterno, anche l'analizzatore sintattico viene è forzato ad attendere il download della risorsa, il che potrebbe comportare uno o più round trip di rete e il tempo necessario per la prima visualizzazione della pagina. Vedi Aggiunta di interattività con JavaScript per scoprire di più su come JavaScript influisce sulle attività più importanti il percorso di rendering.

Consigli

Dovresti evitare e ridurre al minimo l'uso di bloccare JavaScript, in particolare gli script esterni che devono essere recuperati prima di poter essere eseguiti. Script necessari per visualizzare i contenuti della pagina possono essere in linea per evitare richieste di rete aggiuntive, ma i contenuti incorporati devono essere ridotti e deve essere eseguita rapidamente per ottenere buone prestazioni. Script non fondamentali per l'iniziale il rendering deve essere reso asincrono o differito fino a dopo la prima visualizzazione. Ricorda che, per migliorare il tempo di caricamento, è necessario ottimizzare la pubblicazione dei CSS.

JavaScript incorporato

Gli script di blocco esterni obbligano il browser ad attendere il recupero di JavaScript. che può aggiungere uno o più round trip di rete prima che venga eseguito il rendering della pagina. Se l'oggetto esterno gli script sono piccoli, puoi incorporarne i contenuti direttamente nel documento HTML ed evitare 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 è così: 
  /* contents of a small JavaScript file */
Quindi puoi incorporare lo script come segue: 
<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 il browser per velocizzare il rendering iniziale. Tuttavia, tieni presente che l'incorporamento aumenta le dimensioni del documento HTML e che gli stessi contenuti dello script potrebbero dover essere incorporati più pagine. Di conseguenza, per un rendimento ottimale dovresti incorporare solo script di piccole dimensioni.

Rendi JavaScript asincrono

Per impostazione predefinita, JavaScript blocca la creazione del DOM e di conseguenza ritarda il tempo necessario per la prima visualizzazione. A impedisce a JavaScript di bloccare il parser; consigliamo di utilizzare l'elemento HTML async sugli script esterni. Ad esempio: 
<script async src="my.js">
Vedi Blocco del parser e JavaScript asincrono per scoprire di più sugli script asincroni. Tieni presente che l'esecuzione degli script asincroni non è garantita nell'ordine specificato e non devono utilizzare document.write. Script che dipendono dall'ordine di esecuzione o che devono accedere o modificare potrebbe essere necessario riscrivere il DOM o il CSSOM della pagina per tenere conto di questi vincoli.

Ritardo di caricamento del file JavaScript

Il caricamento e l'esecuzione di script non necessari per il rendering della pagina iniziale potrebbero essere essere differita fino al termine del rendering iniziale o di altre parti fondamentali della pagina Caricamento in corso. Ciò può aiutare a 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 aggiungendo ulteriori interattività, animazioni e altri effetti. Tuttavia, molti di questi i comportamenti possono essere aggiunti in sicurezza dopo il rendering dei contenuti above the fold. Verifica se il codice JavaScript è asincrono o ne posticipa il caricamento.
Cosa devo fare se utilizzo un framework JavaScript per costruire la pagina?
Se i contenuti della pagina sono creati tramite JavaScript lato client, allora dovresti valutare l'incorporamento dei moduli JavaScript pertinenti per evitare di round trip nella rete. Analogamente, l'utilizzo del rendering lato server può migliorare le prestazioni del primo caricamento della pagina: eseguire il rendering dei modelli JavaScript sul server per la pubblicazione eseguire il rendering veloce e poi usare modelli lato client una volta caricata la pagina. Per ulteriori informazioni sul rendering lato server, consulta http://youtu.be/VKTWdaupft0?t=14m28s.

Feedback

Hai trovato utile questa pagina?

.