Questa guida esamina le regole di PageSpeed Insights nel contesto: a cosa prestare attenzione quando si ottimizza il percorso di rendering critico e perché.
Elimina i file JavaScript e CSS che bloccano la visualizzazione
Per garantire il tempo più rapido per il primo rendering, riduci al minimo 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'uso di JavaScript
Le risorse JavaScript bloccano l'analizzatore sintattico per impostazione predefinita, a meno che non siano contrassegnate come async o aggiunte tramite uno snippet JavaScript speciale. Il blocco del parser in JavaScript 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 risorse JavaScript asincrone
Le risorse asincrone sbloccano l'analizzatore sintattico del documento e consentono al browser di evitare il blocco su CSSOM prima dell'esecuzione dello 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.
Evitare chiamate sincrone al server
Utilizza il metodo navigator.sendBeacon() per limitare i dati inviati da XMLHttpRequests nei gestori unload. Poiché molti browser richiedono che queste richieste siano sincrone, possono rallentare le transizioni di pagina, a volte 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, ti consigliamo di utilizzare il rilevamento delle funzionalità per verificarne la presenza prima dell'uso. Questo metodo elabora le risposte con Promises 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 una chiamata a json() restituisce anche una Promise.
<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 la quantità di lavoro che il browser deve eseguire per visualizzare la pagina, posticipa eventuali script non essenziali che non sono fondamentali per creare i contenuti visibili per il rendering iniziale.
Evita JavaScript a lunga esecuzione
La lunga esecuzione di JavaScript impedisce al browser di creare il DOM, il CSSOM e il rendering della pagina, quindi rimanda fino a un momento successivo qualsiasi logica e funzionalità di inizializzazione non essenziali per il primo rendering. Se deve essere eseguita una lunga sequenza di inizializzazione, può essere opportuno suddividerla in più fasi per consentire al browser di elaborare altri eventi intermedi.
Ottimizza l'utilizzo di CSS
Il CSS è necessario per realizzare la struttura di rendering e spesso JavaScript blocca i file CSS durante la creazione iniziale della pagina. Assicurati che tutti i CSS non essenziali siano contrassegnati come non critici (ad esempio, query di stampa o di altro tipo) e che la quantità di codice CSS fondamentale e il tempo per la pubblicazione siano i più ridotti possibile.
Inserisci risorse CSS nell'intestazione del documento
Specifica tutte le risorse CSS il prima possibile nel 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 le regole da un altro file del foglio di stile. Tuttavia, evita queste istruzioni perché introducono ulteriori round trip nel percorso critico: le risorse CSS importate vengono rilevate solo dopo la ricezione e l'analisi del foglio di stile CSS con la regola @import stessa.
Incorpora risorse CSS che bloccano la visualizzazione
Per un rendimento ottimale, ti consigliamo di incorporare il codice CSS fondamentale direttamente nel documento HTML. In questo modo si eliminano round trip aggiuntivi nel percorso critico e, se eseguito correttamente, è possibile fornire una lunghezza di percorso critica di "un roundtrip" in cui solo l'HTML è una risorsa di blocco.