De meeste scroll-animaties maken uw website trager, en de goedkope varianten kosten de meeste performance. Scrollytelling, parallax-plugins en fade-in-on-scroll-effecten die achteraf op een pagina worden geplakt, zijn de meest voorkomende reden waarom een goed uitziende site de Core Web Vitals niet haalt.
De fielddata van Google is direct over de gevolgen. Elke extra seconde laadtijd verlaagt de conversie met ongeveer 7%, en een mobiele laadtijd van 3 seconden kost ruwweg 53% van de bezoekers voordat ze uw inhoud ooit te zien krijgen.
U heeft de beweging bewust toegevoegd. De site voelde statisch aan, een template beloofde een premium gevoel, of de homepage van een concurrent scrollde als een video. Dit artikel laat zien welke scroll-effecten performance kosten, de exacte browserverwerking achter elk effect, en de engineeringbeslissingen die beweging soepel en snel houden.
- Goedkope scroll-animatie is een performancebelasting. Scroll-jacking en geanimeerde layout-properties dwingen de browser op elk frame de pagina opnieuw te berekenen.
- INP en CLS krijgen de klap. Zware scroll-handlers vertragen hoe snel de pagina reageert op taps, en te late beweging verschuift de layout onder de lezer.
- Sommige properties zijn gratis, de meeste niet. opacity, translate, scale en rotate animeren blijft op de GPU. width, height, top of margin animeren triggert volledig layout-werk.
- Goede beweging is een engineeringbeslissing. Compositor-only properties, IntersectionObserver, passive listeners en een reduced-motion-fallback houden effecten snel.
- Een echte engineer meet het. Field-INP, CLS en een test op een middenklasse Android-telefoon vertellen u of de animatie uw verkoop helpt of kost.
Wat goedkope scroll-animatie met uw pagina doet
Goedkope scroll-animatie komt doorgaans binnen als plugin of gekopieerd fragment. Het koppelt een handler aan het scroll-event en voert JavaScript uit op elk frame dat de gebruiker scrolt.
Die handler leest vaak layout-waarden en schrijft nieuwe stijlen in hetzelfde frame, wat de browser dwingt de paginageometrie steeds opnieuw te berekenen. Elke parallax- of animate-on-scroll-bibliotheek stuurt ook eigen code mee, vaak 30KB tot 150KB die de browser moet parsen voordat er iets beweegt.
Op een snelle laptop valt de kostprijs niet op. Op een middenklasse Android-telefoon, waar een groot deel van het verkeer vandaan komt, stottert de pagina en voelt scrollen zwaar aan.
Daarom bouwt webvise landingspagina's en lanceersites met een performancebudget dat vanaf de eerste commit is vastgelegd. Beweging wordt een bewuste laag, afgemeten aan de Core Web Vitals, in plaats van iets dat er achteraf bovenop wordt gestapeld.
De Core Web Vitals die het breekt
Google beoordeelt paginasnelheid op drie metrics, en scroll-animatie kan alle drie schaden.
| Metric | Goede score | Hoe scroll-animatie het schaadt |
|---|---|---|
| INP (Interaction to Next Paint) | onder 200ms | Scroll-handlers voeren lange taken uit op de main thread, waardoor taps en klikken moeten wachten |
| CLS (Cumulative Layout Shift) | onder 0,1 | Elementen die te laat animeren, of width en height animeren, duwen de inhoud opzij |
| LCP (Largest Contentful Paint) | onder 2,5s | Animatiebibliotheken laden vroeg en concurreren met uw hero-afbeelding en lettertypen om bandbreedte |
INP verving FID als Core Web Vital in maart 2024, en het is de metric die scroll-animatie het meest schaadt. INP meet hoe snel een pagina reageert na een tap of klik. Een scroll-handler die layout-werk uitvoert, blokkeert die reactie en duwt uw score boven de 200ms.
Wat gratis te animeren is, en wat niet
Browsers renderen in fasen: layout, daarna paint, daarna composite. De fase die een property raakt, bepaalt hoe duur het is om te animeren.
| Animeer dit | Browserfase | Kosten per frame |
|---|---|---|
| opacity | Alleen composite | Goedkoop, afgehandeld door de GPU |
| translate, scale, rotate | Alleen composite | Goedkoop, afgehandeld door de GPU |
| width, height, top, left, margin | Volledig layout | Duur, herberekent de pagina |
| box-shadow, filter, background | Paint | Matig, schildert grote gebieden opnieuw |
De regel achter elke soepele website is kort. Animeer opacity en de positie-properties translate, scale en rotate, want de GPU verwerkt ze zonder de layout aan te raken. Goedkope effecten grijpen naar width, height en top, wat bij elk frame een layout-herberekening afdwingt.
Waarom scrollytelling een performanceval is
Scrollytelling kaapt de scrollbalk om een animatietijdlijn aan te sturen. De pagina stopt met scrollen op zijn natuurlijke snelheid en begint een reeks af te spelen die de ontwikkelaar bepaalt.
Dat veroorzaakt drie problemen. Het aangepaste scrollen voelt verkeerd aan op een trackpad en nog slechter op een telefoon, waar mensen verwachten dat hun duim de pagina direct beweegt. Schermlezers en toetsenbordgebruikers verliezen de normale leesvolgorde. Elk scroll-frame voert JavaScript uit, wat precies het main-thread-werk is dat INP om zeep helpt.
Scrollytelling verdient zijn plaats in zeldzame gevallen: een dataverhaal in een nieuwsfeature, een productrondleiding waarbij de scène meer telt dan snelheid, een merkcampagne met een echt bewegingsbudget. Voor een landingspagina die bestaat om aanvragen te genereren, wegen de kosten bijna altijd zwaarder dan de opbrengst.
Wat goede beweging werkelijk kost
Soepele beweging komt voort uit een korte lijst beslissingen, en elke beslissing vraagt een engineer die de browser kent.
- Animeer alleen compositor-properties. Beperk u tot opacity, translate, scale en rotate, zodat de GPU het werk doet en de main thread vrij blijft.
- Trigger op zichtbaarheid, niet op scrollpositie. IntersectionObserver vuurt eenmalig wanneer een element de viewport betreedt, in plaats van code op elk scroll-frame uit te voeren.
- Houd listeners passive. Een passive scroll-listener vertelt de browser dat hij het scrollen niet blokkeert, wat uw INP-score beschermt.
- Budgetteer de timing. Micro-interacties lopen 120ms tot 250ms, entrances 500ms tot 800ms, grotere choreografie 800ms tot 1500ms. Langzamer dan dat voelt kapot.
- Lever een reduced-motion-fallback. Houd rekening met prefers-reduced-motion, zodat mensen die last hebben van beweging, en de tools die daarop auditen, een rustige versie krijgen.
- Laad animatiecode als eiland. Een client-only component dat opruimt bij navigatie houdt animatie-JavaScript buiten uw eerste paint.
Een page builder verbergt al deze keuzes. Een drag-and-drop-tool geeft u het effect en de performancekosten in één klik, zonder zeggenschap over de property die geanimeerd wordt of de JavaScript die geladen wordt. Een engineer kiest de property, de trigger en de timing bewust, en controleert daarna het resultaat.
De opbrengst is reëel geld. Snellere pagina's converteren beter, en de conversieberekening staat uitgewerkt in hoe websitesnelheid conversies beïnvloedt. Beweging die die berekening respecteert, voegt polish toe en kost niets van uw snelheid.
Een 6-punts audit voor uw eigen site
U kunt uw eigen site in ongeveer 10 minuten controleren. Voor een versie over de hele site werkt u de website-auditchecklist door. Voer deze stappen in volgorde uit.
- Open PageSpeed Insights en lees de field-INP en CLS, niet alleen de labscore. Fielddata weerspiegelt echte telefoons.
- Neem een Performance-trace op in Chrome DevTools terwijl u scrolt. Lange rode taken op de main thread betekenen dat uw scroll-handlers te veel doen.
- Houd het layout-shift-aantal in de gaten terwijl de pagina laadt. Alles wat te laat animeert, is een CLS-risico.
- Controleer de JavaScript-bundel op animatiebibliotheken. Een enkele scroll-bibliotheek boven de 40KB is de moeite van het bevragen waard.
- Zet prefers-reduced-motion aan in het DevTools-renderpaneel. Als de pagina kapotgaat of leeg lijkt, was de beweging nooit optioneel.
- Test op een echte middenklasse Android, niet op uw laptop. De telefoon is waar de jank zit.
Animatie moet een pagina doordacht laten aanvoelen, en mag niets aan snelheid kosten. Die balans komt van het kiezen van de juiste property, de juiste trigger en de juiste timing, daarna het resultaat meten op een echte telefoon. webvise bouwt lanceersites en landingspagina's waarbij beweging vanaf dag één is geëngineered tegen de Core Web Vitals. Als uw site er goed uitziet maar slecht scoort, vertel dan wat u bouwt en u ziet precies waar de beweging u schaadt.