Data di pubblicazione: 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é.
Elimina JavaScript e CSS che bloccano la visualizzazione
Per ottenere il tempo più rapido per il primo rendering, riduci al minimo ed elimina (dove possibile) il numero di risorse critiche sulla pagina, riduci al minimo il numero di byte critici scaricati e ottimizza la lunghezza del percorso critico.
Ottimizza l'utilizzo di JavaScript
Le risorse JavaScript bloccano l'analizzatore per impostazione predefinita, a meno che non siano contrassegnate come async o aggiunte utilizzando uno snippet JavaScript speciale. Il codice JavaScript che blocca l'analizzatore forza il browser ad attendere il CSSOM e mette in pausa la creazione del DOM, il che a sua volta può ritardare in modo significativo il tempo necessario per il primo rendering.
Preferisci le risorse JavaScript asincrone
Le risorse asincrone sbloccano l'analizzatore sintattico 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. Valuta la possibilità di caricare gli script in modo asincrono dopo il rendering iniziale.
Evita le chiamate sincrone al server
Utilizza il metodo navigator.sendBeacon() per limitare i dati inviati da XMLHttpRequest nei gestori unload. Poiché molti browser richiedono che queste richieste siano sincrone, possono rallentare le transizioni di pagina, a volte in modo evidente. Il seguente codice mostra come utilizzare navigator.sendBeacon() per inviare dati al server nel gestore pagehide anziché nel gestore 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 Promise anziché più gestori di eventi. A differenza della risposta a un XMLHttpRequest, una risposta fetch() è un oggetto stream. Ciò significa che anche una chiamata a json() restituisce 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ò anche gestire 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>
Rimanda l'analisi di JavaScript
Per ridurre al minimo la quantità di lavoro che il browser deve eseguire per eseguire il rendering della pagina, rimanda gli script non essenziali che non sono fondamentali per la creazione dei contenuti visibili per il rendering iniziale.
Evita JavaScript con tempi di esecuzione lunghi
JavaScript con tempi di esecuzione lunghi impedisce al browser di creare il DOM, il CSSOM e di eseguire il rendering della pagina, quindi rimanda 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 creare l'albero di rendering e JavaScript spesso blocca il CSS durante la creazione iniziale della pagina. Assicurati che tutti i CSS non essenziali siano contrassegnati come non critici (ad esempio, query supporti di stampa e di altro tipo) e che la quantità di CSS critici e il tempo necessario per pubblicarli siano ridotti al minimo.
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 un foglio di stile di importare regole da un altro file di foglio di stile. Tuttavia, evita queste istruzioni perché introducono ulteriori andate e ritorno nel percorso critico: le risorse CSS importate vengono rilevate solo dopo che il foglio di stile CSS con la regola @import stessa è stato ricevuto e analizzato.
Incorpora risorse CSS che bloccano la visualizzazione
Per ottenere il massimo rendimento, ti consigliamo di incorporare il CSS critico direttamente nel documento HTML. In questo modo si eliminano i roundtrip aggiuntivi nel percorso critico e, se l'operazione viene eseguita correttamente, è possibile ottenere una lunghezza del percorso critico di "un roundtrip" in cui solo l'HTML è una risorsa di blocco.