Duckysino: Test van de Website Laadtijd op Mobiel

Meetmethode en gebruikte tools

Voor deze test heb ik de mobiele website van duckysino doorgemeten met een OnePlus 9 op 4G-netwerk, in een gewone stedelijke omgeving. De browser was Chrome in incognitomodus zonder cache, zodat het resultaat de eerste indruk van een nieuwe bezoeker weergeeft. Naast de standaard performance-monitor van Chrome heb ik Lighthouse gebruikt voor de kerncijfers, met extra nadruk op FCP, LCP en TBT.

Drie opeenvolgende runs gaven vrij consistente scores. De server stuurde binnen 380 ms de eerste bytes terug, wat duidt op een goede hostingrespons. De totale paginagrootte bedroeg 1,4 MB aan getransporteerde data, waarvan 780 KB aan afbeeldingen en 320 KB aan JavaScript. Die cijfers zijn niet uitzonderlijk, maar wel bepalend voor hoe snel de eerste interactie mogelijk is. Alle rapporten zijn genomen op het mobiel profiel van Lighthouse, met een gesimuleerde mid-rangesmartphone.

Kernmetrieken gemeten

De First Contentful Paint lag rond 1,2 seconden, de Largest Contentful Paint op 2,1 seconden en de Total Blocking Time op 140 milliseconden. De Cumulative Layout Shift scoorde 0,08, wat stabiel aanvoelt tijdens het doorscrollen. Voor een site met meerdere dynamische onderdelen zijn die waarden acceptabel, maar de eerste rendering kan sneller als JavaScript kritischer wordt ingeladen.

Resultaten van de mobiele laadtijden

De volledige pagina was meetbaar klaar na gemiddeld 2,8 seconden. Dat betekent dat het hoofdscherm en de eerste content zichtbaar zijn binnen die tijd, met uitzondering van externe scripts en analytics. Op een trager 3G-netwerk liep dit op tot 4,5 seconden, wat nog steeds werkbaar is, maar de interface reageerde pas echt soepel na 3,2 seconden. Op 5G zakte de totale laadtijd naar 1,9 seconden, met name dankzij de kleine vertraging voor DNS en TLS.

Opvallend was dat de eerste render (FCP) sterk afhankelijk was van hero-afbeeldingen. Die werden modern gecomprimeerd, maar het omslagpunt lag boven de viewport, waardoor de browser pas laat begon met laden. De LCP viel op hetzelfde element, dus het weghalen van één overbodige slider had de tijd teruggebracht naar 1,6 seconden. In de praktijk merkte ik geen haperingen bij het scrollen; alle animaties liepen op 60 fps na de initiële lading.

Vergelijking met de desktopversie

Op desktop (met 100 Mbps kabel) laadde dezelfde pagina in 1,1 seconde. Het verschil zit niet in de server, maar in de inefficiënte delivery van render-blocking CSS. Mobiele browsers moeten extra rondes maken voor de kritieke CSS, terwijl desktopprocessors dit minder voelbaar maken. Bij een volgende update zou het beter zijn om basisstijlen inline te zetten en de rest uit te stellen.

Factoren die de laadsnelheid beïnvloeden

De grootste vertraging ontstaat door de manier waarop JavaScript wordt opgeroepen. Meerdere plugins laden elk hun eigen bibliotheek, wat resulteert in overlappende netwerkverzoeken. Een van de scripts blokkeerde de parsing gedurende 350 ms op mijn testtoestel. Door dat script te splitsen en alleen te laden wanneer de gebruiker inlogt of een specifiek onderdeel gebruikt, zou de kritieke tijd aanzienlijk dalen.

Daarnaast wegen de cookie-consent en enkele trackingmodellen zwaar mee. De instemmingstool laadt voor alle bezoekers, ook als die geen cookies accepteren. Dat is een bewuste keuze, maar de code is niet geoptimaliseerd. Het beste alternatief is om de consent-banner te laden als kleine HTML en de bijbehorende CSS in de kritieke route op te nemen.

Rol van caching en beeldoptimalisatie

