Riduci al minimo il codice di terze parti

Per ridurre l’impatto del codice di terze parti, controlla innanzitutto se ogni script esterno è necessario e rimuovi quelli che non lo sono;

Carica gli script senza rallentare le parti principali della tua pagina; utilizza la politica della sicurezza dei contenuti controllando le origini degli script per una maggiore sicurezza; rinvia gli script non essenziali o utilizza un caricatore di script e ottimizza i tempi di caricamento utilizzando in modo efficace la cache del browser.

Gli script di terze parti sono una necessità nel web moderno. Consentono infatti ai proprietari di siti Web di incorporare video e pulsanti di condivisione sui social, analizzare le prestazioni del proprio sito Web e molto altro ancora.

Spesso questi script sono cruciali per la funzionalità del sito Web e i flussi di entrate. Tuttavia, le risorse di terze parti comportano molti rischi nascosti che potrebbero ostacolare le prestazioni generali del tuo sito.

Ecco perché è importante ridurre al minimo il loro impatto negativo pur utilizzando le loro preziose funzionalità.

E nelle righe seguenti imparerai come farlo.

Immergiamoci!

Come gli script di terze parti influiscono sulle prestazioni web

Al giorno d’oggi, gestire un sito web senza un singolo script di terze parti sembra non solo impossibile ma piuttosto poco pratico.

Indipendentemente dal tipo di sito, ci sono alcune funzionalità a cui tu e i tuoi visitatori dovete avere accesso.

Ad esempio, gestisci un blog personale e desideri che i tuoi contenuti raggiungano quante più persone possibile. Una soluzione è aggiungere pulsanti di condivisione social.

Magari, vuoi analizzare in profondità il comportamento dei tuoi visitatori sul tuo sito web. Per questo, avrai bisogno di strumenti come Hotjar e Google Analytics. Ad un certo punto, vorrai monetizzare il tuo lavoro e un ottimo modo per farlo è aggiungere iframe pubblicitari.

In breve:

Per ottenere il massimo dal tuo sito, devi fare affidamento su script di terze parti.

Non c’è niente di sbagliato in questo, almeno nella maggior parte dei casi.

Sfortunatamente, incorporare risorse di terze parti significa fare affidamento su di loro per essere veloci per evitare di rallentare il tuo sito. Pertanto, è normale che questi siano la causa principale dei rallentamenti delle prestazioni, poiché sono fuori dal tuo controllo.

Ecco alcuni dei problemi che potresti incontrare quando integri script di terze parti nel tuo sito web:

N. 1: inviare troppe richieste di rete a più server

L’invio di troppe richieste di rete a più server provoca rallentamenti. Questo tempo è ancora più lungo per le connessioni sicure, che possono comportare ricerche DNS, reindirizzamenti e diversi viaggi andata e ritorno verso il server finale che gestisce la richiesta dell’utente.
<

N. 2: blocco del thread principale a causa dell’utilizzo eccessivo di JavaScript

Il thread principale è il luogo in cui il browser esegue la maggior parte del lavoro necessario per visualizzare una pagina. Ecco perché è fondamentale ridurre al minimo il lavoro del Main Thread.

JavaScript viene eseguito sul thread principale per default. Quando il thread principale è occupato da JavaScript, non può eseguire attività vitali come il rendering della pagina o la risposta all’input dell’utente.

Minimizzare i Javascript

Ecco perché JavaScript è una risorsa che blocca il rendering. Di conseguenza, ti ritroverai con un sito web non interattivo e con il difetto di un caricamento lento: la formula migliore per perdere immediatamente clienti.

N. 3: caching HTTP insufficiente

Una memorizzazione nella cache HTTP insufficiente obbliga a recuperare le risorse dalla rete più spesso. E questa è un operazione lenta e costosa (sia in termini di velocità che di risorse del server), soprattutto quando tali richieste di rete vengono inviate a più server.

Di conseguenza, la tua pagina verrà caricata lentamente. Ancora peggio, quando i visitatori accedono al tuo sito con un piano dati mobile limitato, ogni richiesta di rete non necessaria è uno spreco di denaro.

# 4: Alcuni script non si lasciano caricare in modo asincrono

Il caricamento di script di terze parti in modo asincrono è una delle soluzioni quando si tratta di ottimizzare il proprio lavoro. Tuttavia, alcuni script non possono essere caricati in modo asincrono perché utilizzano document.write().

