“Reeds één seconde vertraging in laadtijd kan een conversieverlies van 7% teweegbrengen!”

Wie is Erwin Hofman?

“Ik ben van origine een frontend en backend developer, met tegenwoordig de focus op performance. Denk aan laadtijd ten behoeve van verbeterde gebruiksvriendelijkheid (UX) en conversieverhoging (CRO).

Met weinig CMS mogelijkheden ben ik begin deze eeuw begonnen met het bouwen van een eigen CMS achter de websites die ik op basis van een aangeleverd ontwerp bouwde. Met dit CMS waren we één van de eerste om SEO vriendelijke URL’s uit te rollen en bijvoorbeeld, in het kader van verdere snelheidsoptimalisatie, critical path CSS toe te passen (inmiddels hebben WordPress en sinds oktober 2019 Magento hier ook ondersteuning voor uitgerold, wat ik een goede ontwikkeling vind). Die kennis en kunde zet ik naast het webbureau waar ik voor werk ook in binnen consultancytrajecten.”

Waar komt je passie voor website optimalisatie vandaan?

“De passie komt vooral voort uit de lichtgewicht websites die ik van oudsher wist te bouwen en in de huidige tijd nog steeds enorm snel zijn. Gewoonweg doordat er vrijwel geen onnodige code betrokken wordt en bovendien weinig JavaScript is toegepast.

In de huidige tijd kunnen we echter niet om JavaScript heen, terwijl juist JavaScript de grootste bottleneck is wanneer het aan komt op performance (ik adviseer hiervoor vooral Addy Osmani‘s “The cost of JavaScript” te lezen).

Naast dat een (of meerdere) JavaScript bestanden gedownload dienen te worden, moet het namelijk ook eerst geparsed, gecompiled en uitgevoerd worden voordat het een rol in je website kan spelen. Denk aan een slideshow bestuurbaar maken of ervoor zorgen dat een responsive navigatie uitklapbaar is. Des te meer JavaScript er wordt toegepast, des te meer impact dit zal hebben op de laadtijd en UX.”

Waarom is website optimalisatie zo belangrijk?

“Het korte antwoord is, vanwege conversie en dus aanmeldingen (in het geval van diensten zoals Netflix of Facebook) of gewoonweg omzet (zoals binnen e-commerce). Reeds één seconde vertraging in laadtijd kan een conversieverlies van 7% teweegbrengen, zo komt naar voren uit onderzoek van onder meer Google en Amazon.

Dit komt uiteraard met kanttekeningen, waaronder:
• Vanaf welk aantal seconden zou zo een conversieverlies in werking treden?
• Welke snelheid/performance metrics zijn hierbij van belang?

Uiteindelijk ben ik developer met focus op de frontend. In trajecten beschouw ik het als een leuke bevestiging indien positionering of conversie omhoogschieten, maar vind ik het interessanter om een goede gebruikerservaring te realiseren. Oftewel:

• De bezoeker snel in staat stellen te beginnen met lezen;
• Het aantal layout-verschuivingen en daarmee frustraties (denk aan een gemiddelde online media) tot een minimum beperken;
• De browser zo snel mogelijk tot rust te laten komen en dat zo te houden, zodat deze snel op gebruikersinteractie kan anticiperen (kort door de bocht: bij veel JavaScript kan de browser geen andere taken afhandelen. Wanneer de gebruiker ergens probeert te klikken en de browser tijdelijk niet kan reageren, kan dit ook tot frustraties leiden).”

Speelt de bezoeker nog een rol in de uiteindelijke snelheid?

“De bezoeker speelt hier juist een rol in. Op twee fronten zelfs, wat de toepassing van JavaScript vanuit User Experience perspectief interessant maakt. Welk toestel wordt bijvoorbeeld gebruikt en wat is de verwachting van de gebruiker?

Doordat bijvoorbeeld de internetsnelheden toenemen verwachten gebruikers dat daardoor ook de laadtijden verkorten. Iedereen van mijn generatie en daarvóór wist dat er geduld nodig was bij inbellen voor internet. Tegenwoordig willen we informatie snel kunnen absorberen. Als een web- of productpagina dan nog niet is ingeladen voordat het stoplicht bij een zebrapad op groen springt, of als men een tunnel nadert en aanvullende bronnen niet meer worden ingeladen, kan het zijn dat je de bezoeker nooit meer terug ziet.

Dit is helaas in statistieken moeilijk terug te herleiden. Dit, in combinatie met het feit dat men nog veelal op een smartphone in de verkennende fase zit en vervolgens na overtuigd te zijn per laptop/desktop de daadwerkelijke aankoop doet, maakt dat we als developers oog moeten houden voor de externe invloeden. Wat is men aan het doen, wat is de aandachtsspanne, maar ook: hoe ziet het apparaat en toebehoren er uit van je bezoekers?

