Flutter Web Github Pages is too lazy and i don't know why - html

Question

i'm trying to deploy a flutter web app to GitHub Pages.
First of all, i was getting the same problem as this, and their solution worked for me too.
This means that i add the <base href='/web'> to my index.html
But now, when i'm lauching my url from GitHub Pages, the site is loading too lazily, what i think isn't the correct behavior. Like you can see in the image below:
Is there a way to lauch the site faster? What should i do?

Answer 1

In general, website loading times are related to the bundle size. Flutter web apps tends to have large bundles, so the load times will inevitably be longer than websites built with other technologies.

Answer 2

So, i was searching and a friend observed that the serviceWorker, in the index.html file, was the problem. Now my app runs as fast as it shoud be.
Apparently, that function was trying to execute something and failed (but this failure cost 4 seconds, stipulated in code). So i commented this all and added a loadMainDartJs() call in the start, as you can see below:
loadMainDartJs();
<!-- if ('serviceWorker' in navigator) {-->
<!-- // Service workers are supported. Use them.-->
<!-- window.addEventListener('load', function () {-->
<!-- // Wait for registration to finish before dropping the <script> tag.-->
<!-- // Otherwise, the browser will load the script multiple times,-->
<!-- // potentially different versions.-->
<!-- var serviceWorkerUrl = 'flutter_service_worker.js?v=' + serviceWorkerVersion;-->
<!-- navigator.serviceWorker.register(serviceWorkerUrl)-->
<!-- .then((reg) => {-->
<!-- function waitForActivation(serviceWorker) {-->
<!-- serviceWorker.addEventListener('statechange', () => {-->
<!-- if (serviceWorker.state == 'activated') {-->
<!-- console.log('Installed new service worker.');-->
<!-- loadMainDartJs();-->
<!-- }-->
<!-- });-->
<!-- }-->
<!-- if (!reg.active && (reg.installing || reg.waiting)) {-->
<!-- // No active web worker and we have installed or are installing-->
<!-- // one for the first time. Simply wait for it to activate.-->
<!-- waitForActivation(reg.installing ?? reg.waiting);-->
<!-- } else if (!reg.active.scriptURL.endsWith(serviceWorkerVersion)) {-->
<!-- // When the app updates the serviceWorkerVersion changes, so we-->
<!-- // need to ask the service worker to update.-->
<!-- console.log('New service worker available.');-->
<!-- reg.update();-->
<!-- waitForActivation(reg.installing);-->
<!-- } else {-->
<!-- // Existing service worker is still good.-->
<!-- console.log('Loading app from service worker.');-->
<!-- loadMainDartJs();-->
<!-- }-->
<!-- });-->
<!-- // If service worker doesn't succeed in a reasonable amount of time,-->
<!-- // fallback to plaint <script> tag.-->
<!-- setTimeout(() => {-->
<!-- if (!scriptLoaded) {-->
<!-- console.warn(-->
<!-- 'Failed to load app from service worker. Falling back to plain <script> tag.',-->
<!-- );-->
<!-- loadMainDartJs();-->
<!-- }-->
<!-- }, 4000);-->
<!-- });-->
<!-- } else {-->
<!-- // Service workers not supported. Just drop the <script> tag.-->
<!-- loadMainDartJs();-->
<!-- }-->
At the moment i don't need serviceWork, and this suits weel for me.