Il problema più grande, tuttavia, è l’uso di document.write() all’interno delle pagine, in particolare quegli usi che inseriscono script. Se lo script inserisce dinamicamente un altro script, il parser è costretto ad attendere ancora più a lungo per il download della risorsa, il che può comportare uno o più viaggi di andata e ritorno sulla rete e ritardare il tempo per il primo rendering della pagina:

document.write() può ritardare la visualizzazione del contenuto della pagina di decine di secondi ed è particolarmente problematico per gli utenti con connessioni lente (ad esempio 2G). Anche se in molti paesi il 2G è ormai giunto al capolinea, ci sono ancora utenti in tutto il mondo che fanno molto affidamento su di esso per navigare sul web.

Ecco perché Chrome interviene contro document.write(), il che significa che non puoi fare affidamento su di esso.

N. 5: alcuni script di terze parti possono bloccare l’evento di caricamento della finestra

L’evento window.onload dice di attivare una funzione solo una volta caricata la finestra e tutti i suoi tag HTML, caratteri e immagini. Fondamentalmente, è un modo con cui il browser notifica al codice che ha completato il caricamento delle risorse iniziali di una pagina.

Spesso, gli elementi interattivi su una pagina diventano interattivi dopo questo evento. Se questo subisce ritardi, la pagina impiegherà più tempo per rispondere all’input dell’utente.
E in alcuni casi, gli script di terze parti utilizzano tecniche che possono bloccare l’evento window.onload se il loro server risponde lentamente. Il risultato è un’esperienza utente negativa.

La verità è che il contesto è importante quando si tratta di ottimizzare il lavoro degli script di terze parti. Tutto dipende dal tuo sito e dalla tua capacità di identificare le risorse che causano i problemi e quindi configurarle per caricarle in modo più efficiente.

Per fortuna, esistono numerose risorse gratuite che puoi utilizzare per identificare e misurare dispendiosi script di terze parti.

Diamo un’occhiata ad alcuni di essi.

Come identificare e misurare gli script di terze parti sulla tua pagine

Il primo passo per risolvere il problema delle risorse di terze parti è identificare e misurare quelle di maggiore impatto.

Strumenti come PageSpeed Insights, WebPageTest e Chrome DevTools di Google evidenzieranno tutti gli script di terze parti che il tuo sito web sta caricando e mostreranno quali richiedono più tempo.

PageSpeed Insights di Google

PageSpeed Insights di Google è il modo più semplice per identificare e misurare script di terze parti sul tuo sito web. L’audit “Riduci al minimo l’impatto del codice di terze parti” è un buon punto di partenza.

Ti consente di vedere immediatamente l’impatto degli script di terze parti sul tuo sito. Nell’esempio sopra, puoi vedere che gli script di terze parti hanno bloccato il thread principale per 380 ms.

Puoi scavare più a fondo esaminando l’elenco di tutto il codice di terze parti eseguito sul tuo sito. La cosa bella è che Pagespeed lo ordina in base al tempo di blocco del thread principale. Questa valutazione ti consente di concentrarti su quelli di maggior impatto e iniziare a lavorarci.
Un altro controllo di cui potresti trarre vantaggio è la Treemap:

Mostra tutti i file JavaScript eseguiti sul tuo sito web, ordinati in base alla loro dimensione:

E accanto alla colonna Byte risorsa, hai quella “Byte non utilizzati”, che mostra quale percentuale di JS rimane inutilizzata.

WEB PAGE TEST

La suddivisione dei contenuti di WebPageTest per dominio è un altro strumento prezioso per il debug di problemi di terze parti. Andando nella sezione Dominio, vedrai una suddivisione approfondita per numero di richieste e byte per ciascun dominio:

WebPageTest dispone anche di un grafico a cascata(Waterfall) in cui puoi vedere tutte le risorse che bloccano il rendering e allocare tutti gli script di terze parti e il relativo tempo di esecuzione:

Una volta individuate le risorse di terze parti che potrebbero causare problemi, è il momento di verificare se sono davvero i colpevoli. Torna alla home page di WebPageTest, apri le impostazioni Avanzate e fai clic sulla funzione Blocca:

