Come ridurre i file JavaScript di GTM in PageSpeed Insights

I file JavaScript (JS) di Google Tag Manager (GTM) sono utili per tracciare e analizzare il comportamento dei visitatori del sito web. Tuttavia, un eccesso di file JS può influire notevolmente sulle prestazioni e sulla funzionalità del sito web.

Questi codici JS rallentano il caricamento del sito web, peggiorando l'esperienza degli utenti. Inoltre, sapeva che uno studio di Amazon dimostra che ogni 100ms di tempo di caricamento della pagina costa l'1% del fatturato? Ridurre i file JS è quindi fondamentale per il Suo sito web.

In questo articolo mostreremo le soluzioni per ridurre il numero di file JS di GTM, dall'audit dei container al passaggio al tracciamento lato server.

Il principale vantaggio dell'ottimizzazione dei file JS in GTM è il significativo miglioramento della velocità di caricamento del sito web.

Ogni file JS richiede una richiesta HTTP separata per essere caricato e un numero maggiore di file comporta più richieste. Per gli utenti, ciò si traduce in ritardi nel caricamento dei contenuti del sito web che possono causare una frequenza di rimbalzo più elevata. Per il Suo sito web, ciò può determinare un peggioramento del posizionamento SEO e una riduzione del traffico.

Ridurre i file JS consentirà di diminuire il numero di richieste HTTP, velocizzando il caricamento del Suo sito web.

I file di GTM compaiono solitamente nelle seguenti sezioni dei report di PageSpeed Insights:

• Ridurre l'impatto del codice di terze parti
• Ridurre il codice JavaScript inutilizzato di Google Tag Manager

Faccia clic sulla sezione in cui riscontra problemi per passare direttamente ad essa.

Il codice JS di terze parti consente di impostare il tracciamento di diverse azioni dell'utente (clic, scorrimento, condivisione di contenuti, ecc.). Tuttavia, influisce sulla velocità del sito web e spesso costituisce uno dei carichi più pesanti per la pagina web.

Per risolvere i problemi relativi ai file di GTM, consigliamo le seguenti soluzioni:

Esamini tutti i tag presenti nel Suo container GTM, poiché alcuni potrebbero non essere più necessari per l'analisi delle prestazioni del sito web. Questo semplice passaggio aiuterà a ridurre la quantità di codice di terze parti e il carico sul Suo sito web.

Per completare questa operazione, consigliamo di utilizzare GTM.Tools. Qui è possibile esaminare il container, modificarlo e aggiornare in blocco i contenuti del Workspace.

I tag HTML personalizzati sono utili per alcune configurazioni di tracciamento personalizzate; tuttavia, sono spesso troppo pesanti e, quando vengono attivati, incidono sul tempo di caricamento del sito web. Esamini i tag personalizzati configurati e cerchi di passare ai template di GTM, in quanto sono più ottimizzati.

Una CDN memorizza nella cache i dati del Suo sito web e distribuisce determinate pagine da un server più vicino ai visitatori. Ciò consente di distribuire i file JS molto più rapidamente.

Alcuni tag non devono necessariamente essere attivati durante il caricamento della pagina. Imposti la sequenza di tag per i tag che possono essere ritardati. La sequenza di tag consente di specificare i tag da attivare immediatamente prima o dopo l'attivazione di un determinato tag "principale". Per trovare questa opzione, acceda a “Advanced Settings” nei tag che desidera ritardare.

Se ridurre i tag Custom HTML e/o eliminare alcuni tag non fa al Suo caso, consigliamo di provare il tracciamento lato server. 

Come funziona? Passando al tracciamento lato server, sposterà tutti i tag GTM dal container web al container server. Questi tag verranno caricati nel container server anziché nei browser degli utenti. Ciò si tradurrà in un caricamento più rapido del sito web.

Il codice JS inutilizzato è il codice non necessario per eseguire il rendering della pagina (per caricare e visualizzare il contenuto della pagina). Questo codice aumenta le dimensioni del bundle JavaScript, causando un caricamento più lento del sito web.

Il modo più efficace per affrontare questo problema consiste nell'eseguire un audit del proprio container GTM ed eliminare i tag non necessari.

Tuttavia, tenga presente che, molto probabilmente, non sarà possibile escludere completamente tali file JS da questa sezione in PageSpeed Insights. 

Alcuni tipi di variabili possono far parte di GTM stesso e sono necessari per il funzionamento generale di GTM. Tali variabili includono Auto Event Variable, DOM Element, Element Visibility, ecc. Potrebbe persino non aver aggiunto queste variabili nel proprio container, eppure visualizzarle come "codice JS inutilizzato" in PageSpeed Insights.

Fanno parte della libreria di GTM e la loro eliminazione può danneggiare il codice, compromettendo o bloccando il funzionamento di GTM.

Perché compare tra il "codice JS inutilizzato" se fa parte della libreria di GTM ed è essenziale per il suo funzionamento? PageSpeed Insights lo contrassegna come codice inutilizzato perché non è presente questo tipo di variabile nel proprio container. Si trova esclusivamente nella libreria di GTM.

Come si può notare, il problema fondamentale che si può riscontrare con i file JS di GTM è legato a container disordinati e sovraccarichi. La soluzione fondamentale consiste nel monitorare le dimensioni del container ed eliminare tempestivamente i tag non necessari.

Esistono due modi per monitorare le dimensioni del container GTM:

Aggiunga l'estensione Get Google Tag Manager Size al proprio browser e la utilizzi sul proprio sito web ogni volta che desidera verificarlo.

L'estensione mostrerà le dimensioni del container e fornirà dettagli sul numero di variabili, tag e attivatori.

Utilizzi il link sottostante per verificare le dimensioni del proprio container GTM. Al posto della parte "YOUR_ID" nell'URL, inserisca l'ID del proprio container (faccia clic su "Workspace" in GTM per visualizzare l'ID).

https://www.googletagmanager.com/gtag/js?id=YOUR_ID

Una volta ottenuta la pagina dei risultati, ne copi e incolli il contenuto in TextEdit (per Mac OS) o Blocco note (per Windows OS). In questo modo potrà visualizzare le dimensioni di questo file, che corrispondono alle dimensioni del proprio container GTM.

Quando verificare le dimensioni del contenitore GTM?

Il limite di dimensione del contenitore è di 200 KB, ma GTM mostrerà un avviso al raggiungimento di 140 KB. Naturalmente, si raccomanda vivamente di mantenere i contenitori molto al di sotto di questa soglia per non influire sulle prestazioni del sito web.

Consigliamo di monitorare periodicamente le dimensioni del contenitore, in particolare dopo modifiche rilevanti e configurazioni del tracciamento, così da poter controllare l'impatto del codice GTM sulle prestazioni del sito web.

L'eccesso di file JS di GTM può compromettere sensibilmente il punteggio delle prestazioni del sito web in PageSpeed Insights. Questi codici ne rallentano il caricamento, provocando un aumento della frequenza di rimbalzo e un peggioramento del posizionamento SEO.

I modi più efficaci per ridurre il numero di file JS di GTM consistono nel controllarne le dimensioni, eseguire un audit dei contenitori GTM ed eliminare i tag non necessari. Tuttavia, se la riduzione del numero di tag non dovesse funzionare, consigliamo di valutare il tracciamento server-side rispetto a quello client-side. Con il server-side, tutti i tag di GTM verranno caricati nel contenitore server anziché nel browser, consentendo un caricamento del sito web più rapido.