Third Party Script, Script di terze parti e come influiscono sulle prestazioni

Gli script di terze parti aggiungono una vasta gamma di funzioni utili al tuo sito web, rendendolo più interattivo, dinamico e interconnesso. Caratteristiche come analisi, annunci, pulsanti di condivisione sui social media, incorporamenti di video: sono tutti possibili grazie a script di terze parti. Alcune di queste funzionalità potrebbero essere essenziali per la funzionalità o la monetizzazione del tuo sito web.

Tuttavia, gli script di terze parti sono anche una delle principali cause di rallentamenti delle prestazioni sui siti web. Di solito sono la risorsa più costosa durante il caricamento della pagina. Alcuni di questi script possono anche comportare rischi per la sicurezza e la privacy.

In questo articolo verranno fornite le nozioni di base degli script di terze parti, il modo in cui influiscono sulle prestazioni del sito Web e le operazioni che è possibile eseguire per attenuarne gli effetti negativi.

Suona interessante? Iniziamo!

Che cosa sono gli script di terze parti?

Per “script di terze parti” si intende qualsiasi script che è possibile incorporare direttamente nel sito Web di un fornitore di terze parti. Non vengono creati dall’utente, né controllati in modo esplicito dall’utente, e vengono serviti da un URL esterno. Normalmente per intenderci, tutti gli script Javascript ad esempio che vengono caricati da domini esterno al nostro, appunto di terze parti.

Dove vengono utilizzati gli script di terze parti?

Quasi ogni sito Web utilizza script di terze parti per aggiungere alcune funzionalità. Alcuni dei loro usi più comuni sono:

• Incorporamento di video (ad esempio YouTube, Vimeo)
• Aggiunta di pulsanti di condivisione social
• Aggiunta di widget di chat
• Incorporamento di sistemi di commenti (ad es. Disqus)
• Abilitazione dell’analisi web (ad es. Google Analytics)
• Incorporamento di annunci
• Servire le risorse tramite reti per la distribuzione di contenuti (CDN)
• Sperimentazione di script di test A/B
• Aggiunta di librerie helper (ad esempio animazione, librerie funzionali e così via)

Gli sviluppatori possono aggiungere potenti funzionalità ai siti Web con poche righe di codice utilizzando script di terze parti. Per esempio:

• I team di marketing possono utilizzare i report degli script di analisi e test A/B per gestire le proprie decisioni aziendali su dati validi.
• Gli utenti possono condividere un articolo che amano il loro social network preferito con un semplice clic di un pulsante.
• I potenziali clienti possono contattare il personale di supporto o di vendita tramite il widget di chat e ottenere subito le risposte alle loro domande.

Le applicazioni di script di terze parti sono infinite, ma semplicemente non finisce qui.

Se utilizzati senza cautela, gli script di terze parti possono essere problematici per la privacy, la sicurezza e le prestazioni delle pagine.

 

Il costo dei Javascript di terzi parti.

Gli script di terze parti sono ovunque. Secondo il rapporto sullo stato di JavaScript da HTTPArchive, il numero mediano di script esterni richiesti dai siti web è 20 e la loro dimensione totale è di circa 449 KB.

Un enorme 93,59% delle pagine web include almeno una risorsa di terze parti . Scavando più a fondo negli stessi dati mostra che il 76% dei siti web tiene traccia degli utenti con script di analisi.

L’impatto peggiore degli script di terze parti è il ritardo del percorso di rendering critico. È l’insieme di azioni che un browser fa per assemblare HTML, CSS e JavaScript in un sito web vivo e utilizzabile. Naturalmente, la dimensione del payload degli script di terze parti gioca un ruolo importante qui, ma c’è ancora un altro fattore importante da considerare.

Nel 2019, i costi dominanti di elaborazione degli script sono ora il download e il tempo di esecuzione della CPU.

Il costo di JavaScript nel 2019

JavaScript occupa molte risorse della CPU per l’esecuzione. Anche se ottimizzi script di terze parti per ridurre l’impatto sui tempi di rendering, questi possono comunque influire sulla metrica “Time to Interactive”. Misura la velocità con cui gli utenti possono interagire con una pagina Web. Più lento è, più frustrati saranno i tuoi utenti e maggiori sono le probabilità che abbandonino il tuo sito web.

Puoi riassumere il costo dell’utilizzo di JavaScript con due metriche principali.

Aumento delle dimensioni della pagina

Byte per byte, JavaScript è la risorsa di terze parti più costosa servita dalle pagine Web. Dal momento che un browser ha bisogno di scaricare tutti gli script di terze parti collegati durante il caricamento della pagina, aggiungerli al tuo sito web può rallentarlo notevolmente.