Successivamente puoi specificare i domini che desideri bloccare inserendoli nei moduli sottostanti. Prova di nuovo e vedi se ci sono miglioramenti.

DevTools di Chrome

Un altro ottimo modo per analizzare possibili problemi in modo ancora più approfondito è utilizzare i DevTools di Chrome. Basta aprire una pagina web, fare clic con il tasto destro e selezionare “Ispeziona“. Quindi, acquisisci il caricamento della pagina e vai al pannello “Prestazioni”.

Facendo clic sul pulsante di registrazione e ricaricando la pagina viene visualizzata una cascata (simile a quella in WebPageTest):

Nella parte inferiore del pannello Prestazioni, vedrai la scheda “Dal basso verso l’alto”:

devtools dal basso verso l’alto

Fare clic sul menu a discesa e selezionare “Raggruppa per dominio“. Nell’esempio sopra, possiamo vedere come moatads.com contribuisce per il 22,7% al lavoro che avviene durante il caricamento della pagina.

Usando questa conoscenza, puoi individuare con maggiore precisione le aree problematiche e iniziare a indagare con alcune prove alle spalle. Una volta identificato il colpevole del rallentamento, puoi bloccare lo script specifico di terze parti per vedere quanto sia realmente di impatto.

Vai al pannello “Rete”, fai clic con il tasto destro sulla risorsa e seleziona “Blocca URL richiesta”:

Questo è un ottimo modo per vedere cosa avrebbe l’assenza di una particolare risorsa nella pagina corrente.

Ora vediamo come gestire le risorse di terze parti.

Carica script di terze parti in modo efficiente
Esistono diverse tecniche di ottimizzazione che potresti provare quando lavori con script di terze parti:

Utilizzare il caricamento lento per caricare le risorse incorporate solo quando necessario;
Implementare attributi asincroni e differiti;
Evita script di terze parti che utilizzano document.write();
Risorse self-host per ottenere un maggiore controllo su di esse;
Stabilire connessioni iniziali tramite suggerimenti sulle risorse di preconnessione e precaricamento DNS;
Prendi in considerazione la rimozione degli script che non aggiungono valore.

Diamo uno sguardo più da vicino a ciascuno di loro.

Lazyload di risorse di terze parti

Una singola pagina web è costituita da diverse risorse. Tuttavia, non tutti sono fondamentali per fornire la migliore esperienza utente fin dall’inizio.

Gli utenti desiderano vedere i contenuti dipinti rapidamente e sperimentare un sito Web che diventa immediatamente interattivo. Ecco perché è bene tenere d’occhio questi diversi parametri:

First Paint misura il tempo impiegato dal browser per eseguire il rendering di qualsiasi cosa sulla pagina, non solo del contenuto DOM. Potrebbe trattarsi, ad esempio, di un cambiamento dello sfondo;
First Contentful Paint è il tempo impiegato dal browser per visualizzare la prima parte di contenuto DOM (ad esempio immagine, elemento canvas non vuoto) su una pagina;
Il Largest Contentful Paint misura il tempo necessario per caricare l’elemento di contenuto Above-the-fold più grande;
L’Interaction to Next Paint (precedentemente misurata con First Input Delay (FID)) misura il tempo più lungo tra l’input di un utente e il momento in cui il browser risponde.

In breve:

Il tuo sito deve essere veloce e interattivo per trattenere i tuoi visitatori più a lungo, o almeno dare quell’impressione.

È qui che entra in gioco il lazy loading. Solitamente utilizzato nel contesto delle immagini, puoi anche caricare in modo lento (rinviare) risorse di terze parti, facendole caricare solo quando necessario. In questo modo, puoi concentrarti prima sulla fornitura dei contenuti più critici (above the fold) e caricare tutto il resto una volta che il visitatore scorre verso il basso.

Tornando al nostro esempio di una persona che gestisce il proprio blog, potrebbe pubblicare un annuncio nel footer del proprio sito web. Se lo caricano con la tecnica lazy loading, verrà servito solo quando un visitatore lo scorrerà verso il basso.

Usa gli attributi async e defer

Gli script caricati in modo sincrono ritardano la costruzione del DOM e bloccano il rendering. Ecco perché dovresti caricare script di terze parti in modo asincrono (a meno che lo script non debba essere eseguito prima del rendering della pagina).

