Carica in modo efficiente JavaScript di terze parti

Milica Mihajlija

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 o defer 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.

Gli script con 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.

Gli script con 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.

Nota: in genere, gli script di Analytics vengono caricati in anticipo in modo da non perdere preziosi dati di analisi. Fortunatamente, esistono pattern per inizializzare l'analisi in modo lento, conservando al contempo i dati di caricamento delle pagine in anticipo.

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">

Attenzione: precollegati solo ai domini critici che la pagina si aprirà a breve, in quanto il browser chiude tutte le connessioni non utilizzate entro 10 secondi. Una preconnessione non necessaria può ritardare altre risorse importanti, quindi limita il numero di domini preconnessi e testa l'impatto della preconnessione.

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.

Carica lentamente i contenuti below the fold.

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.

Attenzione: fai attenzione quando carichi risorse con il caricamento lento con JavaScript. Se JavaScript non viene caricato, forse a causa di condizioni di rete instabili, le risorse non vengono caricate.

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.

Attenzione: l'aggiornamento manuale degli script può sovraccaricare molto il processo di sviluppo e potresti perdere aggiornamenti importanti. Se non utilizzi l'hosting CDN per gestire tutte le tue risorse di terze parti, ti stai perdendo la caching perimetrale e dovrai ottimizzare la compressione del tuo server.

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.