Nuon Sales Force, de commerciële buitendienst van Nuon Vattenfall, hielp ik na een performance scan vanuit een 48% PSI score weer in de groene cijfers om tot betere ranking en conversie percentages te komen.
Na eens eerder deze website met een optimale performance score opgeleverd te hebben, werden marketing uitingen als ook een chatbot uitgerold via Google Tag Manager. Deze vrijheid ging door de hoeveelheid JavaScript als ook tracking cookies ten koste van twee kernpunten waaraan voldaan moest worden:
- De privacy van bezoekers van de website;
- De performance score ten behoeve van conversie.
Website privacy en cookies
Zoals elke website, diende ook de website voor Nuon Sales Force AVG compliant te zijn. Alhoewel hier in beginsel in voorzien werd, kon dit met de vrijheid van Google Tag Manager deels teniet worden gedaan.
Hierop hebben we samen met de cookie-scan dienstverlening van AVG Cloud Register een maatwerk cookie-banner toegepast, waarbij er per tracking-categorie toestemming kan worden gegeven voor inzet van third party koppelingen en bijkomende cookies. Onder meer de volgende toepassingen zijn achter cookie-toestemming komen te liggen:
- Hotjar;
- Facebook Pixel;
- Chat mogelijkheid.
De redenen om voor een maatwerk cookie-melding oplossing te gaan, waren als volgt:
- Website snelheid
Een externe cookie-oplossing brengt aanvullende netwerk-verzoeken in de browser met zich mee, wat wegens deze vorm van network latency ten koste gaat van de performance. Bovendien is er met de eigen cookie-imeplementatie minder code benodigd, doordat in een browser enkel code ingeladen wordt dat ook daadwerkelijk gebruikt gaat worden. - Look & feel
De cookie-melding moest qua look & feel overeenkomen met die van Nuon.nl. Dit proces werd vergemakkelijkt doordat maximale invloed uitgeoefend kon worden op de layout en positionering van de melding; - Functionaliteit
Ook de invloed op de werking van de cookie-melding, is op deze wijze maximaal. Bij goedkeuring van een cookie, wordt er direct een event verstuurd naar Google Tag Manager, waarbij bijvoorbeeld een Hotjar of FB pixel direct ingeladen wordt, zonder te hoeven verversen.
Anderzijds was de uitrol van een functie om je voorkeuren weer te wijzigen, eenvoudiger als ook naar wens gerealiseerd.
Cookie toestemming bijhouden
De goedkeuring voor cookies vindt op binaire wijze plaats. Dit houdt simpelweg in dat de toestemming met één getal wordt bijgehouden, waaruit de exact gegeven toestemming per categorie herleid kan worden. Dit voorkomt een benodigde array om per de toestemming per categorie bij te houden en maakt de code efficienter.
Events versturen naar Google Tag Manager
De vervolgstap is om per goedkeuring, een event te versturen naar Google. Dat gebeurt uiteindelijk in broncode per categorie als volgt:
dataLayer.push({'event':'cookieconsent_' + cat });
Door triggers aan te maken (bijvoorbeeld, één per categorie), valt binnen Google Tag Manager te configureren dat third parties alleen geladen worden bij goedkeuring.
Privacy vriendelijke social sharing
Binnen de website van nuonsalesforce.nl kunnen blogberichten gedeeld worden via social media kanalen. Denk aan Facebook, Twitter of Whatsapp. Deze toepassing is intern gerealiseerd. Om die reden is voor het tonen van social sharing knoppen, geen toestemming benodigd.
Performance en conversie verbetering
Dat verbetering van de website laadtijd en performance directe invloed heeft op de conversie (c.q. eventuele omzet of response), hoeven we gelukkig nog zelden uit te leggen.
Na toepassing van verschillende tracking-uitingen als ook toepassing van een chatbot, hebben we een flink verval in de pagespeed score opgemerkt. De voormalige scores van 90+ waren inmiddels gezakt naar het volgende:
- PSI score van 48% voor de homepagina;
- PSI score van 51% voor een blogpagina.
Na analyse bleek onder meer dat Hotjar een impact had van ongeveer 2 procentpunten op de PSI score. De chat had omwille van de benodigde laadtijd een invloed van maar liefst 38 procentpunten. Ook de code benodigd voor Google Tag Manager zelf en aanvullend Google Analytics, hebben hun invloed op de performance; het blijft immers externe JavaScript dat eerst gedownload en vervolgens uitgevoerd moet worden.
Privacy verbetert performance
Reden genoeg om een performance-traject in te gaan. De eerder genoemde privacy-slag, zorgde er direct voor dat de ervaren snelheid bij een eerste websitebezoek er op vooruitging. Ook de PSI score schoot aanzienlijk omhoog, naar 94% en 96% voor respectievelijk de home- en blogpagina, waarbij de resterende winstpunten vooral in Nuon's huisstijl lettertype zit.
Zie onderstaande screenshot voor de verbeteringen van enkele metrics (betreft een voor en na situatie):
Behoud van chat mogelijkheid
Het gebruik van de Joboti chatbot is gezien de puur technische cookies weliswaar AVG compliant; Desondanks had de benodigde bronnen om deze chat mogelijk te maken, een impact van 38 procentpunten op de performance score.
Reden dus om de chat te elimineren wanneer de pagina voor het eerst wordt ingeladen, met bovengenoemde verbetering als gevolg. Desondanks diende de aanwezigheid van de chatbot intact te blijven. Hierop hebben we de knop op gelijke wijze nagebouwd.
Pas wanneer men klikt, wordt opdracht gegeven de code uit te voeren (en zal de chat ook de volgende pagehit automatisch inladen). Door de code initieel echter pas uit te voeren wanneer het gebruikt wordt, voorzie je in betere performance, betere TTI metric als wellicht ook betere First Meaningful Paint (afhankelijk van of je JavaScript asynchroon laadt).
Resource hints
Alhoewel de code een third party toepassing betreft en we daarmee geen invloed hebben op de code zelf, kunnen we het inladen van de chatbot wel versnellen. Op het moment dat men op het punt staat de interactie met de chat-button aan te gaan, worden bronnen alvast gedownload via de resource hint prefetch. Dit is te zien in onderstaande screenshot:
In het eerste blok werden de bronnen alvast gedownload, omdat de bezoeker er met de muis overheen ging of een muisklik startte op de chat-button. Te zien:
- op het moment dat iemand op de knop klikt, zijn bronnen alvast gedownload (kolom "Size" geeft aan "from disk"); de bronnen kunnen bij werkelijk gebruik direct uit de cache van de browser worden gehaald;
- In de kolom "Time" is te zien dat de benodigde tijd significant korter is doordat er niet meer gedownload hoeft te worden;
- Dit is ook terug te zien in de visualisatie in kolom "Waterfall", waarbij de blauwe balk de download-tijd representateert. Van een DNS lookup, Initial Connection & SSL (de andere kleuren-balken) is geen sprake meer van, waarmee we bijdragen aan het sneller inladen van de chat.
Website snelheid verbeteren en performance scan
Tijdens implementatie van bovenstaande performance verbeteringen, hebben we tevens een aanvullende toepassing uitgerold ten behoeve van snellere individuele pagina's. Hiermee is de website 3.125 maal sneller dan Google's norm geworden.
Net als Nuon ook een privacy of performance scan voor één van je websites? Naast een theoretisch rapport, pas ik de techniek ook in praktijk toe, of werk ik samen met developers binnen een bureau om tot betere performance te komen.
