Hoe u JavaScript-bestanden van GTM vermindert in PageSpeed Insights

JavaScript (JS)-bestanden van Google Tag Manager (GTM) zijn waardevol voor het tracken en analyseren van het gedrag van websitebezoekers. Een overvloed aan JS-bestanden kan echter aanzienlijke gevolgen hebben voor de prestaties en functionaliteit van uw website.

Deze JS-code zorgt ervoor dat uw website trager laadt, wat de klantervaring verslechtert. Wist u bovendien dat onderzoek van Amazon aantoont dat elke 100 ms laadtijd 1% aan omzet kost? Het verminderen van JS-bestanden is dus cruciaal voor uw website.

In dit artikel laten we oplossingen zien om het aantal GTM JS-bestanden te verminderen, van het auditen van containers tot overstappen op server-side tracking.

Het belangrijkste voordeel van het optimaliseren van JS-bestanden in GTM is de aanzienlijke verbetering van de laadsnelheid van de website.

Elk JS-bestand vereist een afzonderlijk HTTP-verzoek om te laden, en meer van zulke bestanden betekent meer verzoeken. Voor gebruikers leidt dit tot vertragingen bij het laden van websitecontent, wat kan resulteren in een hoger bouncepercentage. Voor uw website zelf kan dit leiden tot een lagere SEO-ranking en minder websiteverkeer.

Het verminderen van JS-bestanden verlaagt het aantal HTTP-verzoeken, waardoor uw website sneller laadt.

GTM-bestanden zijn meestal te vinden in de volgende secties van PageSpeed Insights-rapporten:

• Impact van code van derden verminderen
• Ongebruikte JavaScript van Google Tag Manager verminderen

Klik op de sectie waar u problemen mee ondervindt om er direct naartoe te gaan.

JS-code van derden maakt het mogelijk om tracking in te stellen voor verschillende gebruikersacties (klikken, scrollen, content delen, etc.). Dit beïnvloedt echter de websitesnelheid en vormt vaak een van de zwaarste belastingen op de webpagina.

Om problemen met GTM-bestanden op te lossen, raden we de volgende oplossingen aan:

Controleer alle tags in uw GTM-container, aangezien sommige mogelijk niet langer nodig zijn voor de analyse van websiteprestaties. Deze eenvoudige stap helpt het aantal codes van derden en de belasting van uw website te verminderen.

Om deze taak uit te voeren, raden we aan om GTM.Tools te gebruiken. Hier kunt u uw container inspecteren en de Workspace-inhoud bewerken en bulksgewijs bijwerken.

Custom HTML-tags zijn handig voor sommige gepersonaliseerde trackingconfiguraties; ze zijn echter vaak te zwaar en beïnvloeden de laadtijd van de website wanneer ze worden geactiveerd. Controleer de aangepaste tags die u hebt en probeer over te stappen op templates van GTM, omdat deze beter zijn geoptimaliseerd.

Een CDN slaat uw websitegegevens op in de cache en levert bepaalde pagina's vanaf een server die zich dichter bij uw bezoekers bevindt. Dit resulteert in een snellere levering van JS-bestanden.

Sommige tags hoeven niet direct te worden geactiveerd zodra de pagina laadt. Stel tag-sequencing in voor tags die kunnen worden uitgesteld. Met tag-sequencing kunt u opgeven dat tags direct vóór of nadat een bepaalde "primaire" tag wordt geactiveerd, moeten worden geactiveerd. Ga naar de “Advanced Settings” van de tags die u wilt uitstellen om deze optie te vinden.

Als het verminderen van aangepaste HTML-tags en/of het verwijderen van enkele tags voor u niet werkt, raden we aan om server-side tracking te proberen. 

Hoe werkt het? Bij een overstap naar server-side verplaatst u alle GTM-tags van de webcontainer naar de servercontainer. Deze tags worden dan geladen in de servercontainer in plaats van in de browser van de gebruiker. Dit resulteert in een snellere laadtijd van de website.

