[PR] Flutter web speed up patch

[LuchoTurtle]

pertains to #326

This PR will attempt to speed up loading the Flutter web.

[LuchoTurtle]

When running sudo sh ./patch_web.sh on the built bundle and then running python3 -m http.server 8000 to serve it locally...

No errors of files not found or anything.

Was having issues with registering the service worker before but it was due to the patch files not being correctly formatted.

[LuchoTurtle]

Will need to temporarily deploy this to fly.io to check if there are any differences to the metrics but I doubt it will make any difference, as the generated .js is essentially the same.

[nelsonic]

Fly.io deployment pipeline should still be setup: https://dwylapp.fly.dev/

[LuchoTurtle]

It is but it's only deployed when the PR is merged into the main branch -> https://github.com/dwyl/app/blob/e3a455413847cd3f85b2024a433751e38a70c56b/.github/workflows/ci.yml#L48

Will temporarily disable the line just to check.

[LuchoTurtle]

Running https://dwylapp.fly.dev/ in https://pagespeed.web.dev/ yields the following results.

[nelsonic]

@LuchoTurtle note: this was already all 100 because of the landing page with the button that loads the flutter.js ... This is the "before" picture: https://github.com/dwyl/app/issues/326#issuecomment-1455596679

The real test is if we remove the landing/loading page completely what score do we get. 💭

[LuchoTurtle]

Removing the loading page

https://pagespeed.web.dev/analysis/https-dwylapp-fly-dev/igq79mp1ci?form_factor=mobile

:/

[LuchoTurtle]

Seems like the outage broke my PR. I'm pushing to the branch but commits like 8573667697c88f728430fabeaed2136f786b4195 are not being associated

[LuchoTurtle]

They're working now.

[LuchoTurtle]

Landing page without button

https://pagespeed.web.dev/analysis/https-dwylapp-fly-dev/tehee9qm3q?form_factor=mobile

The results are a bit better...

[LuchoTurtle]

Invisible button with display:none or visibility:hidden

https://pagespeed.web.dev/analysis/https-dwylapp-fly-dev/y4zst563yo?form_factor=mobile

Doesn't seem to do this any justice either...

[LuchoTurtle]

Going to compare the network effects with landing page with concurrent download that was implemented.

[LuchoTurtle]

Without the speed patch...

With the speed patch...

Checked these numbers several times in incognito windows and there's a consistent +- 200ms difference. Even though it doesn't allow us to remove the loading screen and maintain our 100% metrics, it's still a noticeable difference to load up.

[LuchoTurtle]

@nelsonic assigning over to you. Up to you if you want to keep this or not, even if it doesn't fix the original issue https://github.com/dwyl/app/issues/326. I feel like https://github.com/dwyl/app/issues/326 (when it comes to metrics) has been resolved by adding the landing page. The metrics all hit 100%.

If this gets merged, I'll add the section to https://github.com/dwyl/learn-flutter

[milan-ciganovic]

Does this work with flutter stable branch?

[LuchoTurtle]

@milan-ciganovic It should, yes. Here's a guide if you want a more detailed walkthrough -> https://github.com/dwyl/learn-flutter/tree/main/guides/flutter-web-speed-boost.

This will save you a few milliseconds when loading the Flutter web app but you should test how this "patch" fares in your application and how much time it "saves" 😃