Più grande è la dimensione degli script, più difficile sarà la caduta delle prestazioni del tuo sito web. Dopo tutto, più grande è la dimensione di una pagina web, più lentamente verrà caricato.

Ridurre le dimensioni degli script esterni è un modo impressionante per accelerare il tuo sito web.

Richieste di rete aggiuntive

Ogni volta che un utente richiede una qualsiasi delle pagine del tuo sito, il browser deve recuperare tutti gli script di terze parti incorporati. Per fare questo, il browser raggiungerà tutti gli URL esterni in cui questi script sono ospitati per scaricarli.

In genere, ogni script di terze parti da solo non equivale a molto. Ma il caricamento di ogni script di terze parti è una richiesta HTTP supplementare che il browser deve effettuare per eseguire il rendering completo della pagina. Queste richieste si accumulano per rallentare le prestazioni della pagina.

Inoltre, più richieste ha la tua pagina web, più lunga sarà la metrica “Time to Interactive”.

Nell’esempio precedente, si può vedere che la pagina richiede più di 9 secondi per caricare completamente. Il colpevole principale qui è l’incorporamento di un sacco di script di terze parti che trascinano verso il basso la velocità di caricamento della pagina.

Gli script non sono le uniche risorse di terze parti utilizzate dai siti Web, ma costituiscono una massa di richieste di terze parti in tutte le categorie e i tipi di contenuto. Quindi, ottimizzarli dovrebbe essere la tua priorità.

Misurazione dell’impatto del caricamento degli script di terze parti

Ci sono molti strumenti di test di velocità della pagina web che è possibile utilizzare per diagnosticare script di terze parti e scoprire quali di loro sono le risorse più costose sul tuo sito web. Questi strumenti ti mostrano il numero di script di terze parti caricati dal tuo sito e il tempo che richiedono per l’esecuzione.

Ecco alcuni strumenti gratuiti che puoi utilizzare per valutare script di terze parti:

• WebPageTest.org
• Strumenti di Chrome
• Approfondimenti su PageSpeed (Audit del faro)

WebPageTest.org

WebPageTest è uno strumento di test di velocità open source gratuito che è possibile utilizzare per valutare le prestazioni del sito Web. Include molte funzionalità avanzate come grafici a cascata, suddivisione dei contenuti per tipo e dominio, filmati di rendering delle pagine web e video e confronto di test.

Ho testato il mio sito web di portfolio su WebPageTest. Di seguito è riportata la visualizzazione a cascata delle richieste effettuate dal mio sito durante il caricamento della pagina. Si tratta di un sacco di richieste, ma non tutte provengono da fonti di terze parti.

Il grafico a cascata suddivide le richieste per dominio e dimensione insieme a una sequenza temporale che rappresenta il caricamento della pagina.

Puoi anche controllare la suddivisione del contenuto per tipo facendo clic sulla scheda “Ripartizione contenuto”. Come si può vedere, JS costituisce un sacco di richieste e byte trasferiti.

Facendo clic sulla scheda ‘Domini’ vi darà un elenco completo di tutti i domini raggiunti dal browser durante il caricamento della pagina.

In questo caso, la maggior parte delle richieste proviene dal dominio principale stesso. È anche possibile fare clic sul collegamento ‘Mappa richieste’ per visualizzare tutte queste richieste.

Se si riconosce uno script problematico che richiede molto tempo per il caricamento o l’esecuzione, verificare se lo script è necessario. Rimuovere tali script se non rappresentano alcun danno percepibile alla funzionalità del tuo sito web o all’esperienza utente.

WebPageTest fornisce anche un modo per testare la velocità del tuo sito web bloccando le richieste provenienti da domini specifici. Ciò è utile per misurare l’impatto sulle prestazioni degli script di terze parti problematici indirizzandoli in modo specifico.

blockDomainsExcept www.domain.com cdn.domain.com cdnjs.cloudflare.com
navigate  https://www.domain.com

Ad esempio, è possibile bloccare le richieste provenienti da tutti i domini esterni (ad eccezione delle reti CDN importanti) e quindi indirizzare WebPageTest per passare al sito per testarlo.

Nota:< È inoltre possibile utilizzare la scheda ‘Blocca’ nella sezione ‘Impostazioni avanzate’ di WebPageTest per fare lo stesso.

Di seguito è riportato un flusso di lavoro tipico per utilizzare WebPageTest per identificare gli script lenti:Here’s a typical workflow to use WebPageTest to identify slow scripts:

• Testare la pagina Web originale.
• Testare nuovamente la stessa pagina Web, ma questa volta con alcuni script di terze parti bloccati.
• Confrontare i due risultati utilizzando la funzionalità ‘Confronta’ di WebPageTest dal pannello ‘Cronologia test’.

Strumenti di Chrome