Gli attributi async e defer consentono al browser di analizzare l’HTML durante il caricamento degli script di blocco del rendering in background. In questo modo, i download degli script non bloccano la costruzione del DOM e il rendering della pagina, con conseguente caricamento più rapido e rendono i visitatori più felici.

Sebbene entrambi gli attributi rendano gli script “non blocking”, presentano anche alcune differenze:

Gli script con l’attributo defer mantengono il loro ordine relativo. Diciamo di avere due script: script 1 e script 2 in quest’ordine. Se rimandiamo entrambi, il browser eseguirà sempre per primo lo script 1, anche se lo script 2 è stato scaricato per primo. Anche gli script differiti vengono eseguiti prima dell’evento DOMContentLoaded.
In altre parole, vengono eseguiti solo dopo che l’HTML è stato caricato e analizzato ma prima dell’evento di caricamento della finestra.
Gli script con l’attributo async sono completamente indipendenti. Quello che viene scaricato per primo viene eseguito per primo. Inoltre vengono eseguiti indipendentemente dall’evento DOMContentLoaded, ovvero possono essere eseguiti anche se il documento non è stato completamente scaricato.Ciò significa che possono interrompere la costruzione del DOM se terminano il download mentre il parser è ancora in funzione.

In parole povere, gli script che necessitano del DOM o il cui ordine è importante dovrebbero utilizzare l’attributo defer. Al contrario, annunci, analisi e altri script indipendenti dovrebbero generalmente utilizzare l’async.

Evita script di terze parti che utilizzano document.write()

Parlando dell’attributo async, alcune risorse di terze parti non possono essere caricate in modo asincrono perché utilizzanodocument.write().

document.write() è particolarmente utilizzato per i servizi più vecchi che non sono stati aggiornati di recente. Tuttavia, gli script di terze parti che lo utilizzano possono ritardare il rendering della pagina di secondi, il che è particolarmente problematico per gli utenti con connessioni lente (ad esempio 2G).

In effetti, ha un impatto così negativo sulle prestazioni che Chrome ha deciso di intervenire:

“Chrome, a partire dalla versione 55, interviene per conto di tutti gli utenti quando rileviamo questo modello dannoso noto modificando il modo in cui document.write() viene gestito in Chrome.”

La soluzione per document.write() consiste semplicemente nel non iniettare script che lo utilizzano. A partire da Chrome 53, Chrome DevTools registra avvisi sulla console per l’uso problematico di document.write():

Risorse di terze parti ospitate autonomamente

Abbiamo iniziato questo articolo dicendo che gli script di terze parti sono risorse fuori dal tuo controllo, il che li rende più difficili da gestire.

Bene, ospitarli autonomamente è un’opzione che ti darà un maggiore controllo sul processo di caricamento degli script. Inoltre, ti consente anche di:

Ridurre la ricerca DNS e i tempi di andata e ritorno poiché tutto verrà archiviato sul tuo server;
Migliorare le intestazioni della cache HTTP;
Sfruttare il push del server HTTP/2 che riduce la latenza abilitando il multiplexing completo di richieste e risposte e riducendo al minimo il sovraccarico del protocollo.

Anche se potrebbe sembrare così, il self-hosting non è la soluzione perfetta e ci sono alcuni avvertimenti che devi considerare:

Ospitare autonomamente uno script significa che è necessario aggiornarlo manualmente in modo che disponga di tutte le ultime correzioni di sicurezza;
I tuoi script self-hosted non verranno aggiornati automaticamente tramite modifiche API. Ciò potrebbe comportare il malfunzionamento o il mancato funzionamento di uno script;
Alcuni script non funzionano nemmeno quando sono ospitati autonomamente;
Potrebbero esserci anche implicazioni legali su alcune risorse, principalmente sui caratteri.
Un’alternativa agli script self-hosting, dove hai ancora maggiore controllo, sarebbe l’utilizzo di Service Workers. Non approfondiremo l’argomento in questo momento, ma se sei interessato, controlla l’articolo di Matt Gaunt sui Service Workers.

Oltre ai pesanti file JavaScript, potresti voler ospitare autonomamente anche font di terze parti. Secondo Ilya Grigorik:

“Un WebFont “completo” che include tutte le varianti stilistiche, di cui potresti non aver bisogno, oltre a tutti i glifi, che potrebbero rimanere inutilizzati, può facilmente comportare un download di diversi megabyte.”

