Break up execution into smaller parts to avoid long running tasks

[appelgran]

Trying to improve performance for a website I soon found me in the position that our Swiper slideshows was our main culprit. Especially for Lighthouses "Time to Interactive" measurement where the swiper js loaded late and caused long running tasks when initializing our slideshows.

The first thing I did was to split the creation and the initializing:

var swiper = new Swiper(..., { ..., init: false });
setTimeout(function() {
  swiper.init();
}, 0);

Before:

After:
swiperLazyInit took 15-20 ms doing only the creation and then the anonymous function doing the swiper.init() call took 30-40 ms.

So after splitting the two the execution sometimes went under Lighthouses 50 ms mark. But sometimes not. Then I played around splitting up the execution of calls inside the Swiper.init method. A couple of those calls took a decent amount of time so breaking up their execution could further reduce the probability for long running tasks and blocking.

What do you say about optimizing execution? Is there already some other optimizations available or planned?

More:

1. the swiperLazyInit source (gist)
2. May be a better idea to use requestAnimationFrame, I wrote about it at SO and linked to Google Dev article