Do you feel that your Flutter Web App is a bit slow to load? It may take forever to load your web app. It’s a common issue with web apps or websites made in Flutter. How about we try to fix this issue?
You might have faced an issue where Flutter Web takes a bit of time to load the first frame of your Flutter application. Well, this issue is very common. In this article, we will see why this issue is present, and then we will try to fix this issue. Let’s get started 🎉
Why do we have the initial load time?
So, if you go and check index.html which is present inside the lib folder, you will understand that the file has some very critical purpose. The , script includes the Flutter initialization code (flutter.js) and is set to defer, meaning it will be executed after parsing the HTML document.
This script listens for the load event and triggers the following actions:
- Downloads the main.dart.js file, containing the main Dart code for the app.
- Initializes the Flutter engine using the downloaded code and the provided service worker configuration.
- Runs the app once the engine is fully initialized.
This HTML file serves as the entry point for the Flutter web app. It defines the basic structure, loads necessary resources, and initializes the Flutter engine to render the app’s UI and functionality within the web browser. Well well well, this definitely will take some time to show the first screen of the app!
How can we reduce the load time?
As we saw in the above sections, the main load time is taken by these scripts. Is it possible to reduce the time taken by the individual scripts? Well, technically not because the scripts take their own time. However, we can reduce the total time taken by all scripts!!! The secret is that, we run the scripts parallel. I am not a native web developer, but Google did help me to make this possible 🤩
There’s an attribute in