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.

Mike van Doesburg,

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.

WhatsApp
Bellen