Gli script di terze parti influiscono sul rendimento, per questo è importante verificarli regolarmente e utilizzare tecniche efficienti per caricarli. Questo codelab mostra come ottimizzare il caricamento delle risorse di terze parti. e tratta le seguenti tecniche:
Rimandare il caricamento dello script
Caricamento lento delle risorse non critiche
Preconnessione alle origini richieste
L'app di esempio inclusa presenta una semplice pagina web con tre funzionalità provenienti da fonti di terze parti:
Un video incorporato
Una libreria di visualizzazione dei dati per il rendering di un grafico a linee
Un widget di condivisione sui social media
Inizierai con la misurazione del rendimento dell'app e poi applicherai ogni tecnica per migliorare i diversi aspetti del rendimento dell'app.
Misurare le prestazioni
Innanzitutto, apri l'app di esempio nella visualizzazione a schermo intero:
- Fai clic su Remixa per modificare per rendere modificabile il progetto.
- Per visualizzare l'anteprima del sito, premi Visualizza app. Quindi premi
Schermo intero
.
Esegui un controllo delle prestazioni di Lighthouse sulla pagina per stabilire le prestazioni di base:
- Premi "Ctrl+Maiusc+J" (o "Comando+Opzione+J" su Mac) per aprire DevTools.
- Fai clic sulla scheda Lighthouse.
- Fai clic su Dispositivo mobile.
- Seleziona la casella di controllo Rendimento. Puoi deselezionare le altre caselle di controllo nella sezione Controlli.
- Fai clic su 3G rapido simulato, rallentamento della CPU 4x.
- Seleziona la casella di controllo Cancella dati archiviati.
- Fai clic su Esegui controlli.
Quando esegui un controllo sul tuo computer, i risultati esatti possono variare, ma dovresti notare che il tempo impiegato per la prima visualizzazione con contenuti (FCP) è piuttosto elevato e che Lighthouse suggerisce due opportunità di indagine: Eliminare le risorse di blocco della visualizzazione e Preconnessione alle origini richieste. Anche se le metriche sono tutte in verde, le ottimizzazioni produrranno comunque miglioramenti.
Rimanda JavaScript di terze parti
Il controllo Elimina le risorse di blocco della visualizzazione ha rilevato che puoi risparmiare tempo posticipando uno script proveniente da d3js.org:
D3.js è una libreria JavaScript per la creazione di visualizzazioni di dati. Il file script.js nell'app di esempio utilizza le funzioni di utilità D3 per creare il grafico a linee SVG e aggiungerlo alla pagina. L'ordine delle operazioni è importante: script.js deve essere eseguito dopo che il documento è stato analizzato e la libreria D3 è stata caricata ed è per questo che viene inclusa subito prima del tag </body> di chiusura in index.html.
Tuttavia, lo script D3 è incluso nel valore <head> della pagina, che blocca l'analisi del documento rimanente:
Due attributi magici possono sbloccare il parser quando viene aggiunto al tag script:
asyncassicura che gli script vengano scaricati in background ed eseguiti alla prima opportunità al termine del download.deferassicura che gli script vengano scaricati in background ed eseguiti dopo l'analisi del completamento.
Poiché questo grafico non è fondamentale per l'intera pagina e molto probabilmente sarà below the fold, utilizza defer per assicurarti che non ci sia blocco dei parser.
Passaggio 1: carica lo script in modo asincrono con l'attributo defer
Nella riga 17 in index.html, aggiungi l'attributo defer all'elemento <script>:
<script src="https://d3js.org/d3.v3.min.js" defer></script>
Passaggio 2: assicurati che l'ordine delle operazioni sia corretto
Ora che D3 è stato posticipato, script.js verrà eseguito prima che D3 sia pronto, causando un errore.
Gli script con l'attributo defer vengono eseguiti nell'ordine in cui sono stati specificati. Per assicurarti che script.js venga eseguito dopo che D3 è pronto, aggiungi defer e spostalo in alto in <head> del documento, subito dopo l'elemento <script> D3. Ora non blocca più il parser e il download inizia prima.
<script src="https://d3js.org/d3.v3.min.js" defer></script>
<script src="./script.js" defer></script>
Caricamento lento delle risorse di terze parti
Tutte le risorse below the fold sono adatte al caricamento lento.
L'app di esempio contiene un video di YouTube incorporato in un iframe. Per verificare quante richieste effettua la pagina e quali provengono dall'iframe di YouTube incorporato:
- Per visualizzare l'anteprima del sito, premi Visualizza app. Quindi premi
Schermo intero
.
- Premi "Ctrl+Maiusc+J" (o "Comando+Opzione+J" su Mac) per aprire DevTools.
- Fai clic sulla scheda Rete.
- Seleziona la casella di controllo Disabilita cache.
- Seleziona 3G rapido nel menu a discesa Limitazione.
- Ricarica la pagina.
Il riquadro Rete mostra che la pagina ha effettuato un totale di 28 richieste e trasferito quasi 1 MB di risorse compresse.
Per identificare le richieste effettuate dal iframe di YouTube, cerca l'ID video 6lfaiXM6waw nella colonna Iniziatore. Per raggruppare tutte le richieste per dominio:
Nel riquadro Rete, fai clic con il tasto destro del mouse sul titolo di una colonna.
Nel menu a discesa, seleziona la colonna Domini.
Per ordinare le richieste in base al dominio, fai clic sul titolo della colonna Domini.
Il nuovo ordinamento rivela che sono presenti richieste aggiuntive per i domini Google. In totale, l'iframe di YouTube effettua 14 richieste di script, fogli di stile, immagini e caratteri. Tuttavia, a meno che gli utenti non scorrano effettivamente verso il basso per riprodurre il video, non hanno bisogno di tutti questi asset.
Aspettando il caricamento lento del video finché un utente scorre verso il basso fino a quella sezione della pagina, riduci il numero di richieste effettuate inizialmente dalla pagina. Questo approccio consente di evitare e velocizza il caricamento iniziale.
Un modo per implementare il caricamento lento consiste nell'utilizzare Intersection Observer, un'API browser che ti avvisa quando un elemento entra o esce dall'area visibile del browser.
Passaggio 1: evita il caricamento iniziale del video
Per eseguire il caricamento lento dell'iframe del video, devi prima impedirne il caricamento come di consueto. Per specificare l'URL del video, sostituisci l'attributo src con l'attributo data-src:
<iframe width="560" height="315" data-src="https://www.youtube.com/embed/lS9D6w1GzGY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
data-src è un attributo di dati, che consente di memorizzare informazioni aggiuntive sugli elementi HTML standard. A un attributo dei dati può essere assegnato qualsiasi nome, purché inizi con "data-".
Un iframe senza src semplicemente non viene caricato.
Passaggio 2: usa lo strumento di osservazione delle intersezioni per il caricamento lento del video
Per caricare il video quando un utente lo scorre, devi sapere quando succede. È qui che entra in gioco l'API Intersection Observer. L'API Intersection Observer ti consente di registrare una funzione di callback che viene eseguita ogni volta che un elemento che vuoi monitorare entra o esce dall'area visibile.
Per iniziare, crea un nuovo file e assegnagli il nome lazy-load.js:
- Fai clic su Nuovo file e assegnagli un nome.
- Fai clic su Aggiungi questo file.
Aggiungi il tag dello script all'intestazione del documento:
<script src="/lazy-load.js" defer></script>
In lazy-load.js, crea un nuovo IntersectionObserver e passagli una funzione di callback da eseguire:
// create a new Intersection Observer
let observer = new IntersectionObserver(callback);
Ora assegna a observer un elemento target da guardare (in questo caso l'iframe del video) passandolo come argomento nel metodo observe:
// the element that you want to watch
const element = document.querySelector('iframe');
// register the element with the observe method
observer.observe(element);
callback riceve un elenco di oggetti IntersectionObserverEntry e l'oggetto IntersectionObserver stesso. Ogni voce contiene un elemento target e le proprietà che descrivono le sue dimensioni, la sua posizione, l'ora in cui è entrata nell'area visibile e altro ancora. Una delle proprietà di IntersectionObserverEntry è isIntersecting, un valore booleano uguale a true quando l'elemento entra nell'area visibile.
In questo esempio, target è il iframe. isIntersecting equivale a true quando target entra nell'area visibile. Per vedere questa funzionalità in azione, sostituisci callback con la seguente funzione:
let observer = new IntersectionObserver(callback);
let observer = new IntersectionObserver(function(entries, observer) {
entries.forEach(entry => {
console.log(entry.target);
console.log(entry.isIntersecting);
});
});
- Per visualizzare l'anteprima del sito, premi Visualizza app. Quindi premi
Schermo intero
.
- Premi "Ctrl+Maiusc+J" (o "Comando+Opzione+J" su Mac) per aprire DevTools.
- Fai clic sulla scheda Console.
Prova a scorrere verso l'alto e verso il basso. Dovresti vedere il valore della modifica isIntersecting e l'elemento target registrato nella console.
Per caricare il video quando l'utente scorre fino alla sua posizione, utilizza isIntersecting come condizione per eseguire una funzione loadElement, che recupera il valore dall'elemento data-src dell'elemento iframe e lo imposta come attributo src dell'elemento iframe. La sostituzione attiva il caricamento del video. Quindi, una volta caricato il video, chiama il metodo unobserve su observer per interrompere la visione dell'elemento target:
let observer = new IntersectionObserver(function (entries, observer) {
entries.forEach(entry => {
console.log(entry.target);
console.log(entry.isIntersecting);
});
});
if (entry.isIntersecting) {
// do this when the element enters the viewport
loadElement(entry.target);
// stop watching
observer.unobserve(entry.target);
}
});
});
function loadElement(element) {
const src = element.getAttribute('data-src');
element.src = src;
}
Passaggio 3. Rivaluta il rendimento
Per vedere come sono cambiate le dimensioni e il numero di risorse, apri il riquadro Rete di DevTools e ricarica di nuovo la pagina. Il riquadro Rete mostra che la pagina ha effettuato 14 richieste e solo 260 kB. È un miglioramento significativo.
Ora scorri la pagina verso il basso e tieni d'occhio il riquadro Rete. Quando arrivi al video, dovresti vedere la pagina che attiva richieste aggiuntive.
Precollegati alle origini richieste
Hai differito il codice JavaScript non critico e hai eseguito il caricamento lento delle richieste di YouTube, quindi ora è il momento di ottimizzare i restanti contenuti di terze parti.
L'aggiunta dell'attributo rel=preconnect a un link indica al browser di stabilire una connessione a un dominio prima che venga effettuata la richiesta per quella risorsa. Questo attributo viene utilizzato al meglio nelle origini che forniscono risorse di cui hai la certezza di aver bisogno per la pagina.
Il controllo di Lighthouse che hai eseguito nel primo passaggio suggerito in Precollega alle origini richieste: puoi risparmiare circa 400 ms stabilindo connessioni iniziali a staticxx.facebook.com e youtube.com:
Dal momento che il video di YouTube è ora con caricamento lento, rimane solo staticxx.facebook.com, la fonte del widget di condivisione sui social media. Stabilire una connessione anticipata a questo dominio è semplice come aggiungere un tag <link> al <head> del documento:
<link rel="preconnect" href="https://staticxx.facebook.com">
Rivaluta il rendimento
Questo è lo stato della pagina dopo l'ottimizzazione. Segui i passaggi della sezione Misurare le prestazioni del codelab per eseguire un altro controllo di Lighthouse.