Ongebruikte JS-code is code die niet nodig is om de pagina te renderen (om de inhoud van de pagina te laden en weer te geven). Deze code vergroot de omvang van uw JavaScript-bundel, wat leidt tot een tragere laadtijd van de website.

De meest effectieve manier om dit probleem aan te pakken, is door uw GTM-container te auditen en overbodige tags te verwijderen.

Houd er echter rekening mee dat u dergelijke JS-bestanden zeer waarschijnlijk niet volledig kunt uitsluiten in dit onderdeel van PageSpeed Insights. 

Sommige typen variabelen maken deel uit van GTM zelf en zijn vereist om GTM in het algemeen te laten werken. Denk hierbij aan variabelen zoals Auto Event Variable, DOM Element, Element Visibility, enz. Zelfs als u deze variabelen niet aan uw container heeft toegevoegd, ziet u ze in PageSpeed Insights als "ongebruikte JS-code".

Ze maken deel uit van de GTM-bibliotheek en het verwijderen ervan kan de code breken en ertoe leiden dat GTM niet naar behoren of helemaal niet werkt.

Waarom verschijnt dit dan bij "ongebruikte JS-code" als het deel uitmaakt van de GTM-bibliotheek en essentieel is voor de werking van GTM? PageSpeed Insights markeert dit als ongebruikte code omdat u dit type variabele niet in uw container gebruikt. Het bevindt zich uitsluitend in de GTM-bibliotheek.

Zoals u ziet, houdt het fundamentele probleem met GTM-JS-bestanden vaak verband met ongeordende, overbelaste containers. De belangrijkste oplossing is om de containergrootte te monitoren en overbodige tags tijdig te verwijderen.

Er zijn twee manieren om de grootte van de GTM-container te monitoren:

Voeg de extensie Get Google Tag Manager Size toe aan uw browser en gebruik deze op uw website wanneer u de grootte wilt controleren.

De extensie toont de grootte van de container en geeft inzicht in het aantal variabelen, tags en triggers.

Gebruik de onderstaande link om de grootte van uw GTM-container te controleren. Vervang het deel "YOUR_ID" in de URL door het ID van uw container (klik op "Workspace" in GTM om het ID te zien).

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

Wanneer de resultatenpagina wordt weergegeven, kopieert u de inhoud en plakt u deze in TextEdit (voor Mac OS) of Kladblok (voor Windows OS). Vervolgens kunt u de bestandsgrootte bekijken – dat is de grootte van uw GTM-container.

Wanneer moet u de grootte van de GTM-container controleren?

De maximale containergrootte is 200 KB, maar GTM waarschuwt u zodra u 140 KB bereikt. Uiteraard wordt het ten zeerste aanbevolen om containers aanzienlijk kleiner te houden, zodat de prestaties van de website niet worden beïnvloed.

We raden aan om de containergrootte van tijd tot tijd te controleren, vooral na ingrijpende wijzigingen en trackingconfiguraties, zodat u de impact van de GTM-code op de prestaties van uw website onder controle kunt houden.

Een overschot aan GTM-JS-bestanden kan de prestatiescore van uw website in PageSpeed Insights aanzienlijk verslechteren. Deze codes zorgen ervoor dat de site langzamer laadt, wat leidt tot een hoger bouncepercentage en een lagere SEO-ranking.

De meest effectieve manieren om het aantal GTM-JS-bestanden te verminderen, zijn het beheersen van de grootte ervan, het auditeren van GTM-containers en het verwijderen van overbodige tags. Mocht het verminderen van het aantal tags echter niet baten, dan raden we aan om server-side tracking in plaats van client-side tracking te overwegen. Bij server-side worden alle GTM-tags in de servercontainer geladen in plaats van in de browser, wat resulteert in een snellere laadtijd van de website.