dwyl / dwyl/app

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

Open
#325 2 comments 0 reactions 0 assignees View on GitHub
chore flutter T4h tech-debt technical
Dominant language
Dart
Stars
152
Forks
22
PR merge metrics
No merged PRs in 30d

Description

At present there are a handful of instances of `` in the [`index.html`](https://github.com/dwyl/app/blob/af4e656aa5d84102f969b9ce3b336affda521ba2/index.html) file:

<img width="1535" alt="image" src="https://user-images.githubusercontent.com/194400/222896446-68f12fb7-578f-46aa-8b28-d3d8ce5be43c.png">

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.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.