Inzichten Techniek Websites
Je site voelt traag, maar de test is groen
Laadsnelheid en soepelheid zijn twee verschillende dingen. Dit is wat wij op onze eigen site vonden toen we gingen meten in plaats van gokken.
In het kort
Een pagina kan in een seconde geladen zijn en toch stotteren zodra je scrollt. Dat zijn twee verschillende problemen met twee verschillende oorzaken.
Op onze eigen homepage vonden we 50 elementen met een backdrop-filter, waarvan er 44 op een dekkende achtergrond stonden en dus niets deden, en 18 animaties die ook buiten beeld doorliepen.
Na het opruimen zakte het aandeel trage frames tijdens scrollen van 97 naar 59 procent, in dezelfde testopstelling.
Snel laden en soepel voelen zijn twee dingen
Als iemand zegt dat een site traag is, bedoelt hij meestal een van deze twee. Het eerste is laden: je klikt en je wacht tot er iets staat. Dat is wat een snelheidstest meet en wat mensen bedoelen met Core Web Vitals.
Het tweede is soepelheid: de pagina staat er allang, maar zodra je scrollt schokt het, blijft een menu even hangen of loopt een animatie horten en stoten. Dat is een heel ander probleem. De browser moet dan bij elk beeldje te veel werk doen, en dat werk zit bijna altijd in opmaak die je niet ziet.
Een snelheidstest geeft hier vrolijk groen, want die meet hoe snel de pagina er stond. Daarom wordt dit zo vaak gemist: de cijfers kloppen, het gevoel niet.
Wat we op onze eigen site vonden
Deze site voelde hortend bij het scrollen. Geen piek, een doorlopende hapering. In plaats van te gokken hebben we geteld wat de browser bij elk beeldje moet doen. Drie dingen sprongen eruit.
- Vijftig elementen met een backdrop-filter. Dat is het effect waarbij wat achter een kaart staat vervaagt, zoals matglas. De browser leest daarvoor bij elk beeldje het beeld achter het element, blurt het en zet het opnieuw in elkaar.
- Achttien animaties die oneindig doorliepen, ook als ze buiten beeld stonden. Wat je niet ziet, hoeft niet te bewegen.
- Filters op dingen die bewegen. Een schaduw of een gloed op een element dat elke frame verschuift, wordt elke frame opnieuw getekend.
De grap: 44 van die 50 backdrop-filters deden helemaal niets. Ze kwamen uit een eerdere, donkere versie van de site waar de kaarten half doorzichtig waren. In de huidige lichte versie hebben die kaarten een dekkende achtergrond, dus er was niets meer om doorheen te kijken. Het effect was onzichtbaar en kostte wel elke frame rekenwerk.
Wat het opleverde
We hebben de filters uitgezet waar er niets doorheen te kijken valt, animaties laten pauzeren zodra ze uit beeld scrollen, en de dingen die wel bewegen op een eigen laag gezet zodat ze één keer getekend worden en daarna alleen verschoven.
Gemeten tijdens gestaag scrollen over de hele homepage, voor en na:
- Frames die langer dan 20 milliseconden duurden: van 97 procent naar 59 procent.
- Elementen met een backdrop-filter: van 50 naar 8.
- Draaiende animaties: van 18 naar 5.
Wat dit getal niet zegt
De absolute framerate uit deze meting is niets waard: de testbrowser draait zonder grafische versnelling, en juist die doet hier het werk. Het percentage trage frames is wel bruikbaar, want dat vergelijkt dezelfde opstelling met zichzelf. We schrijven het er expres bij, want een getal zonder die kanttekening is een verkooppraatje.
De vier regels die we eruit meenemen
Dit zijn geen algemene wijsheden van internet, het is wat deze meting opleverde en wat we sindsdien aanhouden.
- Animeer alleen verschuiving en doorzichtigheid. Alles wat een filter of de plaats van andere elementen verandert, kost bij elk beeldje een herberekening van de hele pagina.
- Een filter op iets dat beweegt hoort op een eigen laag, of hoort er niet te zijn.
- Matglas alleen waar er doorheen te kijken valt. Op een dekkende achtergrond is het onzichtbaar en niet gratis.
- Wat buiten beeld staat, hoeft niet te bewegen.
Hoe je dit zelf meet
Je hebt hier geen dure software voor nodig. Twee metingen in de ontwikkelaarsconsole van je browser brengen je een heel eind.
De eerste: tel hoe lang de browser over elk beeldje doet terwijl je in kleine stapjes naar beneden scrollt, en kijk naar het aandeel beeldjes boven de 20 milliseconden. Niet naar het gemiddelde, want een gemiddelde over de hele pagina verbergt precies de haperingen waar het om gaat.
De tweede: loop alle elementen op de pagina langs en tel de drie dure soorten. Dit stukje plak je in de console:
getComputedStyle(el).backdropFilter !== 'none'telt de matglaseffecten.getComputedStyle(el).filter !== 'none'telt de filters.animationIterationCount === 'infinite'telt de animaties die nooit stoppen.
Kom je boven de tien matglaseffecten of boven de vijf oneindige animaties uit, dan is dat de plek om te kijken. En controleer bij elk matglaseffect of de achtergrond eronder wel doorzichtig is: is de alpha 1, dan zie je het effect niet en betaal je het wel.
Vragen die we hierover krijgen
Onze PageSpeed-score is 95. Waarom voelt de site dan toch stroef?
Omdat die score vooral over het laden gaat. Haperingen tijdens scrollen komen uit het werk dat de browser daarna nog per beeldje doet, en dat zit in de opmaak: filters, schaduwen en animaties.
Is dit ook een probleem op een telefoon?
Daar juist. Een telefoon heeft minder rekenkracht en moet hetzelfde werk doen. Alles wat je hier wint, win je op een telefoon dubbel.
Kunnen jullie dit op onze site nakijken?
Ja. We meten eerst en zeggen dan wat we zien en wat het kost om het op te lossen, zodat je kunt kiezen. Stuur ons de link van de pagina die stroef voelt.
Meer uit de kennisbank
Een SnelStart-koppeling laten maken: nooit meer overtypen
Je webshop, portaal of eigen systeem koppelen aan SnelStart. Wat er heen en weer kan, hoe het werkt en wat het kost.
Een webapplicatie laten maken: wat het is, wat het kost en wanneer het past
Software in de browser, zonder installatie of app store. Het verschil met een website en een app, de bedragen en de doorlooptijd.
Flutter of React Native: welke kies je voor je app?
Wat ze gemeen hebben, waar ze verschillen, wat de cijfers zeggen en wanneer welke past. Met de gevallen waarin wij React Native zouden aanraden.
Zelf een Flutter-app maken, of laten maken?
Wat je zelf kunt met Flutter en FlutterFlow, waar het stokt, en de rekensom tegenover laten maken vanaf €5.000.
Klantportaal: maatwerk laten bouwen of een pakket nemen?
Wanneer de klantenomgeving van je pakket genoeg is, wanneer maatwerk het wint, en de rekensom over drie jaar.
Een B2B-bestelportaal laten maken
Zakelijke klanten bestellen tegen eigen prijzen, op rekening, uit hun lijst van vorige keer. Wat erin hoort en wat het kost, met de drankenhandel als voorbeeld.
Wat is een klantportaal, en wanneer heb je er een nodig
Een afgeschermde plek waar klanten zelf hun facturen, status en bestellingen zien. Wat erin hoort, wanneer het loont en wat het kost.
Voorraad in Excel klopt niet meer
Waarom een voorraadbestand op een bepaalde omvang altijd gaat schuiven, wat er in de plaats komt en wanneer je spreadsheet gewoon kan blijven staan.
Je planning staat in een gedeeld bestand
Het knelpunt is niet de planning, het is dat een wijziging niemand bereikt. Wat er dan wel moet gebeuren, met het systeem voor de provincie Drenthe als voorbeeld.
De werkbon gaat mee op papier
Wat een papieren bon je kost aan factureerbare uren en aan bewijs, en wat er in een digitale bon moet zitten voordat hij van papier wint.
Je webshop moet toegankelijk zijn
Sinds 28 juni 2025 stelt de wet eisen aan webshops. Voor wie het geldt, wat er meestal misgaat en wat je in een middag zelf kunt controleren.
E-facturatie wordt verplicht
In 2030 voor alle bedrijven, en nu al als je aan de overheid levert. Wat dat betekent voor de software waar je facturen uit komen.
Een AI-assistent op je eigen gegevens
Waar zo'n assistent goed in is, waar hij de plank misslaat, en wat de AI Act sinds augustus 2026 van je vraagt.
Lees verder
Dit sluit aan op wat je hierboven hebt gelezen.