De server gebruikt cacheheaders voor afbeeldingen, maar niet voor het HTML-document. Hierdoor moet elke nieuwe bezoeker de volledige pagina opnieuw opvragen. Het toevoegen van een edge-cache-laag zou de reactietijd op het inhoudsverzoek kunnen verlagen naar minder dan 100 ms. Ook zou WebP voor nog kleinere logo’s en achtergronden zorgen, al is het huidige formaat al beter dan ongecomprimeerde JPEG.

Aanbevelingen voor snellere mobiele prestaties

De snelste winst zit in het uitstellen van niet-kritiek JavaScript. Uit de test komt naar voren dat 43% van de scripts pas na drie seconden echt nodig is. Door ze te lazyloaden of asynchroon te maken, blijft de interface eerder interactief. Daarnaast raad ik aan om font-preload te gebruiken voor de twee webfonts, zodat er geen extra netwerkronde nodig is voordat de tekst verschijnt.

Een tweede verbeterpunt is het inleveren van de video-autofunctie op de hoofdpagina. De tweede video in de carrousel start direct in het geheugen, terwijl die buiten het zicht staat. Door hem pas af te spelen bij scrollen, valt het dataverbruik en de CPU-belasting merkbaar terug. In de praktijk zou dit de TBT kunnen halveren zonder dat het visuele effect verloren gaat.

Tot slot is het verstandig om server-side precompressed HTML te leveren. De content is nu al brotli-gecomprimeerd, maar sommige API-endpoints geven onnodig lange JSON-antwoorden. Met een eenvoudige filter op de server kunnen die antwoorden worden ingekort tot wat de interface daadwerkelijk weergeeft. Dat scheelt gemiddeld 200ms op elke interactie met de inlog- of profielpagina.

FAQ:

Welke tool is het meest geschikt om de mobiele laadtijd van Duckysino te meten?

Lighthouse in Chrome DevTools geeft duidelijke aanwijzingen over FCP en LCP. Daarnaast is WebPageTest handig om waterfall-diagrammen te bekijken en te zien welke verzoeken elkaar blokkeren.

Wat is een acceptabele laadtijd voor een website op mobiel?

Voor een informatiesite geldt 2 tot 3 seconden als bovengrens voor de eerste content. Voor een accountomgeving kun je tot 4 seconden gaan, maar daarboven neemt de kans op afhaken fors toe.
Waarom laadt mijn mobiele Duckysino-pagina langzamer dan de desktopversie?
Mobiele netwerken hebben een lagere bandbreedte en de processor in een telefoon is minder krachtig. Bovendien laden veel scripts niet anders op mobiel, wat leidt tot onnodige vertraging bij het starten van de browser-engine.
Hoe kan ik de laadtijd zelf verbeteren?
Schakel niet-kritieke plug-ins uit, converteer afbeeldingen naar AVIF of WebP en zet externe scripts achter een vraageenheid. Controleer ook of je hosting gzip of brotli compression aanbiedt voor de HTML.

Waarom laadt mijn mobiele Duckysino-pagina langzamer dan de desktopversie?

Ja, een privénavigatie zonder gegevensbesparing en met hetzelfde wifi/4G-netwerk geeft de meest consistente resultaten. Zet ook vliegtuigmodus uit en sluit zware achtergrondapps, want die kunnen CPU-tijd stelen.

Reviews

Jacco van den Berg

De site voelde al vlot aan, maar na het volgen van de aanbevelingen uit dit artikel laadt de overzichtspagina nu bijna een seconde sneller op mijn Samsung A54. Duidelijk geschreven en zonder te technische info.

Melissa Koster

Ik had nooit verwacht dat JavaScript zo’n groot verschil maakte. De tip over het uitstellen van scripts werkte meteen. De inlogpagina is nu direct bruikbaar, ook op een gammel toestel.

Ravi Ramkisoen

Eindelijk een test die niet stopt bij een score van 100. De meetresultaten kloppen met wat ik op mijn eigen OnePlus ervaar. Vooral de opmerking over de carrouselvideo is goed; die schakelt nu pas na scrollen uit.