Bijvoorbeeld:
• Gebruikt iemand om budget- of voorkeursredenen een ouder toestel;
• Welk internetabonnement hebben ze afgesloten, of van wat voor dekkingsgraad is er sprake;
• Technologieveranderingen (nieuwe beveiligingsupdates die door browsers worden doorgevoerd kunnen van invloed zijn op de prestaties)
• Van welke algemene voorkeuren maakt men gebruik? Heeft men ingesteld dat ze minder data willen verbruiken, of hebben ze zelfs ter voorkoming van privacy (tracking, ads) of security (cryptomining) issues, JavaScript in zijn geheel uitgeschakeld?

Twee belangrijke elementen zijn vervolgens:
• Dat je bezoekers die je website of webshop niet volledig geladen krijgen door de manier waarop JavaScript wordt ingezet, niet eens hoeft terug te zien in het bouncepercentage van je website;
• dat wanneer een JavaScript framework eenmaal de fundering van je development stack is geworden, het in combinatie met toekomstige uitbreidingen enkel lastiger wordt van ontstane performance bottlenecks te herstellen (buiten eventuele versie- en dus updateconflicten om).

Wel denk ik dat de Server Side Rendered oplossing van Magento of zelfs WordPress nooit helemaal optimaal zal worden. De codebase heeft een te grote laadtijd ballast (resulterend in een hoge Time to First Byte, kortweg TTFB), maar betreft een dusdanige fundering van het platform dat wanneer je de snelheid enigszins wilt kunnen waarborgen een headless oplossing al snel voor de hand ligt.”

Een headless e-commerce met daarbovenop PWA is dus de oplossing?

“Progressive Web Apps gaan vaak hand in hand met een headless oplossing, aangevuld met Client Side Rendering (CSR, oftewel, de website-content opbouwen via JavaScript). CSR wint tegenwoordig dan ook aan populariteit. Dit betekent qua performance echter direct een nieuwe achterstand, omdat je de weergave van content een halt toeroept totdat JavaScript gedownload én geparsed is. “Render-blocking resource” heet dit en is onder developers wellicht de meest gehate aanbeveling binnen een Lighthouse of PageSpeed Insights analyse.

Headless e-commerce is kort samengevat het loskoppelen van frontend (de weergave van producten op de webshop) en backend (de beheeromgeving als ook embedded genereren van productpagina’s). CSR, vaak dus in de vorm van een PWA, kan in het verlengde van een headless e-commerce oplossing een aanvulling zijn, wanneer de traditioneel gebouwde Server Side Rendered webshop te weinig handvatten heeft om snelheid en daarmee UX als ook conversie te verbeteren.

Je verplaatst bij een CSR oplossing echter het server side probleem (namelijk, te hoge TTFB’s) naar de client side, je bezoeker dus. Ineens is het niet moeilijk meer optimale TTFB’s te behalen, maar de perceived performance en user experience gaat er niet per definitie op vooruit en is juist meer variabel geworden. Dit resulteert al snel in hogere First Meaningful Paint-metrics. De content kan pas worden weergegeven als de render-block JavaScript klaar is. Niet bevorderlijk voor de perceived performance en conversie en dus een nieuwe uitdaging voor je developers.

Overigens valt er met service workers veel performance-issues af te vangen. Dit gebeurt echter binnen bureaus nog niet altijd optimaal en kent zo zijn eigen uitdagingen.

Heb je tips voor mensen die met website optimalisatie aan de slag willen?

“Websites behoeven een andere aanpak dan webshops. De simpele reden is dat webshops op server-niveau veelal zwaarder zijn als ook op browser-niveau meer materiaal (CSS, JavaScript, afbeeldingen) inladen.

Optimalisatie komt echter op hetzelfde neer:
– Zorg voor een juiste hosting en server side caching om de server impact te reduceren en een goede TTFB metric te kunnen behalen;
– Probeer de weergave van content niet afhankelijk te maken van JavaScript en ga vervolgens enkel kritieke CSS inlinen;
– Komt het advies omtrent JavaScript te laat of is er bewust gekozen voor een CSR oplossing? Voorkom dan dat de browser JavaScript uitvoert dat binnen de handeling van een gebruiker nog niet nodig is. Met andere woorden, je hoeft nog geen cart.js en search.js uit te voeren als iemand net vanuit de zoekmachine op een productpagina is beland.”

Welke vaardigheid zou iedere online marketeer/ondernemer volgens jou moeten hebben?

“Wat ik zelf heb moeten leren is om branchegenoten minder als concurrent te zien en meer als partners. Zoals voor kennisdeling of ervaringen uitwisselen. Voorheen hield ik veel informatie en bevindingen voor mezelf, zoals praktijkvoorbeelden over pagespeed en performance . Tegenwoordig deel ik veel van de kennis die ik heb.

Dezelfde vlieger gaat op voor expertise inhuren, in plaats van zelf uit te zoeken of het wiel opnieuw uit te vinden. Alhoewel op één hand te tellen, zijn we door deze fout wel eens klanten verloren. Communicatieve vaardigheden zijn daarbij handig.”

