Animaties op je website: wanneer beweging vertraagt

Elke beweging op het scherm moet door de browser berekend en getekend worden, tientallen keren per seconde. Op jouw recente laptop merk je daar niets van. Op de doorsnee smartphone van je klant, vaak enkele jaren oud en op een haperend netwerk, wel. De cijfers tonen hoe groot die kloof is: de gemiddelde laadtijd op mobiel bedraagt 8,6 seconden, tegenover 2,5 seconden op desktop.

Animaties wegen op twee momenten. Bij het laden, omdat animatiebibliotheken en effectplugins extra scripts binnentrekken die vaak zwaarder zijn dan alle tekst van je pagina samen. En bij het gebruiken, omdat elke lopende animatie rekentijd afsnoept van de reactie op een klik of een scroll. Dat tweede meet Google met INP, en daar wringt het: ongeveer 43% van de websites haalt de INP-grens van 200 milliseconden niet. Een site die druk beweegt maar traag reageert op de bezoeker zelf, heeft zijn prioriteiten omgekeerd.

Niet elke animatie belast de browser evenveel. De vuistregel is verrassend eenvoudig:

• Bijna gratis: animaties op transform (verschuiven, schalen, draaien) en opacity (in- en uitfaden). Die kan de browser afhandelen op de grafische chip, buiten de drukke hoofdlijn om.
• Duur: animaties die de lay-out veranderen, zoals hoogte, breedte, marges of posities. Daarvoor moet de browser telkens de hele pagina-indeling herberekenen, tientallen keren per seconde.
• Dubbel fout: effecten die tijdens het laden inhoud verschuiven. Die kosten niet alleen rekenkracht, ze duwen ook je CLS omhoog, de Core Web Vital voor visuele stabiliteit met een grens van 0,1.

Dezelfde visuele indruk kan dus vlot of stroef gebouwd zijn. Een paneel dat openklapt via een hoogte-animatie voelt op een oudere telefoon schokkerig; hetzelfde paneel dat inschuift via transform loopt gesmeerd. Vraag je webbouwer er gerust naar, het is een kwestie van vakmanschap, niet van budget.

Een paar effecten komen telkens terug in trage sites:

1. Carrousels en sliders bovenaan de homepage. Ze laden meerdere grote foto's plus een script, terwijl bijna niemand voorbij de eerste slide kijkt. Eén sterke foto met één sterke boodschap werkt beter én sneller.
2. Parallax- en scroll-effecten die bij elke scrollbeweging herberekend worden. Op desktop indrukwekkend, op mobiel vaak de reden waarom scrollen stroef aanvoelt.
3. Animatie-alles: thema's waarin elk blok komt aanvliegen bij het scrollen. De bezoeker die iets zoekt, staat te wachten op inhoud die er allang had kunnen staan.
4. Video-achtergronden die megabytes verslinden voor sfeer die een geoptimaliseerde foto ook had gegeven.
5. Zware effectplugins die voor één knopje een complete animatiebibliotheek inladen.

De toets is telkens dezelfde: helpt dit effect de bezoeker om sneller te begrijpen of te beslissen? Zo niet, dan is het decor, en decor mag nooit de voorstelling vertragen.

Je hoeft je site niet te strippen tot een saai document. Wel gelden er een paar regels voor beweging die werkt:

• Animeer met betekenis: een korte overgang die toont waar een menu vandaan komt of bevestigt dat een klik gelukt is, helpt. Beweging zonder boodschap leidt af.
• Hou het kort: overgangen van 150 tot 300 milliseconden voelen vlot; alles boven een halve seconde voelt als wachten.
• Gebruik transform en opacity, en laat lay-out-animaties links liggen.
• Respecteer de voorkeursinstelling voor minder beweging: besturingssystemen hebben een optie waarmee gebruikers aangeven dat ze minder animatie willen, en je site kan daar automatisch op inspelen. Dat is ook een kwestie van toegankelijkheid, want voor sommige mensen veroorzaakt veel beweging letterlijk duizeligheid.
• Test op een echte, oudere smartphone. Voelt scrollen stroef of reageert een knop pas na een merkbare pauze, dan is er werk.

De verleiding is begrijpelijk: een site vol beweging oogt in een demo indrukwekkend. Maar je klant komt niet voor de demo, die komt om iets te vinden, te vragen of te kopen. En daar zijn de cijfers ondubbelzinnig over: 53% van de mobiele bezoekers haakt af boven de 3 seconden laadtijd, en elke tiende seconde winst verhoogt de conversie in retail met 8,4%.

De beste animatie is die welke niemand bewust opmerkt, maar iedereen prettig vindt.

Kies dus voor een handvol subtiele, doelgerichte overgangen op een bliksemsnelle basis, in plaats van een vuurwerkshow op een trage. Je bezoekers zullen het verschil niet kunnen benoemen, maar wel voelen. En voelen is precies waar kopen begint.

Zelf ben je de slechtst geplaatste persoon om dat te beoordelen: je kent je site, je hebt recente apparatuur en je bekijkt hem met de blik van de maker, niet van de klant.

Laat daarom de cijfers spreken. De gratis marketing scan toont je in enkele minuten hoe je site scoort op snelheid en gebruikservaring, en waar de grootste remmen zitten. Dan weet je meteen of je animaties flair toevoegen of vooral ballast zijn.