Website performance en laggy animaties: GPU vs CPU

  • ± 4 minuten

Een schokkerige animatie of laggy scroll gedrag, we kennen het allemaal. Zelfs wanneer het goed zit met de eigenlijke pagespeed, kan een slechte performance alsnog impact hebben op doorklikgedrag van bezoekers en dus conversie.

Dat wij bovenop PageSpeed zitten, zal duidelijk zijn. Maar daar houdt website optimalisatie nog niet op. Website optimalisatie gaat verder dan pagespeed alleen, wat ons (en conversie-goeroe's) betreft.

CSS animaties op smartphones

Animaties kunnen zwaar zijn voor oudere browsers of besturingsystemen, wanneer een animatie over de Central Processing Unit (CPU) verloopt, hetgeen dat verantwoordelijk is voor het uitvoeren van taken opgedragen door de computer. Maar zelfs op nieuwere computers kan het gebeuren dat het begint te blazen terwijl een animatie zich ontvouwt binnen je webbrowser, doordat de CPU te veel aan het werk wordt gezet.

Hetzelfde geldt voor mobiele telefoons. Ook wanneer je een nieuwere smartphone hebt, heeft dit de nodige impact op je smartphone; naast dat de animatie schokkerig over kan komen, zal de batterij van de telefoon van je website bezoekers sneller leeg lopen.

JavaScript versus CSS animaties

Animaties van bijvoorbeeld een knop bij mouseover, uitklapnavigatie, een langzaam inschuivende header of bewegende schaduwranden kunnen via JavaScript gerealiseerd worden. jQuery maakte het leven van frontend developers makkelijker, naast het feit dat CSS notatie gebruikt kon worden. Echter, jQuery staat er niet bepaald om bekend snel te zijn wanneer het op performance van animatie aankomt. Via de CSS transition-property zijn prima in enkel CSS animaties te realiseren. Maar ook (of juist) dan is waakzaamheid op zijn plaats.

De verwerking van animaties

Voor het plaats laten vinden van animaties, is rekenkracht nodig. Afhankelijk van de implementatie van een animatie op een website, dient al dan niet de gehele webpagina opnieuw getekend te worden door je browser (namelijk meerdere malen per seconde). Dit merk je wellicht nauwelijks (als je het niet weet), maar geeft stof tot nadenken. Het geheel opnieuw laten tekenen van de webpagina door de browser kun je voorkomen, door een animatie over de GPU van je computer plaats te laten vinden (met 60 frames per seconde, en dus een soepeler ogend effect).

GPU vs CPU

GPU staat voor Graphics Processing Unit en is in staat om taken van de meer bekende CPU over te nemen. De GPU wordt dan ook gebruikt voor video-taken. Taken die over de GPU en dus hardware gaan, kunnen parallel worden uitgevoerd, waarmee animaties vlekkelozer kunnen verlopen en je computer minder snel begint te blazen (of je smartphone minder snel leegloopt). De hardware waarop de berekeningen plaats vindt, heet de Hardware Accelerater, waardoor deze techniek Hardware Acceleration heet.

Hoe spreek je de GPU aan bij CSS animaties?

Een terechte vervolgvraag is hoe je kunt afdwingen dat animaties via de GPU verlopen. Een handvol CSS properties zullen dan ook voor rekening komen van de GPU wanneer deze geanimeerd worden middels de CSS property transition. Dat betekent dus dat merendeel van de CSS properties idealiter niet geanimeerd zouden moeten worden.

Hoe het wel moet

Elke frontend developer zal zich eens schuldig hebben gemaakt aan het aanpassen van de left, right, top, bottom, height en/of width property, bijvoorbeeld via jQuery of in combinatie met een CSS transition. Dit is het beste voorbeeld hoe het niet moet. Gebruik vooral de transform property in combinatie met de vele mogelijke values, om hetzelfde effect te bereiken; groter of kleiner worden van knopppen of bijvoorbeeld afbeeldingen bij mouseover. Dit kan in praktijk wat creativiteit vergen.

Geef daarbij bovendien aan welke exacte CSS properties er geanimeerd gaan worden middels transition. Hierbij kunnen meerdere transform-property values tegelijkertijd geanimeerd worden.
Een valkuil is "all" op te geven als transition-property, zodat alle properties, van afmetingen tot kleurgebruik, mee gaan in een eventuele wijziging van die te animeren knoppenbalk. Dit heeft ook als gevolg, dat de browser daar ruimte voor reserveert in het geheugen.

Een meer ingewikkelde animatie, dat niet enkel met transform plaats kan vinden? Gebruik dan een soort CSS hack, om de verwerking van de animatie te laten verplaatsen naar de GPU in plaats van de CPU. Een side effect is onder meer, dat het anti-aliasing op tekst ruïneert tijdens animaties.
Middels de CSS will-change property als alternatief op bovengenoemde hack, geef je aan de browser aan dat een wijziging van een specifieke CSS property aanstaande is. De will-change property kent echter een handleiding, indien je wilt voorkomen dat je continue benodigde geheugen via de browser afdwingt.

Hoe het niet moet, in praktijk

Hoe het niet moet, laat PhoneGap.com zien in hun desktop webversie. Bij het scrollen, verandert de hoogte van de header. Ook de grote van het logo en begeleidende naam wijzigt tegelijkertijd. Wanneer je in de code duikt, zie je dat er gespeeld wordt met onder meer de height, padding-top en background-color properties. Alsof dat niet kwalijk genoeg is, is aangegeven dat alle properties mogen animeren. Alle animaties zullen plaats vinden over de CPU. Dit valt te testen door een paar maal heen en weer te scrollen, dusdanig dat je herhaaldelijk de animatie triggert. Grote kans dat je computer of laptop begint te blazen.

phonegap css code voorbeeld

Het alternatief zou zijn geweest om de CSS before/after pseudo-element verantwoordelijk te laten zijn voor de header-achtergrond, en hiervan de opacity aan te passen om een doorzichtige achtergrond na te bootsen. Via translateY als transform-value, verplaats je de header element over een verticale as om te doen lijken alsof de header zich naar boven verplaatst om minder ruimte in beslag te nemen. Indien ze dit artikel gelezen hadden, dan hadden ze het, gecombineerd met bovenstaande creativiteit, op de juiste manier kunnen implementeren.

Animaties laten wij dan ook op meer gewenste wijze plaats vinden -namelijk over GPU- op websites van onze opdrachtgevers, met avgcloudregister.nl als ook deze website als goede voorbeelden. Het verschil in verloop van de animatie, is daarbij duidelijk te merken.