Regole e consigli di PageSpeed

Ilya Grigorik
Ilya Grigorik

Pubblicato il 17 agosto 2018

Questa guida esamina le regole di PageSpeed Insights nel contesto: a cosa prestare attenzione durante l'ottimizzazione del percorso di rendering critico e perché.

Per garantire il tempo più rapido per la prima visualizzazione, minimizza ed elimina (se possibile) il numero di risorse critiche sulla pagina, riduci al minimo il numero di byte critici scaricati e ottimizza la lunghezza del percorso critico.

Le risorse JavaScript sono bloccate dal parser per impostazione predefinita, a meno che non siano contrassegnate come async o aggiunte utilizzando uno snippet JavaScript speciale. Il blocco del codice JavaScript da parte del parser costringe il browser ad attendere il CSSOM e mette in pausa la creazione del DOM, il che a sua volta può ritardare notevolmente il tempo necessario per la prima visualizzazione.

Preferisci le risorse JavaScript asincrone

Le risorse asincrone sbloccano l'analizzatore del documento e consentono al browser di evitare il blocco sul CSSOM prima di eseguire lo script. Spesso, se lo script può utilizzare l'attributo async, significa anche che non è essenziale per il primo rendering. Potresti caricare gli script in modo asincrono dopo il rendering iniziale.

Evita le chiamate al server sincrone

Utilizza il metodo navigator.sendBeacon() per limitare i dati inviati da XMLHttpRequest negli gestori unload. Poiché molti browser richiedono richieste sincrone, possono rallentare le transizioni delle pagine, a volte anche in modo significativo. Il codice riportato di seguito mostra come utilizzare navigator.sendBeacon() per inviare dati al server nell'handler pagehide anziché nell'handler unload.

<script>
  function() {
    window.addEventListener('pagehide', logData, false);
    function logData() {
      navigator.sendBeacon(
        'https://putsreq.herokuapp.com/Dt7t2QzUkG18aDTMMcop',
        'Sent by a beacon!');
    }
  }();
</script>

Il metodo fetch() offre un modo migliore per richiedere i dati in modo asincrono. fetch() elabora le risposte utilizzando le promesse anziché più gestori eventi. A differenza della risposta a un XMLHttpRequest, una risposta fetch() è un oggetto stream. Ciò significa che una chiamata a json() restituisce anche una promessa.

<script>
  fetch('./api/some.json')
    .then(
      function(response) {
        if (response.status !== 200) {
          console.log('Looks like there was a problem. Status Code: ' +  response.status);
          return;
        }
        // Examine the text in the response
        response.json().then(function(data) {
          console.log(data);
        });
      }
    )
    .catch(function(err) {
      console.log('Fetch Error :-S', err);
    });
</script>

Il metodo fetch() può gestire anche le richieste POST.

<script>
  fetch(url, {
    method: 'post',
    headers: {
      "Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
    },
    body: 'foo=bar&lorem=ipsum'
  }).then(function() { // Additional code });
</script>

Rimandare l'analisi del codice JavaScript

Per ridurre al minimo il lavoro che il browser deve eseguire per eseguire il rendering della pagina, riassegna gli script non essenziali che non sono fondamentali per la costruzione dei contenuti visibili per il rendering iniziale.

Evita JavaScript con tempi di esecuzione lunghi

Il codice JavaScript a esecuzione prolungata impedisce al browser di costruire il DOM, il CSSOM ed eseguire il rendering della pagina, quindi riassegna a un secondo momento qualsiasi logica di inizializzazione non essenziale per il primo rendering. Se è necessario eseguire una sequenza di inizializzazione lunga, valuta la possibilità di suddividerla in più fasi per consentire al browser di elaborare altri eventi nel frattempo.

Ottimizza l'utilizzo del CSS

Il CSS è necessario per costruire la struttura di rendering e JavaScript spesso si blocca sul CSS durante la costruzione iniziale della pagina. Assicurati che tutti i CSS non essenziali siano contrassegnati come non critici (ad esempio, query di stampa e altre query multimediali) e che la quantità di CSS fondamentale e i tempi di pubblicazione siano il più possibile ridotti.

Inserisci risorse CSS nell'intestazione del documento

Specifica tutte le risorse CSS il prima possibile all'interno del documento HTML in modo che il browser possa rilevare i tag <link> e inviare la richiesta per il CSS il prima possibile.

Evita le importazioni CSS

La direttiva di importazione CSS (@import) consente a uno stile di importare regole da un altro file di stile. Tuttavia, evita queste direttive perché introducono ulteriori viaggi di andata e ritorno nel percorso critico: le risorse CSS importate vengono rilevate solo dopo che lo stile CSS con la regola @import stessa è stato ricevuto e analizzato.

Incorpora risorse CSS che bloccano la visualizzazione

Per ottenere le migliori prestazioni, ti consigliamo di incorporare il CSS critico direttamente nel documento HTML. In questo modo vengono eliminati ulteriori round trip nel percorso critico e, se eseguiti correttamente, è possibile ottenere una lunghezza del percorso critico "one round trip" in cui solo l'HTML è una risorsa bloccante.

Feedback