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.

app/index.html

Lines 21 to 24 in af4e656

	<script>
	// Version injected by flutter build, do not touch.
	var serviceWorkerVersion = '3511979493';
	</script>

flutter.js is already loaded after DOM with the defer keyword:

app/index.html

Line 26 in af4e656

<script src="flutter.js" defer></script>

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:

app/index.html

Lines 39 to 54 in af4e656

	<script>
	window.addEventListener('load', function(ev) {
	// Download main.dart.js
	_flutter.loader.loadEntrypoint({
	serviceWorker: {
	serviceWorkerVersion: serviceWorkerVersion,
	},
	onEntrypointLoaded: async function(app) {
	let appRunner = await app.initializeEngine();
	await appRunner.runApp();
	// Remove loading screen when App available:
	document.querySelector('#loading').remove();
	}
	});
	});
	</script>

Todo

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

[nelsonic]

With the addition of:

app/web/index.html

Line 38 in f6a0eff

<button onclick="human();">I am not a robot</button>

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 🙏