A differenza di molti script di terze parti, le risorse dei caratteri sono generalmente statiche e non aggiornate frequentemente. In parole povere, offrono una manutenzione più semplice rispetto agli script di terze parti ospitati autonomamente.

Tuttavia, dovresti assicurarti che la licenza del carattere consenta il self-hosting. Altrimenti potresti infrangere la legge. Un servizio popolare che consente di ospitare autonomamente i propri caratteri è Google Fonts.

Stabilire connessioni iniziali

I browser passano attraverso tre fasi per stabilire una connessione con un server:

trasformare il nome di dominio in un indirizzo IP,
impostare una connessione al server,
crittografare la connessione per la massima sicurezza.

In ciascuno di questi passaggi, il browser invia un dato e il server invia una risposta. Questo si chiama “Roundtrip”.

A seconda delle condizioni della rete, un singolo viaggio di andata e ritorno(Roundtrip) potrebbe richiedere una notevole quantità di tempo. Ecco perché implementare suggerimenti sulle risorse come “and” può ottimizzare il lavoro del browser, velocizzando il caricamento del tuo sito web/applicazione.

L’aggiunta informa il browser dell’intenzione della tua pagina di stabilire una connessione a un altro dominio e che desideri che il processo inizi il prima possibile. Le risorse verranno caricate più rapidamente perché il processo di configurazione è già stato completato nel momento in cui il browser le richiede. Secondo Google è possibile accelerare il tempo di caricamento di 100–500 ms stabilendo connessioni tempestive alle risorse di terze parti più critiche.
Funziona meglio per la risorsa più critica. Per il resto, utilizzare per ridurre il tempo di ricerca DNS, che in genere richiede circa 20-120 ms.

Rimuovi script di terze parti inutilizzati

È molto più semplice rimuovere uno script che ottimizzarlo.

Dovresti controllare regolarmente gli script di terze parti non utilizzati e rimuoverli completamente.

Puoi verificare se hai JavaScript inutilizzato da DevTools di Chrome. Utilizza la scheda “Copertura” per trovare questi snippet di codice:

Questa è una pratica davvero buona per i siti Web CMS, in cui il codice di terze parti viene regolarmente inserito tramite plug-in e potrebbe rimanere dopo che il plug-in non viene più utilizzato. L’esecuzione di un semplice audit come quello mostrato sopra può portare a un facile aumento delle prestazioni. Oppure puoi consultare la nostra guida sulla rimozione dei plugin inattivi.

Ricapitolado

Abbiamo trattato molti argomenti con questo articolo, quindi concludiamo con un breve riepilogo dei punti più importanti:

Gli script di terze parti sono necessari nel Web moderno in quanto consentono di creare un sito Web interattivo e interconnesso ed espandere i flussi di entrate;
Tuttavia, incorporare risorse di terze parti significa fare affidamento su di esse per essere veloci per evitare di rallentare le tue pagine;
Puoi identificare script di terze parti e misurare il loro contributo alle prestazioni del tuo sito utilizzando strumenti gratuiti come PSI, DevTools di Chrome e WebPageTest;
Il lazy load è una tecnica che permette di caricare codice di terze parti solo quando necessario;
L’utilizzo degli attributi async e defer garantisce che i download degli script non blocchino la costruzione del DOM e il rendering della pagina;
Evita gli script che utilizzano document.write() perché non possono essere caricati in modo asincrono;
Puoi ospitare autonomamente alcuni degli script di terze parti che stai utilizzando, assicurati solo di aggiornarli regolarmente. In caso contrario, potrebbero non funzionare correttamente, smettere di funzionare o rendere il tuo sito vulnerabile a violazioni della sicurezza;
Stabilisci connessioni iniziali implementando suggerimenti sulle risorse come e . Usa il primo per le risorse più critiche e il secondo per tutto il resto;
Se uno script di terze parti non aggiunge valore al tuo sito web, rimuovilo. Quindi, controlla se l’hai rimosso completamente utilizzando DevTools di Chrome.
Dopo ogni ottimizzazione, non dimenticare di testare il tuo sito web nel mondo reale. Concentrati sulle metriche degli utenti reali (come i valori dei campi Core Web Vitals) per assicurarti che il tuo lavoro abbia un impatto positivo sui tuoi visitatori.