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 garantire il tempo più rapido per la prima visualizzazione, minimizza ed elimina (ove possibile) il numero di risorse critiche sulla pagina, riduci al minimo il numero di byte critici scaricati e ottimizza la lunghezza del percorso critico.
Ottimizzare l'utilizzo di JavaScript
Le risorse JavaScript bloccano i parser per impostazione predefinita, a meno che non vengano contrassegnate come async o aggiunte tramite uno speciale snippet JavaScript. 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 la prima visualizzazione.
Preferenza alle risorse JavaScript asincrone
Le risorse asincrone sbloccano il parser dei documenti e consentono al browser di evitare il blocco dei CSSOM prima di eseguire lo script. Spesso, se lo script può utilizzare l'attributo async, significa anche che non è essenziale per la prima visualizzazione. 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 XMLHttpRequests nei
gestori unload. Poiché molti browser richiedono richieste sincrone, possono rallentare le transizioni delle pagine, a volte anche in modo significativo. 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 nuovo metodo fetch() offre un modo semplice per richiedere i dati in modo asincrono. Poiché non è ancora disponibile ovunque, dovresti usare il rilevamento delle funzionalità per verificarne la presenza prima dell'uso. Questo metodo elabora le risposte con promesse anziché con più gestori di eventi. A differenza della risposta a una XMLHttpRequest, una risposta di recupero è un oggetto stream che inizia in Chrome 43. 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 del codice JavaScript
Per ridurre al minimo il lavoro che il browser deve eseguire per eseguire il rendering della pagina, posticipa gli script non essenziali che non sono fondamentali per la creazione dei contenuti visibili per il rendering iniziale.
Evita JavaScript a lunga esecuzione
Un codice JavaScript a lunga esecuzione impedisce al browser di creare il DOM, il CSSOM e il rendering della pagina, quindi rimanda a un secondo momento qualsiasi logica e funzionalità di inizializzazione non essenziali per la prima visualizzazione. Se è necessario eseguire una sequenza di inizializzazione lunga, valuta la possibilità di suddividerla in più fasi per consentire al browser di elaborare altri eventi intermedi.
Ottimizza l'utilizzo del CSS
È richiesto CSS per costruire l'albero di rendering e spesso JavaScript blocca il codice CSS durante la creazione 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.
Evitare importazioni CSS
L'istruzione CSS import (@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 roundtrip 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 le migliori prestazioni, ti consigliamo di incorporare il CSS fondamentale direttamente nel documento HTML. In questo modo si eliminano ulteriori roundtrip nel percorso critico e, se eseguito correttamente, è possibile ottenere una lunghezza di percorso critica di "un roundtrip" in cui solo l'HTML è una risorsa di blocco.