Faster initial load of the frontend?

Development
1

Hi everyone :blush:

This afternoon I worked on optimizing the frontend’s initial load, which I find can sometimes be a bit slow on mobile when the network is poor.

:wrench: Improvements made :

:white_check_mark: Dynamic loading of heavy libraries :

  • HLS.js (camera streaming)
  • Leaflet (world map)
  • ApexChart (charts)

:backhand_index_pointing_right: These libraries are now only loaded when needed, lightening the main bundle.

:white_check_mark: Optimization of code splitting :

Some routes were not properly split, which unnecessarily increased the load by putting those routes’ code into the main JS bundle.

:bar_chart: Result :

The main JS bundle goes from 2.94 MB to 694 KB, significantly reducing the initial load time.

Of course, nothing magic — the size removed from the main bundle is added to each route’s bundle, but the idea is that we only load what we need.

My goal is to have the dashboard load as fast as possible, because when I open Gladys on my phone, it’s often just to turn off a light, and if the load is slowed just because the frontend is loading unnecessary things, that’s a shame :smiley:

:mobile_phone: Test and give your feedback !

I generated a Gladys Plus build with these improvements :

:link: https://dynamically-import-librairie.gladys-plus.pages.dev

Looking forward to your impressions! :blush:

6 Likes
2

Hi @pierre-gilles, great news — if we speed up load times, it’ll make the UX even better.
But for complete beginners like me in development, what is the main JS bundle :confused:?

3

Gladys is a PWA (Progressive Web App), which is a web application that behaves more like an app than a website.

The « main JS bundle », roughly, is the JavaScript file that contains the application’s « main » code and that is executed when you launch it.

Then, each interface page has its own JS bundle (= its own code).

Until now, the split between the main bundle’s code and the per-page bundles’ code wasn’t perfect. This meant your browser spent time interpreting code « too early », at a moment when you didn’t need it.

The drawback of this optimization is that when you switch pages, it may be a bit less instant the first time you load that page. On the other hand, the initial load is faster!

In Gladys’ case, this splitting makes sense, because most app openings on mobile are used to display the dashboard, quickly control a device, and then close Gladys.

1 Like