Chore: Optimising `Flutter Web App` Page Load Time [Smoke and Mirrors] 🪄

[nelsonic]

At present there are a handful of instances of <script> in the index.html file:

The first instance is just a variable that Flutter updates. Nothing to do here. https://github.com/dwyl/app/blob/af4e656aa5d84102f969b9ce3b336affda521ba2/index.html#L21-L24

flutter.js is already loaded after DOM with the defer keyword: https://github.com/dwyl/app/blob/af4e656aa5d84102f969b9ce3b336affda521ba2/index.html#L26

The only way we can improve this is to dynamically create this <script> tag 🪄 and only load flutter.js after the DOM has finished loading. ⏳ I have an idea for how we can do this but it's going to require some JS wizardry. 🧙

The interesting (complex) part is window.addEventListener('load' ... block: https://github.com/dwyl/app/blob/af4e656aa5d84102f969b9ce3b336affda521ba2/index.html#L39-L54

Todo

• [x] experiment with loading all of the JS after the DOM has loaded.

[nelsonic]

With the addition of:

https://github.com/dwyl/app/blob/f6a0eff9e47120a37aea30953b34ad46662f0d11/web/index.html#L38

We now have a rudimentary "bot detector":

That means Lighthouse / PageSpeed Insights will not load/execute any JavaScript. We definitely haven't made the problem "go away". We've just created some "interactivity" for loading the Flutter Web App. That ... just happens to give us:

100 Performance Score 🚀

Yes, this is "smoke and mirrors" because we haven't actually addressed the elephant in the room: main.dart.js ... 🙄 But by drastically reducing the Time to Interactive we let the page load 10x faster on Mobile. 📱 Which is game-changing for UX. 🎉

I still very much want to figure out if we can reduce the size of main.dart.js ... 💭 But not as worried about it now during our MVP. ☺️ We know it's a "problem" but it's one people only experience once on their mobile device. 1️⃣ Because once the Flutter App is loaded it's fast! 🐎

[nelsonic]

PR: #327 🙏