Voorkom een negatieve impact van animaties op je website

In de game- en video-industrie is ‘frames per second’ (beelden per seconde) een belangrijke manier om te meten hoe vloeiend bewegende beelden op het scherm getoond worden. Bij websites wordt hier doorgaans weinig aandacht aan besteed, terwijl een lage frame rate ervoor kan zorgen dat animaties er lelijk uitzien of dat scrollen niet goed werkt. Daarom is het handig eens onder de motorkap van de browser te kijken. In dit artikel geef ik je meer inzicht in de werking van de browser bij het uitvoeren van animaties en laat ik zien wat de impact hiervan is op de klantbeleving.

Nu we ook op websites steeds vaker geavanceerde animaties en gave scrolling-features zien, ontkom je er niet aan om hier serieus naar te kijken. Animaties die er lelijk uitzien of het scrollen dat niet goed werkt, zijn zaken die ten koste gaan van de gebruikerservaring.

Het opbouwen van een scherm gebeurt in stappen, van het ophalen van de applicatiecode bij de webserver, tot het daadwerkelijk inkleuren van de pixels. Binnen elke stap is tijd nodig om de taak uit te voeren. Omdat bij een slechte ‘performancebeleving’ al bij enkele milliseconden verschil kan ontstaan, moeten deze stappen zo snel mogelijk worden doorlopen. Bij het bouwen van animaties of een interactieve website is het dus belangrijk hier bewust mee om te gaan en performancemetingen te verrichten. Zonder deze inzichten en passende maatregelen wordt de kans op ontevreden bezoekers, negatieve feedback, of erger nog: klanten die weglopen, groter.

Frames per Second

Het aantal Frames per Second (FPS) geeft aan hoe vloeiend een video of animatie getoond wordt op het scherm. De CPU (processor) en de GPU (grafische processor) werken samen om dit werk te verrichten. Hoe sneller zij dit kunnen doen, hoe hoger je FPS. Dit kan echter niet ongelimiteerd hoog zijn, omdat we ook te maken hebben met de refresh rate van het beeldscherm zelf. Dit wordt uitgedrukt in Hz en geeft aan hoe vaak het scherm de pixels op het scherm kan verversen. Voor mobile devices is dit vaak (gelimiteerd tot) 60 Hz. Daarom is het belangrijk dat je je richt op een frame rate van 60 FPS bij een animatie of interactie met het scherm. Dit betekent dat de CPU en GPU samen voor elk frame 16,66 ms de tijd hebben om aan deze frame rate te voldoen. Wanneer hier niet aan voldaan wordt, worden de animaties langzamer getoond en loopt interactie zoals scrollen niet meer vloeiend.

5 zaken die invloed hebben op de frame rate

Er zijn 5 belangrijke stappen binnen de browser, die onderdeel zijn van het tekenen van de pixels op het scherm en die direct invloed hebben op je frame rate (lees hier hoe je de impact van deze 5 elementen kunt meten):

1. Javascript/CSS
   Javascript en CSS worden vaak gebruikt als achterliggende programmacode wat resulteert in visuele wijzigingen op het scherm.
2. Calculate styles
   Dit proces bepaalt voor elk element in het scherm welke CSS-regel er aan verbonden is om zo te bepalen hoe dit element eruit moet gaan zien op het scherm.
3. Layout
   Als bekend is hoe een element eruit moet zien, kan worden bepaald hoeveel plek het inneemt en waar het element zich moet bevinden in het scherm. Omdat elementen elkaar vaak onderling beïnvloeden, kan dit een redelijk complex en zwaar proces zijn voor de browser.
4. Paint
   Dit is het daadwerkelijk vullen van de pixels, niet direct in het scherm, maar het klaarzetten van de pixels om getekend te worden in het scherm. Denk aan de tekst, kleuren, plaatjes enzovoorts. Het scherm is vaak opgebouwd uit meerdere lagen ofwel layers. Deze layers worden ook opgedeeld in verschillende draw calls.
5. CompositingOmdat een scherm uit meerdere lagen kan bestaan, moeten deze in de juiste volgorde getoond worden om het scherm op de juiste wijze te laten renderen. Compositing is hier verantwoordelijk voor.

Variaties

Het is niet altijd nodig om alle stappen te doorlopen wanneer een visuele wijziging wordt doorgevoerd op het scherm. Daarom zijn er een aantal variaties waarin bovenstaande stappen worden uitgevoerd.

JS/CSS->Style->Layout->Paint->Composite

Wanneer er een layout-proportie gewijzigd wordt zodat bijvoorbeeld de grootte, hoogte of positie van een element gewijzigd wordt, moet de browser alle elementen opnieuw controleren en mogelijk opnieuw tekenen. Dit is een zwaar proces voor de browser en heeft impact op de frame rate.

JS/CSS-> Style->Paint->-Composite

Als er geen layout wordt gewijzigd, maar bijvoorbeeld alleen de kleur van een element, overgang van een plaatje of schaduw, dan hoeft het relatief zware proces van het opnieuw bepalen van de layout niet doorlopen worden.

JS/CSS > Style > Composite

Als er geen layout of paint nodig is, maar enkel een wijziging in de layer-structuur, dan hoef je slechts een aantal stappen te doorlopen. Dit is dan ook het minst zware proces en het meest gewenst bij scrollen of animeren op het scherm.

Dit is een goed overzicht van welke CSS-wijziging impact heeft op welke onderdelen in het pixel to screen-pad.

Jouw ervaringen

Ik ben benieuwd naar jouw ervaringen op dit gebied. Heb je misschien al zelf eens de impact van de 5 genoemde elementen gemeten en tot welke conclusies ben je daarbij gekomen?

Afbeelding intro met dank aan 123RF.