Webshop sneller maken met Hypernode, RUMvision en Tideways

Black Friday valt dit jaar op 27 november, en bij de meeste webshops gaan nu de laatste releases live voor de codefreeze. Een nieuwe plugin, een aanpassing aan het thema, een Shopware-update, een trackingtag die marketing nodig heeft voor de campagne. Elke release is een kleine gok. Meestal pakt die goed uit. Soms maakt een release je productpagina's op mobiel een paar honderd milliseconden trager, of wordt een query in de checkout twee keer zo zwaar. En niemand merkt het, tot de conversie zakt of Google Search Console het weken later meldt.

Die milliseconden zijn geen detail. In een onderzoek dat Deloitte voor Google uitvoerde bij 37 Europese en Amerikaanse merken, met ruim 30 miljoen sessies, leverde een mobiele site die 0,1 seconde sneller laadde 8,4% meer conversies op in retail. Dat staat in de case study Milliseconds Make Millions op web.dev. Het onderzoek is uit 2019, maar sindsdien is er alleen maar meer mobiel gekocht.

Bij Memo behandelen we snelheid daarom niet meer als iets wat je eens per kwartaal checkt. We zijn partner van alle drie de partijen, Hypernode, RUMvision en Tideways, en hebben hun systemen met elkaar verbonden, zodat we bij elke release en elke update die we doen de impact zien, zowel op pagespeed als op de technische werking. In deze blog lees je wat elk van de drie doet, waarom één tool altijd een blinde vlek laat, en hoe het trio samenwerkt rond een release.

Drie tools, drie blikken op dezelfde webshop

Hypernode is het fundament. Een hostingplatform dat speciaal is gebouwd voor e-commerce, en Memo is partner van Hypernode. Caching, PHP-workers, staging en deployment zijn afgestemd op hoe een webshop zich gedraagt, in plaats van generieke serverinstellingen. Tideways zit ingebouwd in het platform. Aanzetten is één instelling of één schakelaar in het controlepaneel van Hypernode.

RUMvision laat zien wat je bezoekers echt ervaren. Het is een Nederlandse tool voor real user monitoring (RUM) die de Core Web Vitals meet in de browsers van je echte bezoekers: hoe snel de belangrijkste content staat (LCP), hoe snel de pagina reageert op een tik (INP) en hoeveel hij verspringt tijdens het laden (CLS). Search Console werkt met een venster van 28 dagen; RUMvision toont de data realtime, uitgesplitst naar apparaat, paginatype en script van derden, en slaat alles op in de EU. Memo is partner van RUMvision: wij richten het in, lezen de data en vertalen die naar concrete verbeteringen voor je shop.

Tideways laat zien wat er in je applicatie gebeurt. Het is een tool voor application performance monitoring en profiling van PHP. Shopware heeft zelf een profilerkoppeling met Tideways in de kern opgenomen, zoals beschreven in de architectuurbeslissing over profiler-integraties. In Tideways zie je welke transactie, databasequery, template of plugin de tijd opslokt, en voor Shopware 6 meet het ook hoe vaak pagina's uit de paginacache komen. Als partner van Tideways richt Memo het per omgeving in en gebruiken we het dagelijks in ons eigen ontwikkelwerk.

Waarom één tool nooit het hele verhaal vertelt

Stel: het is dinsdagochtend en RUMvision laat zien dat de LCP op productpagina's 's nachts is verslechterd. Ligt dat aan de frontend, zoals een te zware afbeelding of een nieuw script, of reageert de server trager? RUMvision vertelt je dat de time to first byte is gestegen. Tideways vertelt je welke transactie zwaarder werd en welke query of plugin daar de oorzaak van is. Hypernode geeft je de knoppen om er iets aan te doen: capaciteit, cache-instellingen, PHP-versie.

Het werkt ook andersom. Tideways laat zien dat de backend net zo snel is als altijd, terwijl RUMvision een slechtere INP op mobiel meldt. Dan zit de oorzaak in de browser: een zwaar script van een derde partij, of een tag die iemand via Google Tag Manager heeft toegevoegd.

Met maar één van deze tools blijft het gissen, of erger: discussiëren over wiens probleem het is. Met alle drie staan frontend en backend op dezelfde tijdlijn, en gaat het gesprek van mening naar bewijs.

Zo heeft Memo de drie verbonden rond elke release

Omdat we partner zijn van alle drie, kunnen we verder gaan dan drie losse tools installeren. Wat er een trio van maakt in plaats van drie losse abonnementen, is de release zelf. Elke keer dat we deployen naar een Hypernode-omgeving, wordt dat moment vastgelegd in zowel Tideways als RUMvision.

In Tideways start een release-event een voor-en-navergelijking van performance, foutpercentage en errors. Standaard vergelijkt Tideways de 90 minuten na de release met de periode ervoor, en toont het de transacties die het meest zijn verbeterd en verslechterd. In RUMvision verschijnt hetzelfde moment als annotatie op de data van echte bezoekers, zodat je de Core Web Vitals per paginatype voor en na de release ziet.

Het resultaat is één tijdlijn met twee perspectieven. Binnen ongeveer een uur na een release weten we of die neutraal was, een verbetering of een achteruitgang, voor de bezoeker én voor de server. Dat geldt voor onze eigen code, maar ook voor Shopware-updates, plugin-updates en configuratiewijzigingen. Tideways ondersteunt zelfs markeringen voor niet-technische gebeurtenissen, zoals de start van een e-mailcampagne, zodat een verkeerspiek niet wordt aangezien voor een slechte deploy.

Wat dat in de praktijk verandert:

• Achteruitgang zie je binnen uren, niet weken. Je lost het op voordat het je een maand conversie en ranking kost.
• Terugdraaien besluit je op data. Maakt een release de checkout trager, dan laat de vergelijking dat zien, en is terugdraaien geen onderbuikgevoel.
• Verbeteringen worden aantoonbaar. Als we iets optimaliseren, zie je het effect bij echte bezoekers, niet alleen een betere labscore.
• Snelheid hoort bij de definitie van klaar. Een release is pas af als de shop er niet trager van is geworden.

Het is dezelfde aanpak van eerst meten die we toepasten voor Kempers.de, waar Memo en Hypernode de shop drie keer zo snel maakten in laadtijd, zonder volledige migratie. Je leest het in de case study van Memo en Hypernode.

Wat dit betekent voor jouw webshop in Q4

De weken voor Black Friday zijn precies het moment waarop deze opzet zich terugverdient. Meet je nulsituatie nu, nu het verkeer nog normaal is. Meet elke release in de aanloop naar de codefreeze, zodat je de piek ingaat met een versie waarvan je weet dat hij snel is. Tijdens de piek waarschuwen beide tools je als de prestaties zakken, en achteraf heb je echte data over wat de piek met je shop deed: de beste input voor je voorbereiding van volgend jaar.

Plan je volgend jaar grotere wijzigingen aan je platform, dan geeft deze manier van meten je ook een eerlijk vertrekpunt. Je ziet of je performanceproblemen echt om een ander platform vragen, of gewoon om betere Shopware-ontwikkeling en tuning van wat je al hebt.

Veelgestelde vragen

Meer weten over releasemonitoring voor je webshop

Een snellere webshop is geen eenmalig project. Het is de optelsom van honderden kleine releases die het elk iets beter of iets slechter maken. Met Hypernode, RUMvision en Tideways aan elkaar gekoppeld zie je bij elke release welke van de twee het is.

Benieuwd wat je laatste release met je pagespeed deed, of wil je deze opzet staan hebben voor 27 november? Plan een kennismaking of neem contact op, dan kijken we samen naar de prestaties van je shop.