The One Trick Every Flutter Web Dev Needs to Know 💙

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> tags do the main work.

<script src=”flutter.js” defer></script>, script includes the Flutter initialization code (flutter.js) and is set to defer, meaning it will be executed after parsing the HTML document.

<script>
    window.addEventListener('load', function(ev) {
      // Download main.dart.js
      _flutter.loader.loadEntrypoint({
        serviceWorker: {
          serviceWorkerVersion: serviceWorkerVersion,
        },
        onEntrypointLoaded: function(engineInitializer) {
          engineInitializer.initializeEngine().then(function(appRunner) {
            appRunner.runApp();
          });
        }
      });
    });
  </script>

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 <script> tag called defer. When checking its meaning, it says if the defer attribute is set, it specifies that the script is downloaded in parallel to parsing the page, and executed after the page has finished parsing. And that’s what we want! We want our script to run/download in parallel to parsing the page!

Now, simply go to your index.html and set the defer attribute to the script tag as follows:

<script src="flutter.js" defer></script>

<script defer>
  window.addEventListener('load', function () {
...

In both the script tags, we have mentioned defer. Now, both scripts will do their work while the page is being parsed and then execute itself once the parsing is completed. This will make your Flutter Web App load a bit faster!

Bonus Tip

We all have been using Firebase widely. You might not be actively using Firebase, but might be using a few of their products. Any of their products like Crashlytics, Analytics, Firestore, etc. need to initialize the FirebaseApp. We always initialize the FirebaseApp in the main function before the runApp function and await it. Correct?

Well, do you really need to use Firebase on your first screen itself? Probably not. Maybe your first screen is Splash screen and that’s where you are using Firebase. There are very rare cases where you need Firebase before rendering your app’s first screen.

Hence, you can skip adding the await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform); and initialize it before using it.

NOTE: If you initialize it every time before using it, it will throw an error. So have a variable which will help you to understand whether the FirebaseApp is initialized or not.

With the above tricks, your flutter web app will definitely become a bit faster 🚀

Want to check it in action? Head out to the following websites made in Flutter Web and check it’s loading time:

• abhishekdoshi.dev
• theswagbox.in

Both websites have very minimal loading time, so feel free to check them out!

Disclaimer: I am not a native web developer, there might be some cons to the above tips, but if it works, it works 😂

NOTE: To stay updated on this topic, I have created an issue/proposal in the Flutter repository. Feel free to check it out here. Also, you can upvote it so that the Flutter team can tackle it sooner.

Hope you enjoyed this article!

Doubts? Feel free to drop a message @AbhishekDoshi26
Checkout abhishekdoshi.dev for more info 💙

Don’t stop, until you are breathing!💙
- Abhishek Doshi