Hoe Simyo de mobiele INP terugbracht van 413 ms naar 150 ms

Simyo, een mobiele virtuele netwerkoperator (MVNO) in Nederland die prepaid- en postpaid-mobieldiensten aanbiedt op het KPN-netwerk, werkt al meer dan tien jaar aan de gebruikerservaring (UX) van zijn website.

Simyo is maar liefst 32 keer uitgeroepen tot beste mobiele aanbieder door de Consumentenbond. Daar bovenop geven klanten het bedrijf een indrukwekkende 9,8 uit 10 voor algehele tevredenheid.

Simyo heeft altijd geloofd dat de website onderdeel is van die klantervaring. Daarom wordt er continu gewerkt aan een zo snel mogelijke site. Zo'n tien jaar geleden lag de focus op snelle paginalaadtijden, omdat Simyo ervan overtuigd is dat een snel ladende pagina een essentieel onderdeel is van een optimale digitale ervaring. In die beginjaren draaide alles om metrics als Start Render, First Contentful Paint en Speed Index — gebruikersgerichte metrics die Simyo direct kon koppelen aan de beleving van bezoekers. Het doel was snel renderen.

Met de introductie van de Core Web Vitals — Largest Contentful Paint (LCP), Cumulative Layout Shifts (CLS) en First Input Delay (FID) — verschoof het doel naar het halen van de Core Web Vitals-beoordeling. De website moest op alle UX-vlakken goed presteren: laadsnelheid, visuele stabiliteit én responsiviteit.

Uitdaging

Net als veel andere websites deed Simyo het erg goed op First Input Delay. Toch was er op basis van synthetische data het vermoeden dat de responsiviteit beter kon, met name voor mobiele bezoekers. Hoewel Simyo alleen synthetische data had over het initiële laden, bestond het vermoeden dat hoge scores op metrics als Total Blocking Time (TBT) en JS Long Tasks de interacties ná het laden beïnvloedden.

Op basis van de verzamelde synthetische data konden we waardevolle technische inzichten ophalen. De voornaamste oorzaak van de INP-problemen leek het gebruik van third-party tooling en tracking te zijn — waarschijnlijk gerelateerd aan de hoeveelheid JavaScript van externe leveranciers. Zeker waren we hier echter niet over, omdat er geen data beschikbaar was over interacties ná het laden. Onderzoek naar, optimalisatie van en het verwijderen van third-party resources loste het responsiviteitsprobleem dan ook niet volledig op, doordat dit uitsluitend gebaseerd was op synthetische data voor het initiële laden.

De introductie van de Interaction to Next Paint (INP) metric als mogelijke opvolger van First Input Delay bleek een waardevolle stap. Het Chrome User Experience Report (CrUX) bevestigde de eerste vermoedens: de responsiviteit van pagina-interacties voor mobiele gebruikers viel onder de verwachtingen. Met deze data wisten we ook welke pagina's de hoogste INP-scores hadden.

De grootste uitdaging was uitzoeken welke specifieke interacties vertraging opliepen en waardoor dat werd veroorzaakt.

Oplossing

De CrUX API bood inzicht in de INP-waarden van de origin, paginatypes en specifieke URL's. Alle pagina's werden ook gemonitord met RUM-tooling, maar INP-meting was daarin nog niet beschikbaar. Er was meer specifiek inzicht nodig — en dat vonden we in RUMvision, een RUM-tool die gebruikmaakt van de Google Web Vitals-bibliotheek. RUMvision kon niet alleen INP per pagina monitoren, maar de attributiedata via de Google Web Vitals-bibliotheek stelde Iron/Out ook in staat om snel te identificeren welke interacties vertraging opleverden voor mobiele gebruikers.

Hoewel inzicht in specifieke HTML-elementen en INP-breakdowns al heel waardevol is, maakte de introductie van de Long Animation Frames (LoAF) API in Chrome een groot verschil. De Long Animation Frames API is een relatief nieuw hulpmiddel waarmee ontwikkelaars performanceproblemen door lange animaties kunnen identificeren en oplossen. Volgens Google helpt LoAF bij het beter begrijpen van trage UI-updates. Het geeft inzicht in de duur van animaties en hun effect op de paginaresponsiviteit. Dit kan helpen bij het opsporen van trage animatieframes die de Interaction to Next Paint (INP) metric beïnvloeden. Ook jank in de UI die de vloeiendheid aantast, is hiermee op te sporen.

