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é.
Elimina JavaScript e CSS che bloccano la visualizzazione
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.
Ottimizza l'utilizzo di JavaScript
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.