Carica in modo efficiente JavaScript di terze parti

Milica Mihajlija

Se uno script di terze parti rallenta il tuo caricamento 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 nei tag <script>
• Stabilire connessioni iniziali alle origini richieste
• Caricamento lento
• Ottimizzare la modalità di pubblicazione di script di terze parti

Usa async o defer

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

Gli attributi async e defer indicano al browser che può proseguire durante l'analisi il codice HTML durante il caricamento dello script in background, quindi esegui lo script una volta caricato. In questo modo, i download di script non bloccano la creazione o la pagina del DOM che permette all'utente di visualizzare la pagina prima del completamento di tutti gli script Caricamento in corso.

<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à dopo al termine del download e prima load. Ciò significa è possibile (e probabilmente) che gli script async non vengano eseguiti nell'ordine in cui vengono visualizzati nel codice HTML. Significa anche che possono interrompere la creazione di DOM se completa il download mentre il parser è ancora in funzione.

Gli script con async possono comunque bloccare con l'analisi HTML.

defer

Gli script con l'attributo defer vengono eseguiti al termine dell'analisi del codice HTML ma prima DOMContentLoaded . defer garantisce che gli script vengano eseguiti nell'ordine in cui appaiono nel codice HTML e non bloccare il parser.

Gli script con defer attendono di essere eseguiti fino al il browser abbia terminato di analizzare l'HTML.

• Utilizza async se è importante che lo script venga eseguito nelle prime fasi del caricamento e il processo di sviluppo.
• Utilizza defer per risorse meno critiche, ad esempio un video player sotto il fold.

L'utilizzo di questi attributi può accelerare notevolmente il caricamento della pagina. Ad esempio: Telegraph ha posticipato tutti i testi, inclusi annunci e analisi e ha migliorato il tempo di caricamento degli annunci in media del per quattro secondi.

Nota: gli script di Analytics in genere vengono caricati in anticipo per non farti perdere informazioni preziose e analisi dei dati. Fortunatamente, per inizializzare l'analisi in modo lento conservando al contempo i dati sul caricamento pagina iniziale.

Stabilisci connessioni iniziali alle origini richieste

È possibile risparmiare 100-500 ms tramite la creazione di connessioni iniziali con importanti origini di terze parti.

Due tipi di <link>: preconnect e dns-prefetch possono aiutarti qui:

preconnect

<link rel="preconnect"> indica al browser che la tua pagina vuole stabilire una a un'altra origine e che la procedura venga avviata il più 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, poiché il browser chiude le connessioni non utilizzate entro 10 secondi. Non necessario la preconnessione può ritardare altre risorse importanti, quindi limita il numero domini preconnessi e testa l'impatto della preconnessione.

dns-prefetch

<link rel="dns-prefetch> gestisce un piccolo sottoinsieme dei Handle <link rel="preconnect">. Lo stabilire una connessione implica il DNS lookup e handshake TCP; per le origini sicure, invece, 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 domini di terze parti meno importanti, usa <link rel=dns-prefetch>.

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

Supporto dei browser per dns-prefetch è leggermente diverso dall'assistenza preconnect, quindi dns-prefetch può fungere da 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 significativamente il caricamento delle pagine se sono costruite male. Se non sono fondamentali o sono below the fold (ovvero se gli utenti devono scorrere per visualizzarle), il caricamento lento è un buon modo per migliorare la velocità delle pagine e le metriche di visualizzazione. In questo modo, gli utenti visualizzano i contenuti della pagina principale più velocemente e migliorare l'esperienza.

Caricamento lento dei contenuti below the fold.

Un approccio efficace consiste nel caricare contenuti di terze parti tramite caricamento lento dopo la pagina principale. vengono caricati i contenuti. Gli annunci sono una buona soluzione per questo approccio.

Gli annunci sono una fonte di reddito importante per molti siti, ma gli utenti vengono per contenuti. Grazie al caricamento lento degli annunci e alla pubblicazione più rapida dei contenuti principali, puoi: Aumentare la percentuale di visibilità complessiva di un annuncio. Ad esempio, MediaVine Passati agli annunci con caricamento lento e abbiamo riscontrato un miglioramento del 200% della velocità di caricamento della pagina. Google Ad Manager dispone della documentazione sul caricamento lento degli annunci.

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

Osservatore delle intersezioni è un'API del browser che rileva in modo efficiente quando un elemento entra o esce dalla area visibile del browser e puoi utilizzarla per implementare questa tecnica. lazysizes è una libreria JavaScript molto diffusa per il caricamento lento di immagini e iframes. Supporta gli incorporamenti di YouTube e widget. Offre anche assistenza facoltativa per l'osservatore delle intersezioni.

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 carico.

Utilizzare l'attributo loading per il caricamento lento di immagini e iframe un'ottima alternativa alle tecniche JavaScript, ed è diventato di recente disponibile in Chrome 76.

Ottimizza la pubblicazione di script di terze parti

Di seguito sono riportate alcune strategie consigliate per ottimizzare l'utilizzo dei script di terze parti.

Hosting CDN di terze parti

Di solito i fornitori di terze parti forniscono URL per i file JavaScript che host, in genere su una rete CDN (Content Delivery Network). Il vantaggio di questo approccio è che consente di iniziare rapidamente, copia e incolla l'URL, senza preoccuparti della manutenzione. La il fornitore di terze parti gestisce la configurazione del server e gli aggiornamenti degli script.

Ma poiché non sono sulla stessa origine delle altre risorse, Il caricamento di file da una 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 su per la memorizzazione nella cache. Affidarsi alla strategia di memorizzazione nella cache di qualcun altro potrebbe causare la recuperati inutilmente dalla rete e troppo spesso.

Hosting autonomo di script di terze parti

Script di terze parti in self-hosting è un'opzione che ti offre un maggiore controllo su un durante il processo di caricamento dello script. Con il self-hosting puoi:

• Riduci i tempi di ricerca DNS e round trip.
• Migliora le intestazioni della memorizzazione nella cache HTTP.
• Utilizza HTTP/2 o il nuovo HTTP/3.

Ad esempio, Casper è riuscita a radersi 1,7 secondi. ridurre i tempi di caricamento ospitando autonomamente uno script di test A/B.

Il self-hosting, però, presenta un grande svantaggio: gli script possono diventare obsoleti non riceveranno aggiornamenti automatici in caso di modifica dell'API o di una correzione della sicurezza.

Attenzione: l'aggiornamento manuale degli script può sovraccaricare lo sviluppo e potresti perderti aggiornamenti importanti. Se non utilizzi CDN per la pubblicazione di tutte le risorse di terze parti, ti perdi anche memorizzazione in una cache perimetrale e devi ottimizzare la compressione del server.

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

Puoi usare service worker per memorizzare nella cache gli script di server di terze parti in alternativa al self-hosting. Ciò ti offre un maggiore controllo sulla memorizzazione nella cache, conservando al contempo i vantaggi delle reti CDN di terze parti.

Puoi controllare la frequenza con cui gli script vengono recuperati di nuovo dalla rete creare una strategia di caricamento che limiti le richieste di contenuti non essenziali, risorse di terze parti finché un utente non arriva a un'interazione chiave nella pagina. Con preconnect, puoi stabilire connessioni iniziali e aiutare a mitigare i costi di rete.