Eind 2023 was LoAF alleen beschikbaar in Chrome als Origin Trial. RUMvision maakte echter al gebruik van de LoAF API tijdens die Origin Trial, waardoor we er al vroeg mee aan de slag konden. RUMvision biedt een third-party dashboard dat de "pure JS execution time" van first- en third-party scripts toont. Met deze data konden we de bron van de performancebottlenecks nauwkeurig aanwijzen.

Voorbeeld van het third-party dashboard in RUMvision

Het bleek dat de responsiviteitsproblemen werden veroorzaakt door een globale first-party resource. Op basis van analyses van performancetraces via Chrome DevTools bleek dat deze resource data naar Google Tag Manager (GTM) stuurde op het moment dat een gebruiker interactie had met elementen op de pagina. Hoewel het bijhouden van bezoekersgedrag relevant is, is dit niet kritiek voor de bezoeker tijdens interacties. Bezoekers verwachten een directe visuele respons wanneer zij interactie hebben met elementen op de pagina.

Samen met de ontwikkelaars van Simyo hebben we oplossingen aangeboden en toegepast om UI-updates te prioriteren binnen de main thread van de browser, zodat data pas naar GTM wordt verstuurd nadat de UI is bijgewerkt. Zo sluit de gebruikerservaring aan bij de verwachtingen van bezoekers.

Resultaten

Na de implementatie van deze optimalisaties werd een significante verbetering in INP voor mobiel verkeer gerealiseerd: meer dan 75% van de gebruikers ervaart nu een INP van minder dan 200 ms. Dit resulteerde in een opvallende daling van de INP voor de origin — van 413 ms naar 150 ms — een verbetering van 64%.

Percentielen (Chrome UX Report)

Distributies (Chrome UX Report)

Ook desktopgebruikers profiteerden: de INP daalde van 102 ms naar 52 ms, een verbetering van 49%.

In onze communicatie met klanten rapporteren we een UX Score voor pagina's en origins. Deze score is gebaseerd op de factoren die er echt toe doen voor websitebezoekers. Hij is eenvoudig te begrijpen en geeft inzicht in of de site snel is en goed werkt voor iedereen. De UX Score stelt zowel IT-medewerkers als leidinggevenden in staat om weloverwogen beslissingen te nemen die de gebruikerservaring van hun websites verbeteren.

De INP-verbetering heeft ertoe geleid dat de origin een UX Score van 100 punten behaalt, wat de verbeterde gebruikerservaring voor mobiele gebruikers weerspiegelt. Een totaalscore van 100 geeft aan dat er excellente prestaties worden geleverd op het gebied van laadsnelheid, visuele stabiliteit en responsiviteit.

Hoewel de cijfers voor zichzelf spreken, laten de onderstaande video's zien hoe de interactie op een 'handset'-pagina (productdetailpagina) aanzienlijk is verbeterd. In beide video's is te zien hoe een gebruiker verschillende kleuren kiest voor een toestel. Na het tikken op een kleur wordt deze keuze bevestigd in de kleurenkiezer en wordt de afbeelding van het toestel in de bijbehorende kleur weergegeven. Voor de wijzigingen was er een merkbare vertraging bij het bijwerken van de UI; na de optimalisaties verloopt de ervaring veel vloeiender.

Voor de optimalisaties

Na de optimalisaties

Beide tests werden uitgevoerd op exact hetzelfde apparaat: een budget Android-smartphone (Samsung Galaxy A40) met beperkte processorkracht, waardoor de kans op INP-problemen relatief groot is. Tegelijkertijd weten we dat veel andere gebruikers de site bezoeken met soortgelijke of minder krachtige apparaten.

Conclusie

Simyo's toewijding aan het verbeteren van de gebruikerservaring op zijn website is overduidelijk: van de vroege focus op laadsnelheid tot de recente aanpak van responsiviteitsproblemen. Door te achterhalen welke pagina-interacties vertraging opliepen — met name voor mobiele gebruikers — kon de algehele gebruikerservaring significant worden verbeterd. De implementatie van de oplossingen leidde tot een opmerkelijke verbetering in Interaction to Next Paint (INP), met als resultaat een UX Score van 100 punten voor mobiele gebruikers. Met deze verbeteringen heeft Simyo opnieuw laten zien hoe serieus zij de digitale ervaring van hun klanten nemen — en waarom zij keer op keer worden uitgeroepen tot beste mobiele aanbieder van Nederland.