Carica in modo efficiente JavaScript di terze parti

Milica Mihajlija

Se uno script di terze parti rallenta il caricamento pagina, hai due opzioni per migliorare le prestazioni:

• Rimuovila se non aggiunge un valore chiaro al tuo sito.
• Ottimizza la procedura di caricamento.

Questo post spiega come ottimizzare il processo di caricamento degli script di terze parti con le seguenti tecniche:

• Utilizzare l'attributo async o defer nei tag <script>
• Stabilire connessioni iniziali alle origini richieste
• Caricamento lento
• Ottimizzare la modalità di pubblicazione di script di terze parti

Utilizza async o defer

Poiché gli script sincroni ritardano la compilazione e il rendering del DOM, devi sempre caricare gli script di terze parti in modo asincrono, a meno che lo script non debba essere eseguito prima che la pagina possa essere visualizzata.

Gli attributi async e defer indicano al browser che può continuare ad analizzare il codice HTML durante il caricamento dello script in background, per poi eseguirlo al termine del caricamento. In questo modo, i download di script non bloccano la creazione del DOM o il rendering della pagina, consentendo all'utente di visualizzare la pagina prima che tutti gli script siano stati caricati.

<script async src="script.js">

<script defer src="script.js">

La differenza tra gli attributi async e defer è il momento in cui il browser esegue gli script.

async

Gli script con l'attributo async vengono eseguiti alla prima occasione dopo il completamento 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 compaiono nel codice HTML. Ciò significa anche che possono interrompere la creazione di DOM se terminano il download mentre l'analizzatore sintattico è 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 garantisce che gli script vengano eseguiti nell'ordine in cui appaiono nel codice HTML e non blocchino l'interprete.

Gli script con defer attendono di essere eseguiti finché il browser non ha completato l'analisi del codice HTML.

• Utilizza async se è importante che lo script venga eseguito in un momento precedente del processo di caricamento.
• Utilizza defer per le risorse meno importanti, ad esempio un video player nascosto.

L'utilizzo di questi attributi può velocizzare 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 media di quattro secondi.

Nota: gli script di Analytics vengono solitamente caricati in anticipo per non perdere dati di analisi importanti. Fortunatamente, esistono pattern per inizializzare l'analisi in modo lento conservando i dati sul caricamento pagina iniziale.

Stabilisci connessioni iniziali alle origini richieste

Puoi risparmiare 100-500 ms stabilendo connessioni anticipate a importanti origini di terze parti.

In questo caso possono essere utili due tipi di <link>, preconnect e dns-prefetch:

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 per la pagina, a breve, in quanto il browser chiude tutte le connessioni non utilizzate entro 10 secondi. La 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 sottoinsieme di ciò che gestisce <link rel="preconnect">. La creazione di una connessione comporta la ricerca DNS e l'handshake TCP e, 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.

L'indicazione preconnect è consigliata solo per le connessioni più importanti. Per i domini di terze parti meno importanti, utilizza <link rel=dns-prefetch>.

<link rel="dns-prefetch" href="http://example.com">

Il supporto del browser per dns-prefetch è leggermente diverso dal supporto di preconnect, quindi dns-prefetch può essere utilizzato come opzione di riserva per i browser che non supportano preconnect. Usa tag link separati per implementare questa funzionalità 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 della pagina se sono costruite male. Se non sono fondamentali o sono below the fold (ovvero se gli utenti devono scorrere per visualizzarli), il caricamento lento è un buon modo per migliorare la velocità della pagina e le metriche di pittura. In questo modo, gli utenti vedono più velocemente i contenuti della pagina principale e usufruiscono di un'esperienza migliore.

Caricamento lento dei contenuti below the fold.

Un approccio efficace consiste nel eseguire il caricamento lento dei contenuti di terze parti dopo il caricamento dei contenuti della pagina principale. Gli annunci sono una buona soluzione per questo approccio.

Gli annunci sono una fonte di entrate importante per molti siti, ma gli utenti vengono per i contenuti. Mediante il caricamento lento degli annunci e la pubblicazione più rapida dei contenuti principali, puoi aumentare la percentuale di visibilità complessiva di un annuncio. Ad esempio, MediaVine è passato agli annunci con caricamento lento e ha registrato un miglioramento del 200% della velocità di caricamento delle pagine. Google Ad Manager dispone di documentazione su come caricare gli annunci in modo lazy.

Puoi anche impostare i contenuti di terze parti in modo che vengano caricati solo quando gli utenti scorrono per la prima volta fino a quella sezione della pagina.

Intersection Observer è un'API del browser che rileva in modo efficiente quando un elemento entra o esce dal viewport del browser e puoi utilizzarla per implementare questa tecnica. lazysizes è una popolare libreria JavaScript per il caricamento lento di immagini e iframes. Supporta gli incorporamenti e i widget di YouTube. Inoltre, offre il supporto facoltativo per Intersection Observer.

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

L'utilizzo dell'attributo loading per il caricamento lento di immagini e iframe è un'ottima alternativa alle tecniche JavaScript ed è diventato recentemente disponibile in Chrome 76.

Ottimizzare la pubblicazione di 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

Capita spesso che i fornitori di terze parti forniscano gli URL per i file JavaScript che ospitano, in genere su una rete CDN (Content Delivery Network). I vantaggi di questo approccio sono che puoi iniziare rapidamente, basta copiare e incollare l'URL, e non c'è alcun costo 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 del resto delle risorse, il caricamento dei file da una CDN pubblica comporta 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 di server di terze parti, raramente hai il controllo sulla memorizzazione nella cache. Affidarsi a una strategia di memorizzazione nella cache di qualcun altro potrebbe causare il recupero inutilmente inutilmente della rete dalla rete.

Gestire in modo autonomo gli script di terze parti

Un'opzione che offre un maggiore controllo sul processo di caricamento di uno script in modalità self-hosting di terze parti. Con l'hosting autonomo puoi:

• Riduci i tempi di ricerca DNS e di andata e ritorno.
• Migliora le intestazioni di cache HTTP.
• Utilizza HTTP/2 o il nuovo HTTP/3.

Ad esempio, Casper è riuscito a ridurre 1,7 secondi di riduzione dei tempi di caricamento ospitando autonomamente uno script di test A/B.

L'hosting autonomo presenta però un grande svantaggio: gli script possono diventare obsoleti e non riceveranno aggiornamenti automatici in caso di modifiche all'API o correzioni di sicurezza.

Attenzione: l'aggiornamento manuale degli script può causare un sovraccarico significativo al processo di sviluppo e potresti perdere aggiornamenti importanti. Se non utilizzi l'hosting CDN per gestire tutte le risorse di terze parti, ti stai perdendo anche la memorizzazione in una cache perimetrale e devi ottimizzare la compressione del tuo server.

Utilizzare i worker di servizio per memorizzare nella cache gli script di server di terze parti

Come alternativa al self-hosting, puoi utilizzare service worker per memorizzare nella cache gli script di server di terze parti. In questo modo puoi controllare meglio la memorizzazione nella cache senza rinunciare ai 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 non arriva a un'interazione chiave sulla pagina. Con preconnect, puoi stabilire connessioni in anticipo e contribuire anche a mitigare i costi di rete.