RFE: significantly speed up the web-app loading on mobile devices

[jsfan3]

I've read this response of Shai about speeding app the loading of a Codename One app ported to Javascript:
https://stackoverflow.com/questions/53462678/codename-one-reduce-the-loading-time-of-a-web-app

However it's not enough, at least on mobile devices. The loading time on desktop browsers is fine (Firefox on Linux, with cookies and cache cleaned, takes three seconds to open an "Hello Word Bare Bones" ported to Javascript), but on mobile devices the situation is very different.

I would ask you to repeat the following test.

Please take an empty CN1 "Hello Word (Bare Bones)" Netbeans project and build it as Javascript: the build size is 2kb and it produces a web site of 5.6MB (decompressed). I uploaded that web-app to an host with gzip and SSL enabled. To simulate the first opening of that website, I cleared cookies and cache of Chrome browser on Android. I have a broad band connection.

Result: it's very very slow... it takes about 20 seconds to open (?!) and for the most of wait seconds the screen is blank and white (??!). Why? It's impossible to propose my users (and my employers) to use a so slow web-app, they can think that it's broken or that there are problems of connection. I know that the second loading is faster, but the first impression is important.

The technical details of my phone are here: https://www.gsmarena.com/huawei_honor_6x-8388.php

The exactly same test, in the same conditions (cookies and cache cleaned), repeated on my iPhone X (with Google Chrome) takes 8 seconds to open... it's better, but it's not good... and the most of people has a medium level Android rather than the latest iPhone.

Please, can you try to significantly speed up the web-app loading on mobile devices? I suppose that for a "bare bones hello world" the time of loading should be one or two seconds... moreover, in my opinion, the blank and white screen, after the logo, should be avoided at all.

Thank you for your support.

[shannah]

I did as you said and built a hello-world bare-bones app. I uploaded it to my remote server running on Amazon Lightsail.

I tried to load it on a Nexus 5 running Android 6. This is a much older device than your test device. I'm on residential Shaw cable internet in the Vancouver area.

I used Chrome development tools with the phone connected to the computer so that I could monitor the network traffic.

On my first time around I did notice that all of the resources are loaded twice. This is due to the service-loader. I'm not sure if this was actually affecting load times, but it did show up in the network monitor as two separate loads about 3.5 seconds apart.

According to this, the initial download of the Javascript sources (which are total under 500K), was 4--~500ms.
Then there is a 1.5 second to 2 second delay while (presumably) the Javascript is processed. This is your "White screen" period.

Then there is a 2nd wave of resource downloads that are initiated within the CN1 app (e.g. loading theme files and fonts). That takes 200-300ms.

Total time is approximately 3.6 seconds from hitting refresh, to the page being presented.

I have made a few changes to delay the loading of the service worker until after the page is finished loading - just in case that is affecting initial load time. I have also modified the splash/loader screen so that it will stay visible until the first form is actually ready. This will eliminate the "white screen" period. These improvements will be deployed in the next update on Friday.

The network tab in Chrome dev tools on initial load for the Nexus 5/Android 6 device looks like:

Note: That caching is completely disabled in this mode, so this should reflect a first load accurately.

[shannah]

Same tests on my iPhone 8, resulted in less than one second for initial page load.

[jsfan3]

Thank you very much, I’ll wait for the Friday update.
Onestly I don’t know why there is so much difference in the load time... I’ll write you again in this discussion after Friday.

[shannah]

I made a few other changes aimed at reducing perceived loading time, including the addition of a progress bar. That will be part of the release on friday.

[jsfan3]

Thank you!

[jsfan3]

After this discussion, I learned to inspect my Android device from Google Chrome running in the desktop. I also learned to disable cache in the DevTools.

I saw the new progress bar. I also saw that the white screen disappeared.

The loading time with cache disabled, with the same device that took about 20 seconds (with the same remote VPS), fell to 6 seconds. With the cache enabled this time drops to 3. It's a marked improvement, thanks. With Google Chrome desktop, the loading time (with cache disabled) of the same project from the same server is about 4 seconds, with cache enabled it is about 2 seconds. Probably my VPS has a poor connectivity compared to Amazon (that you used to performe the tests), but overall the improvement is noticeable.

[jsfan3]

I didn't see the use of the Android native theme opening the web-app with Android. It looks so (installing the web-app to the home):

[shannah]

Looks like I forgot to push the last change (the Android theme support) to git so it didn't make it into the update. I've pushed it now so it will be in the next update.