Chrome DevTools supporta l’evidenziazione delle richieste di rete da parte di terze parti nel pannello “Rete”. Questa funzionalità consente di ottenere informazioni dettagliate sulle richieste di script di terze parti in una pagina.

Per utilizzare questa funzione, premere CTRL/CMD , Maiusc e P in uno dei pannelli DiSCi di Chrome per visualizzare il “Menu dei comandi”. Successivamente, digita “Mostra badge di terze parti” e attiva questa funzione.

Nota:< Google Chrome versione 80 ha rimosso questa funzione annunciando nessuna sostituzione. Molto probabilmente è un insetto. Per il momento, è necessario ordinare manualmente gli script esterni fino a quando Google risolve questo problema.

Puoi anche utilizzare il pannello “Prestazioni” in Chrome DevTools per identificare eventuali problemi di prestazioni sul tuo sito web.

Per ulteriori informazioni su come testare le prestazioni di caricamento delle pagine con Chrome DevTools, consulta il tutorial di Google su questo argomento.

Audit di Lighthouse

Lo strumento di test della velocità Lighthouse di Google ha due controlli specifici per valutare le prestazioni del tuo sito.

L’audit del tempo di avvio JavaScript di Lighthouse classifica gli script in base al tempo di analisi, compilazione e valutazione. Queste metriche consentono di individuare script di terze parti che hanno accumulato molte risorse del server.

L’audit dei payload di rete di Lighthouse elenca tutti gli script in base alle dimensioni totali e al tempo di trasferimento. Puoi utilizzare queste metriche per identificare script di terze parti che potrebbero rallentare il tempo di caricamento della pagina del tuo sito.

Lo strumento Lighthouse integrato di Chrome ti mostra anche costose risorse di terze parti su una pagina ordinata in base alle dimensioni e al tempo di trasferimento.

Ora che hai imparato a testare le prestazioni degli script di terze parti, è il momento di imparare a ridurre o annullare il loro danno.

Come ridurre al minimo gli effetti negativi degli script di terze parti.

1. Ritardare il caricamento di script di terze parti

Se trovi script di terze parti che rallentano il tuo sito web, puoi caricarli utilizzando gli attributi async o rinviare HTML per evitare il loro impatto negativo sul caricamento della pagina.

L’attributo async impone al browser di continuare l’analisi del resto del documento HTML fino a quando lo script viene scaricato. Al termine del download dello script, l’analisi del documento HTML viene sospesa per eseguire lo script.

L’attributo defer esegue la stessa operazione, ad eccezione del fatto che il browser non esegue lo script fino a quando non ha analizzato l’intero documento HTML.

È consigliabile caricare tutti gli script di terze parti con attributi asincroni o di rinvio (a meno che non siano fondamentali per il percorso di rendering critico della pagina Web).

2. Ospita file JavaScript di terze parti self-host

L’hosting di script di terze parti sul server può offrire un maggiore controllo sul modo in cui vengono caricati. Consente di ridurre i tempi di ricerca DNS e di andata e ritorno, migliorare le intestazioni di memorizzazione nella cache HTTP e utilizzare funzionalità avanzate come il push del server HTTP/2.

L’hosting self-hosting è consigliato per qualsiasi script di terze parti critico per il funzionamento del tuo sito web (ad esempio jQuery, Modernizr, Underscore.js).

Avvertenza: Gli script self-hosted possono non essere aggiornati e non funzionare come previsto. Ad esempio, se stai auto-hosting di uno script di pubblicazione degli annunci e se il publisher dell’annuncio cambia il funzionamento del loro script, il tuo sito web non servirà alcun annuncio finché non aggiornerai manualmente lo script self-hosted.

3. Rimuovere completamente lo script di terze parti

Se uno script di terze parti non aggiunge alcun valore chiaro al tuo sito o agli utenti, prendi in considerazione la possibilità di rimuoverlo. Molti temi e plugin di WordPress caricano un sacco di script non necessari che non puoi mai usare.

Anche WordPress impone a ogni sito di caricare lo script jQuery Migrate (wp-includes/js/jquery/jquery-migrate.min.js). Questo aiuta i plugin meno recenti e i temi a mantenere la compatibilità con le versioni precedenti di jQuery. Anche se questo non è uno script di terze parti in quanto è self-hosted, aggiunge comunque una richiesta HTTP supplementare inutilmente.

Chiediti se il tuo sito web ha davvero bisogno di un cursore o di uno script di formattazione della data. In caso di dubbi, è possibile eseguire il test A/B per verificare se la rimozione di uno script influisce sulle prestazioni del sito Web rispetto all’usabilità.

4. Implementare i suggerimenti per le risorse del browser

