[Performane] : Fix slow loading of Music Blocks on all the browsers

[apsinghdev]

fixes: #4305

This PR fixes the slow loading of Music Blocks.

(Draft)

This PR will contain comparatively bigger changes. So I'll keep on adding commits here to describe what they do.

Current Stats

Total loading time - ~ 16.0 seconds

cc @walterbender @pikurasa

Changes

82bf4ca formats the index.html file as it was not formatted properly.
4ffa134 add header links in optimized order to efficient loading
10723b3 fixes the render-blocking issue and bring the cumulative-layout-shift score from 0.20 to 0.07
5084cf7 implements http-server replacing the SimpleHTTPServer. Upgrades HTTP from 1.0 to 1.1 with Keep-Alive enabled
e6ad80f reduces Largest Contentful Paint element from 4,297 ms to 2,400 ms

[omsuneri]

@apsinghdev I would love to contribute to this PR can you suggest me some reference

[apsinghdev]

@apsinghdev I would love to contribute to this PR can you suggest me some reference

Thanks @omsuneri. I'll let you know if I need help. 🙂

[walterbender]

This is already a big improvement.

One minor issue: the splash screen is no longer centered horizontally.

[apsinghdev]

@walterbender Thanks for letting me know. Don't know why it didn't appear on my browser. Anyways, next task is to optimise this video as it's blocking the other ops. It's causing Largest-content-page to load in around 4530 ms.

[apsinghdev]

Update:

fixed the issue: #4331 (comment)

Experimented running MB using http-server

We are using SimpleHTTPServer to run Music Blocks to the client. But, SimpleHTTPServer doesn't support advanced features like Keep-Alive. I have experimented with running MB using http-server and it has Keep-Alive by default.

Also, I found http-server is comparatively fast increasing performance scores from 70 to 75 on the lighthouse.

Getting some feedback on these ideas. Will push it soon!

cc @walterbender @pikurasa

[walterbender]

maybe https-server?

[apsinghdev]

maybe https-server?

I've replaced SimpleHTTPServer with http-server. Also as we don't need python now to run MB, I have made some changes in docs as well. Please test this commit 5084cf7 to your side.

[apsinghdev]

@walterbender I've used a custom server using express that gives us the freedom to customize things as we need and make Music Blocks really fast with its default features.

I tested it and it is showing really good performance.

If you get a chance, please test 62397de

[walterbender]

Seems good to me.

[apsinghdev]

Seems good to me.

Thanks! I'll do more testing.

[apsinghdev]

@walterbender, I've fixed most of the critical issues blocking MB's loading process. I've noticed two main issues that need to be worked on:

1. Unoptimized DOM-related code: we've lots of unoptimized code that interacts with DOM leading to delays in loading.
2. Outdated/Unoptimized libraries: Some of the libraries we are using contain unused/deprecated code and it slows the performance.

To tackle both of these issues we'd need to plan about it as these are big breaking changes that will impact the whole codebase.

For now, I've made this PR ready and will work on this issue as we discuss further. Please have a look.

[pikurasa]

@apsinghdev The video perfectly fills the screen now. However, the loading text is now missing.

As for load time, I tested the master branch and 62397de with the default Sol, Mi, Sol code. Both took 13 seconds to load.

[apsinghdev]

@pikurasa Thanks for your feedback! I'll fix the missing loading text issue. Also, which tool have you used to calculate the load time?