Se uno script di terze parti rallenterà il caricamento della pagina, hai due opzioni per migliorare il rendimento:
- Rimuovila se non aggiunge un valore chiaro al tuo sito.
- Ottimizza il processo di caricamento.
Questo post spiega come ottimizzare il processo di caricamento degli script di terze parti con le seguenti tecniche:
- Utilizzo dell'attributo
async
odefer
sui tag<script>
- Stabilire connessioni iniziali con le origini richieste
- Caricamento lento
- Ottimizzare la pubblicazione degli script di terze parti
Usa async
o defer
Poiché gli script sincroni ritardano la creazione e il rendering del DOM, dovresti sempre caricare gli script di terze parti in modo asincrono, a meno che non sia necessario eseguirli prima che sia possibile visualizzare la pagina.
Gli attributi async
e defer
indicano al browser che può procedere all'analisi del codice HTML durante il caricamento dello script in background, dopodiché lo script viene eseguito dopo il caricamento. In questo modo, i download degli script non bloccano la creazione del DOM o il rendering della pagina, consentendo all'utente di visualizzare la pagina prima che tutti gli script abbiano terminato il caricamento.
<script async src="script.js">
<script defer src="script.js">
La differenza tra gli attributi async
e defer
si verifica quando il browser esegue gli script.
async
Gli script con l'attributo async
vengono eseguiti alla prima opportunità al termine del download e prima dell'evento load della finestra. Ciò significa che è possibile (e probabile) che gli script async
non vengano eseguiti nell'ordine in cui sono visualizzati nel codice HTML. Significa anche che possono interrompere la creazione del DOM se terminano il download mentre il parser è ancora in funzione.
![Diagramma dello script di blocco del parser con attributo asincrono](https://web.developers.google.cn/static/articles/efficiently-load-third-party-javascript/image/diagram-parser-blocking-020263bc7658c.png?authuser=0&hl=it)
async
possono comunque bloccare l'analisi HTML.defer
Gli script con l'attributo defer
vengono eseguiti al termine dell'analisi HTML, ma prima dell'evento DOMContentLoaded
. defer
assicura che gli script vengano eseguiti nell'ordine in cui appaiono nel codice HTML e
non bloccano il parser.
![Diagramma del flusso del parser con uno script con attributo defer](https://web.developers.google.cn/static/articles/efficiently-load-third-party-javascript/image/diagram-parser-flow-a-s-f9a9ef751f974.png?authuser=0&hl=it)
defer
attendono l'esecuzione fino al termine dell'analisi del codice HTML da parte del browser.- Utilizza
async
se è importante che lo script venga eseguito prima durante il processo di caricamento. - Utilizza
defer
per risorse meno critiche, ad esempio un video player below the fold.
L'utilizzo di questi attributi può accelerare notevolmente il caricamento della pagina. Ad esempio, Telegraph ha differito tutti i suoi script, inclusi annunci e analisi, e ha migliorato il tempo di caricamento degli annunci di una media di quattro secondi.
Stabilisci connessioni iniziali con le origini richieste
Puoi risparmiare 100-500 ms stabilindo connessioni in anteprima a importanti origini di terze parti.
Due tipi di <link>
,
preconnect
e dns-prefetch
, possono essere utili in questo caso:
preconnect
<link rel="preconnect">
indica al browser che la tua pagina vuole stabilire una connessione a un'altra origine e che vuoi che la procedura venga avviata il prima possibile. Quando il browser richiede una risorsa dall'origine preconnessa, il download inizia immediatamente.
<link rel="preconnect" href="https://cdn.example.com">
dns-prefetch
<link rel="dns-prefetch>
gestisce un piccolo sottoinsieme di ciò che
<link rel="preconnect">
gestisce. Lo stabilire una connessione comporta la ricerca DNS e l'handshake TCP, mentre per le origini sicure le negoziazioni TLS.
dns-prefetch
indica al browser di risolvere il DNS di un dominio specifico solo prima che venga chiamato esplicitamente.
Il suggerimento preconnect
è consigliato solo per le connessioni più critiche. Per
i domini di terze parti meno importanti, utilizza <link rel=dns-prefetch>
.
<link rel="dns-prefetch" href="http://example.com">
Il supporto dei browser per dns-prefetch
è leggermente diverso dal supporto preconnect
,
quindi dns-prefetch
può fungere da riserva per i browser che non supportano
preconnect
. Utilizza tag link separati per implementarlo in modo sicuro:
<link rel="preconnect" href="http://example.com">
<link rel="dns-prefetch" href="http://example.com">
Caricamento lento delle risorse di terze parti
Le risorse di terze parti incorporate possono rallentare notevolmente il caricamento delle pagine se non sono create correttamente. Se non sono critiche o sono below the fold (ovvero se gli utenti devono scorrere per visualizzarli), il caricamento lento è un ottimo modo per migliorare la velocità delle pagine e visualizzare le metriche. In questo modo, gli utenti visualizzano più rapidamente i contenuti della pagina principale e offrono un'esperienza migliore.
![Diagramma di una pagina web mostrata su un dispositivo mobile con contenuti scorrevoli che si estendono oltre lo schermo. I contenuti below the fold sono desaturati perché non sono ancora stati caricati.](https://web.developers.google.cn/static/articles/efficiently-load-third-party-javascript/image/a-diagram-a-webpage-show-0c848a2212482.png?authuser=0&hl=it)
Un approccio efficace consiste nel caricamento lento dei contenuti di terze parti dopo il caricamento dei contenuti della pagina principale. Gli annunci sono una buona candidata per questo approccio.
Gli annunci sono un'importante fonte di reddito per molti siti, ma gli utenti apprezzano i contenuti. Puoi aumentare la percentuale di visibilità complessiva di un annuncio tramite il caricamento lento degli annunci e la pubblicazione più rapida dei contenuti principali. Ad esempio, MediaVine è passata agli annunci con caricamento lento e ha riscontrato un miglioramento del 200% in termini di velocità di caricamento delle pagine. Google Ad Manager dispone della documentazione su come eseguire il caricamento lento degli annunci.
Puoi anche impostare il caricamento dei contenuti di terze parti solo quando gli utenti scorrono per la prima volta fino a quella sezione della pagina.
Intersection Observationr è un'API browser che rileva in modo efficiente quando un elemento entra o esce dall'area visibile del browser e puoi utilizzarla per implementare questa tecnica. lazysizes è una libreria JavaScript molto diffusa per le immagini con caricamento lento e iframes
.
Supporta gli incorporamenti e i widget di YouTube.
Offre anche il supporto facoltativo
per gli osservatori di intersezione.
L'utilizzo dell'attributo loading
per immagini e iframe con caricamento lento
è un'ottima alternativa alle tecniche JavaScript ed è diventato di recente disponibile in Chrome 76.
Ottimizzare la pubblicazione degli script di terze parti
Di seguito sono riportate alcune strategie consigliate per ottimizzare l'utilizzo di script di terze parti.
Hosting CDN di terze parti
È comune che i fornitori di terze parti forniscano gli URL per i file JavaScript ospitati, in genere su una rete CDN (Content Delivery Network). Il vantaggio di questo approccio è che può iniziare rapidamente, basta copiare e incollare l'URL, senza costi di manutenzione. Il fornitore di terze parti gestisce la configurazione del server e gli aggiornamenti degli script.
Tuttavia, poiché non si trovano sulla stessa origine delle altre risorse, il caricamento di file da una rete CDN pubblica ha un costo di rete. Il browser deve eseguire una ricerca DNS, stabilire una nuova connessione HTTP e, su origini sicure, eseguire un handshake SSL con il server del fornitore.
Quando utilizzi file da server di terze parti, raramente hai il controllo sulla memorizzazione nella cache. Affidarsi alla strategia di memorizzazione nella cache di un altro utente potrebbe causare il recupero inutilmente necessario degli script dalla rete troppo spesso.
Script di terze parti con hosting autonomo
L'hosting self-service di script di terze parti è un'opzione che ti offre un maggiore controllo sul processo di caricamento di uno script. Con l'hosting autonomo puoi:
- Riduci i tempi di ricerca DNS e di round trip.
- Migliora le intestazioni di memorizzazione nella cache HTTP.
- Sfrutta HTTP/2 o il più recente HTTP/3.
Ad esempio, Casper è riuscito a risparmiare 1,7 secondi sui tempi di caricamento ospitando autonomamente uno script di test A/B.
Tuttavia, l'hosting autonomo ha un grande svantaggio: gli script possono diventare obsoleti e non ricevono aggiornamenti automatici quando viene apportata una modifica all'API o una correzione di sicurezza.
Utilizzare i service worker per memorizzare nella cache gli script di server di terze parti
Puoi utilizzare i service worker per memorizzare nella cache gli script di server di terze parti in alternativa all'hosting autonomo. Questo ti offre un maggiore controllo sulla memorizzazione nella cache, mantenendo i vantaggi delle reti CDN di terze parti.
Puoi controllare la frequenza con cui gli script vengono recuperati nuovamente dalla rete e
creare una strategia di caricamento che limiti le richieste di risorse di terze parti non essenziali
fino a quando un utente arriva a un'interazione chiave nella pagina.
Con preconnect
puoi stabilire connessioni in anticipo e anche ridurre i costi di rete.