Websitepaginasnelheid verbeteren met behulp van server-side Google Tag Manager

Optimalisatie van de paginasnelheid was een van de belangrijkste voordelen die marketeers en webontwikkelaars zagen toen de eerste versie van server-side Google Tag Manager werd uitgebracht. Dit zou gebeuren doordat trackingscripts niet langer hardcoded waren, maar via Google Tag Manager zouden worden toegevoegd. 

In dit artikel laten we u zien welke invloed het verplaatsen van tags van de GTM-webcontainer naar een servercontainer heeft op uw GTM PageSpeed, hoe de data er daadwerkelijk uitziet en welke aanpak het meest logisch is voor uw setup.

Al in 2016 stelde Google vast dat de ideale laadtijd van een website 3 seconden is. Tegelijkertijd duurt het gemiddeld 22 seconden om een mobiele pagina volledig te laden. 

We leven in een tijd waarin mensen vaker hun telefoon gebruiken dan desktopapparaten, en smartphones zijn goed voor meer dan 50% van al het internetverkeer. Volgens Google liggen de conversieratio's op mobiele telefoons echter lager dan op desktops. Daarom speelt de laadsnelheid van de website een essentiële rol bij het voldoen aan prestatienormen.

Het is geen geheim dat gebruikers een snelle website-ervaring verwachten. Als de bestemmingspagina te traag is, sluiten ze de pagina of verlaten ze het winkelwagentje en gaan ze naar de site van de concurrent. In de huidige mobile-first wereld is het creëren van snel ladende sites cruciaal. Gebruikers willen snel een blog kunnen openen om artikelen te lezen, nieuwe kleding te kopen, hotelbeoordelingen te bekijken, enzovoort.

Volgens onderzoek van Amazon leidt een vertraging van 1 seconde in de paginarespons tot een verlies van 1% aan conversies. Voor hen staat dat gelijk aan een verlies van $ 1,6 miljard aan jaarlijkse omzet.

Zoals u ziet, kan het wachten op het laden van zware pagina's elk bedrijf veel geld kosten. 

Elke tag die u via Google Tag Manager toevoegt, wordt als JavaScript uitgevoerd in de browser van de gebruiker. Elk script moet worden gedownload, geparsed en uitgevoerd vóór of nadat de pagina wordt geladen, en dat kost tijd.

Niet elke GTM-setup gedraagt zich op dezelfde manier, en daar ontstaat de meeste verwarring. De manier waarop de container is geïmplementeerd — web of server — bepaalt of GTM de browser extra belast of juist ontlast. In de webcontainer is elke tag die u toevoegt (analytics, advertentiepixels, chatwidgets, heatmaps) een script dat direct in de browser van de bezoeker wordt geladen en uitgevoerd.

Elk script concurreert om dezelfde beperkte middelen: de main thread, bandbreedte en renderingstijd. Hoe meer tags u stapelt, hoe groter de impact op de prestaties van Google Tag Manager wordt, ook al is GTM zelf een lichte container.

Server-side GTM verandert de locatie waar de taguitvoering plaatsvindt. In plaats van tientallen externe scripts die client-side worden uitgevoerd, ontvangt uw servercontainer de data en stuurt deze vanuit de cloud door naar uw marketing- en analyseplatformen. De browser hoeft alleen met uw eigen server te communiceren, en niet met tientallen verschillende domeinen van derden. Dat is de voornaamste reden waarom het verschil in PageSpeed bij Google Tag Manager tussen web- en serversetups meestal zo groot is.

In 2020 bracht Google een servercontainer uit voor Google Tag Manager en Tag Manager 360. Hiermee kunnen adverteerders tags van derden van hun sites verplaatsen naar een nieuwe servercontainer die wordt gehost op cloudservers. Op deze manier kan de website sneller laden, kan tracking nauwkeuriger zijn en zijn gegevens veiliger. Het verplaatsen van tags naar de servercontainer kan helpen deze Google PageSpeed-fout op te lossen: "Reduce the impact of third-party code — Third-party code blocked the main thread for 550 ms".

Als u tags verplaatst van de web- naar de servercontainer, worden tags rechtstreeks in de servercontainer geladen en niet in de browser. Hierdoor laadt de pagina sneller, wat een positief effect heeft op de gebruikerservaring. Zoals u ziet, kan het zorgen voor snellere laadtijden van pagina's, meer beveiliging van uw klantgegevens en meer tools voor gegevensbeheer. Dit is een van de duidelijkste voorbeelden van hoe server-side Google Tag Manager de websiteprestaties kan verbeteren zonder dat dit ten koste gaat van de trackingnauwkeurigheid.

Tags in de servercontainer hebben alleen toegang tot informatie die naar de server wordt verzonden. Ze hebben geen toegang tot andere gegevens die gebruikers op de site invoeren. En omdat deze tags in uw servercontainer zijn geplaatst, weet u precies welke datatags informatie verzamelen en waarheen die informatie wordt verzonden.

Niet alle tags hebben dezelfde invloed op de paginasnelheid, en dit is een belangrijke nuance om te onthouden voordat u aanneemt dat een migratie elk prestatieprobleem zal oplossen. Een licht analyticssnippet en een zware retargetingpixel voor advertenties kosten niet evenveel laadtijd, ook al zijn beide 'slechts een tag'. De tags met de grootste voetafdruk zijn meestal de tags die meerdere netwerkverzoeken afvuren, extra scripts laden of bij elke paginaweergave worden uitgevoerd in plaats van bij specifieke gebeurtenissen.

De betrouwbaarste manier om dit zelf te zien, is door uw PageSpeed Insights-rapport voor Google Tag Manager vóór en na een migratie te controleren en het gedeelte met code van derden in de resultaten direct te vergelijken.

Voor dit experiment heb ik een demowebsite gebruikt en de Google PageSpeed-resultaten vergeleken wanneer tags werden toegevoegd via de GTM-webcontainer versus de GTM-servercontainer. Niet alle tags hebben dezelfde impact op Google PageSpeed. Tijdens dit experiment heb ik gekozen voor de populairste tags die door mijn klant worden gebruikt en die naar de servercontainer kunnen worden verplaatst: Facebook, Bing en Active Campaign.

De GTM-servercontainer bevat native tags voor GA4. Hier vindt u gedetailleerde informatie over het instellen van GA4-tracking met een server-side GTM-container. We hebben ook een aangepaste template gemaakt om u te helpen Facebook Pixel naar de serveromgeving te verplaatsen. 

Hieronder staan de resultaten van de Google Speed Test. Google PageSpeed toonde 95 punten op mobiel en 100 op desktop. 

We hebben deze tags geïnstalleerd in de servercontainer: GA4, Facebook (basis- en conversietracking), Hubspot en de Klaviyo-tag.

Toen we de pixel naar de webcontainer verplaatsten, daalden de resultaten van Google PageSpeed naar 56 punten. 

Als u tags verplaatst naar de Google Tag Manager-servercontainer, versnelt dit uw site. De mate van impact hangt af van de tags die u gebruikt. In deze test lieten de populairste tags onder klanten (GA4, Facebook en Active Campaign ) een duidelijk, meetbaar verschil zien zodra ze server-side werden geplaatst.