La connessione a domini esterni per scaricare script di terze parti può richiedere una quantità eccessiva di tempo, soprattutto se gli utenti si trovano su reti lente. Le ricerche DNS, i reindirizzamenti e gli eventuali round trip per il caricamento di ogni script di terze parti possono causare ritardi significativi.

È possibile utilizzare i suggerimenti delle risorse del browser per stabilire una connessione con il dominio esterno che ospita lo script di terze parti all’inizio del caricamento della pagina.

Ci sono molti suggerimenti di risorse, ma quelli che sono utili qui sono dns-prefetch o preconnect.

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

Se la destinazione finale del dominio esterno dello script di terze parti utilizza https://, è possibile utilizzarla per evitare round trip TCP e gestire in anticipo eventuali negoziazioni TLS.

<link rel="preconnect" href="https://cdn.domain.com">

5. Caricamento lazy JS di terze parti

Gli elementi di terze parti incorporati come annunci e video aggiungono molto stress sul tuo sito web, tanto più se vengono pubblicati tramite fonti scarsamente ottimizzate. È possibile caricare in differimento queste risorse incorporate per velocizzare il caricamento della pagina.

Ad esempio, se stai pubblicati annunci nel piè di pagina del tuo sito web, puoi caricarli in modo differito in modo che vengano caricati solo quando l’utente scorre la pagina verso il basso.

Se stai incorporando annunci sul tuo sito web, consulta questo articolo di Mediavine dove discutono di come hanno migliorato la velocità della pagina del 200% dopo aver implementato il caricamento lazy.

Utilizzare un tag manager per organizzare JS di terze parti

I gestori di tag consentono di raggruppare più script di terze parti (o tag) e di gestirli tutti da un’unica origine. L’utilizzo saggio di un gestore di tag consente di ridurre al minimo i risultati delle prestazioni del caricamento di script di terze parti.

Mentre è possibile caricare script di terze parti in modo asincrono, il browser deve comunque analizzarli ed eseguirli singolarmente. Ciò potrebbe significare la richiesta di dati aggiuntivi durante il caricamento della pagina. I gestori di tag risolvono questo problema riducendo il numero di richieste a uno.

Google Tag Manager (GTM) è la soluzione più popolare per gestire i tag. Carica sé stesso e tutti i relativi tag in modo asincrono in modo che il browser esegue il rendering di una pagina senza pausa. Anche uno script di terze parti a caricamento lento non bloccherà il caricamento di qualsiasi altro script.

Il Google Tag Manager per WordPress plugin è un modo semplice per integrare GTM sui siti WordPress.

Altri gestori di tag che è possibile esaminare sono Adobe Experience Platform Launch, Ensightene Qubit.

Avvertenza: Usa i tag manager come GTM con cautela. Mentre riduce il costo di caricamento di script di terze parti, la sua semplicità si apre anche ad abuso da parte di chiunque abbia le credenziali per aggiungere tag. Alcuni tag possono anche introdurre una catena di richieste che può portare il tuo sito a una ricerca per indicizzazione.

Avere un budget di prestazioni

Dopo aver ottimizzato le prestazioni del tuo sito, devi utilizzare un budget per le prestazioni per assicurarti che le prestazioni del tuo sito non regrediscano nel tempo.

Un budget per le prestazioni è un limite autoimposto per contare il numero totale di richieste e le dimensioni di script, immagini e così via. Può anche includere l’impostazione di un limite per le metriche delle prestazioni, ad esempio ‘Time to Interactive’ e ‘First Meaningful Paint’.

Per altre informazioni, vedere l’elenco di tutti i tipi di risorse e le metriche supportati.

È possibile utilizzare il controllo. Mantieni conteggi richieste di Farhouse bassi e Dimensioni file piccole per impostare il budget per le prestazioni. Discutere il metodo esatto per impostare i budget delle prestazioni non rientra nell’ambito di questo articolo, ma puoi leggere ulteriori informazioni su come farlo nei documenti di Lighthouse.

Conclusioni

Gli script di terze parti sono diventati una parte cruciale della maggior parte dei siti web oggi. Anche se hai ottimizzato tutto l’altro codice sul tuo sito web, non puoi controllare la modalità di riproduzione degli script di terze parti. Non puoi evitarli perché alcuni di essi potrebbero essere fondamentali per le funzionalità del tuo sito, l’esperienza utente o il flusso di entrate.

Alcuni argomenti discussi in questo articolo potrebbero non essere facili da comprendere immediatamente. Ti suggerisco di ripassarli ancora una volta. Comprendere l’impatto sulle prestazioni degli script di terze parti e come gestirli ti aiuterà a riprendere il controllo sulle prestazioni del caricamento della pagina.

Se avete domande su uno qualsiasi dei punti discussi in questo articolo, si prega di sentirsi liberi di contattarci.