CODEWITHSUNDEEP
flutter
bobdub
bobdub

Reputation: 441

Flutter web website takes a long time to load initially

I am currently creating a flutter web application for a client, however, when the website is navigated to for the first time in the browser, the page loads to a blank screen and a few seconds later shows the actual homepage widgets. After the page has been cached in it seems to be quicker on subsequent reloads.

Is there something that I can change about my flutter web app in order to decrease this initial load time? I know that flutter web is still in beta, so it may just be that -- will this be fixed when flutter web becomes deployment ready?

Any help is appreciated.

Upvotes: 40

Views: 26303

Answers (5)

kibugenza young king king
kibugenza young king king

Reputation: 1

One of the easiest things to do is

  1. run

    flutter build web --web-renderer html --release

  2. deploy by this command

    firebase deploy --only hosting

Explain: step1:this step deploys html only, which is a little bit smaller(that will speed up the download size) step2: this deploys the site as production, it will be dramatically fast after this command.

Upvotes: -1

Govarthanan Venunathan
Govarthanan Venunathan

Reputation: 1359

Please refer to this flutter example to resolve the bootstrap white screen initial load.

Flutter Gallery web example

The instance of the white screen will display the app icon loading animation once the flutter app bootstrapped the loader icon will hide and the flutter app show.

<div id="loading">
<style>
  body {
    inset: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    position: fixed;
  }

  #loading {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    width: 100%;
  }

  #loading img {
    animation: 1s ease-in-out 0s infinite alternate breathe;
    opacity: .66;
    transition: opacity .4s;
  }

  #loading.main_done img {
    opacity: 1;
  }

  #loading.init_done img {
    animation: .33s ease-in-out 0s 1 forwards zooooom;
    opacity: .05;
  }

  @keyframes breathe {
    from {
      transform: scale(1)
    }

    to {
      transform: scale(0.95)
    }
  }

  @keyframes zooooom {
    from {
      transform: scale(1)
    }

    to {
      transform: scale(10)
    }
  }
</style>
<img src="icons/Icon-192.png" alt="Loading indicator..." /></div>
<script>
window.addEventListener('load', function () {
  var loading = document.querySelector('#loading');
  _flutter.loader.loadEntrypoint({
    serviceWorker: {
      serviceWorkerVersion: serviceWorkerVersion,
    }
  }).then(function (engineInitializer) {
    loading.classList.add('main_done');
    return engineInitializer.initializeEngine();
  }).then(function (appRunner) {
    loading.classList.add('init_done');
    return appRunner.runApp();
  }).then(function (app) {
    // Wait a few milliseconds so users can see the "zoooom" animation
    // before getting rid of the "loading" div.
    window.setTimeout(function () {
      loading.remove();
    }, 200);
  });
});

Upvotes: 3

Marcus Rabello
Marcus Rabello

Reputation: 106

Consider using ditman's solution in

https://github.com/flutter/flutter/issues/76009#issuecomment-1095663169

He puts an example of his solution at

https://dit-tests.web.app

Upvotes: 4

Nico
Nico

Reputation: 61

I think a found a solution for that, let me know if it works!

I posted it here... Basically you need to add two lines to the <head>...</head> tag on your index file to start loading the CanvasKit binary from the beginning.

<script src="https://unpkg.com/[email protected]/bin/canvaskit.js"></script>
<link rel="preload" href="https://unpkg.com/[email protected]/bin/canvaskit.wasm" as="fetch" crossOrigin="anonymous">

Be careful with which URL you use above, there is a better explanation on the link above! Hope it helps at least a bit with your initial loading time!

Upvotes: 4

Aashar Wahla
Aashar Wahla

Reputation: 3295

Before running certain views, especially the first time the web app is built, it takes a moment to load everything up. The best thing to do in such case is to add a loading screen/widget.

You should have a look at this article by Juan Curti.

Upvotes: 12

Related Questions