LPT: How you get micro stutters or rather not

[205g0]

I use mostly Svelte's transition directives which are not the problem. However, here and there I used in the local components CSS animation and @Keyframes directives. I forgot that these all local and with components which are used more often these local CSS declarations seem to be declared again and again, even if they are not used (so the animation is not running because not always activated in the components class).

It's very subtle but once I almost removed all of them or moved them to global, e.g. in layout.svelte, I got rid of almost all micro stutters. There are still some but I think we have to live with them b/c of JS single thread thing. There are also more on mobile than on desktop and then on Android, even on top-tier phones. On iOS it's different since Safari runs there with lol 60hz the animation are usually smoother than on Android where even cheap phones can run with 120hz or even higher.

Not sure, if there something can be done, I also wonder if I declare the CSS animation in the local component as global, it is created only once despite the component might be created a dozen times. To be better safe than sorry I put them all in layout.svelte to be sure there are really created only once.

So this is more a docs or best practice thing.