Welke rol speelt online marketing binnen jouw bedrijf?

“Naast pagespeed/performance consultant voor e-commerce bureaus, doe ik binnen Blue 2 Blond het stukje research en development voor het CMS dat we gebruiken. Met de focus op pagespeed/performance, maar ook toegankelijkheid, veiligheid en privacy.

Het aan de man (bedrijf) brengen van ons product gaat nog vaak via deze match, waarbij de opdrachtgever waarde hecht aan deze pijlers. Dat gaat vaak via partners in ons netwerk en soms via LinkedIn. Online marketing zelf speelde tot dusver geen grote rol, maar met een rebranding achter de rug zou daar zomaar verandering in kunnen komen.”

Wat zijn je favoriete online (marketing) tools en waarom?

“Aangezien ik developer ben en vooral voldoening haal uit performance optimalisatie, zijn de tools die ik gebruik vrij voorspelbaar:

– Lighthouse, om individuele performance metrics onder ogen te krijgen;
– Gtmetrix en pingdom tools om een snelle checklist te verkrijgen die pagespeed belicht;
– Webpagetest.org om een videosimulatie te kunnen doen binnen bij verschillende scenario’s (type device, locatie, internetsnelheid);
– PageSpeed Insights (op Lighthouse basis) om resultaten snel te delen met anderen. Deze score is tegenwoordig voor iedereen gelijk en geeft dus een goed beeld zonder dat er met uitkomsten geknoeid kan worden. Deze kanttekening geef ik er bij, omdat ik wel eens heb meegemaakt dat bureaus, omwille van een showcase, binnen Lighthouse een afwijkende configuratie hanteerden.”

Wat was tot nu toe je grootste uitdaging?

“Het belang van pagespeed en performance in laten zien bij klanten. Er vindt een verschuiving plaats naar meer JavaScript-georiënteerde oplossingen, maar zelfs gerenommeerde bureaus zien nog te weinig de risico’s hiervan in.

Nu ook Magento bijvoorbeeld met de uitrol van CSS critical path komt in versie 2.3.3. maakt het aantonen van het belang en dus mijn communicatie wellicht eenvoudiger. Toch vergt het in praktijk meer lobbytijd dan dat het mij tijd kost een panklare Proof of Concept te maken.”

Wat is tot nu toe je grootste succes geweest?

“Een van mijn grootste successen is dat we al 15 jaar succesvol bouwen aan ons CMS en deze nog steeds bestaansrecht heeft. Dit is niet voor iedere opdrachtgever van belang, maar we merken gelukkig aan de opdrachtgevers die we wel aan ons binden dat snelheid of bijvoorbeeld toegankelijkheid ook in het huidige tijdperk belangrijk zijn (of zelfs belangrijker worden).

Waar ik ook trots op ben is de opdrachtgevers waar we de afgelopen vijftien jaar voor hebben gewerkt. Het zijn leuke momenten als je hun logo’s terug ziet komen in het dagelijks leven. Bijna dagelijks zie ik De Technische Unie door de straten rijden, een Hogeschool Rotterdam op gebouwen prijken of (online) reclames van Vattenfall voorbijkomen.”

Wat is het beste advies dat je ooit kreeg?

“Het beste advies dat ik ooit kreeg was om mijn kennis te delen en mijn dienstverlening meer te onderscheiden. Binnen het CMS hebben we (wederom pagespeed en accessibility) best practices toegepast en zijn we deze altijd blijven doorontwikkelen. Die kennis maar ook concrete technieken is uiteraard opnieuw te gebruiken, ongeacht website of webshop.

Daarnaast ben ik eigenaar van een drietal online bedrijven, waardoor de grens tussen mijn product- of juist kennisaanbod soms vaag was wanneer ik me bijvoorbeeld in LinkedIn posts ging mengen. Een marketeer in ons pand had me aangeraden die kennis niet vanuit één van mijn bedrijven te delen, maar vanuit mij als persoon. Op die manier zou er een goed onderscheid ontstaan tussen het webbureau dat een product aanbiedt en Erwin Hofman als persoon waarmee je kennis, kunde en best practices in huis haalt. Dat bleek een juiste insteek en brengt me inmiddels interessante trajecten en bij leuke partijen aan tafel, naast de autoriteit die het mij oplevert.

Wat is je gouden tip?

“Ik vrees dat ik in heel veel woorden de gouden tip(s) hierboven al gegeven heb. Wordt het toch te tijdrovend om als digital agency of e-commerce aanbieder zelf op onderzoek uit te gaan, dan val ik terug op een “Wij van W.C. Eend”; wees niet te bang om expertise in te huren en, als het om pagespeed en performance gaat, mij een uitnodiging te sturen om eens mee te denken.”

Erwin Hofman
Blue 2 Blond