Flutter web website takes a long time to load initially

Viewed 8669

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.

3 Answers

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.

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/canvaskit-wasm@0.33.0/bin/canvaskit.js"></script>
<link rel="preload" href="https://unpkg.com/canvaskit-wasm@0.33.0/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!

Related