Flutter Web App Performance on Mobile Chrome Browsers

[pgoyal-android]

With reference to question as mentioned by darshankawar need to open new issue without using --web-renderer html as build option.

Steps to reproduce

I created a fresh Flutter project, generated a web build using the flutter build web command, and hosted the app on GitHub Pages. When accessing the hosted app on physical mobile Chrome browsers(chrome://inspect/#devices), I analyzed the performance using Lighthouse in Chrome DevTools. The Lighthouse report indicated poor performance scores, especially in areas like Speed Index, First Contentful Paint (FCP), and Largest Contentful Paint (LCP).

This raises concerns about whether Flutter Web apps are optimized for mobile browsers. Below are the specific details and observations related to the issue.

1. Create a new Flutter project:

   flutter create web_test_project
   cd web_test_project

2. Build the web app using the HTML renderer:

   flutter build web

3. Host the generated build/web folder on GitHub Pages.(https://pgoyalpaymentus.github.io/)

4. Open the hosted app on a mobile Chrome browser.

5. Use Chrome DevTools' Lighthouse tool to generate a performance report.

Expected Results

• The Flutter Web app should provide a reasonable performance score on mobile Chrome browsers.
• Metrics such as Speed Index, FCP, and LCP should be optimized for mobile

Actual Results

• Poor Lighthouse performance scores, especially for key metrics like:
• Speed Index
• First Contentful Paint (FCP)
• Largest Contentful Paint (LCP)
• High initial load time observed on mobile Chrome browsers.

Questions

1. Is the Flutter Web HTML renderer optimized for mobile Chrome browsers?
2. Are there recommended steps or configurations to enhance the performance of Flutter Web apps on mobile browsers?
3. Could this be an issue with the Flutter Web framework or the HTML renderer?

Code sample

flutter create web_test_project

What target platforms are you seeing this bug on?

Android

OS/Browser name and version | Device information

Android mobile chrome browser

Does the problem occur on emulator/simulator as well as on physical devices?

Yes

Logs

Logs

[Paste your logs here]

Flutter Doctor output

Flutter Doctor output

Doctor output

[√] Flutter (Channel stable, 3.22.0, on Microsoft Windows [Version 10.0.22631.4317], locale en-US)
    • Flutter version 3.22.0 on channel stable at C:\Program Files\flutter_windows_3.7.7-stable\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 5dcb86f68f (7 months ago), 2024-05-09 07:39:20 -0500
    • Engine revision f6344b75dc
    • Dart version 3.4.0
    • DevTools version 2.34.3

[√] Windows Version (Installed version of Windows is version 10 or higher)

[√] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at C:\Users\pgoyal\AppData\Local\Android\sdk
    • Platform android-34, build-tools 34.0.0
    • Java binary at: C:\Program Files\Java\jdk-17\bin\java
    • Java version Java(TM) SE Runtime Environment (build 17.0.12+8-LTS-286)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[X] Visual Studio - develop Windows apps
    X Visual Studio not installed; this is necessary to develop Windows apps.
      Download at https://visualstudio.microsoft.com/downloads/.
      Please install the "Desktop development with C++" workload, including all of its default components

[√] Android Studio (version 2024.1)
    • Android Studio at C:\Program Files\Android\Android Studio1
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.11+0--11852314)

[√] Android Studio (version 2022.1)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart
    • android-studio-dir = C:\Program Files\Android\Android Studio
    • Java version OpenJDK Runtime Environment (build 11.0.15+0-b2043.56-8887301)

[√] VS Code (version 1.95.3)
    • VS Code at C:\Users\pgoyal\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.100.0

[√] Connected device (3 available)
    • Windows (desktop) • windows • windows-x64    • Microsoft Windows [Version 10.0.22631.4317]
    • Chrome (web)      • chrome  • web-javascript • Google Chrome 129.0.6668.103
    • Edge (web)        • edge    • web-javascript • Microsoft Edge 131.0.2903.86

[√] Network resources
    • All expected network resources are available.

! Doctor found issues in 1 category.

[pgoyal-android]

1.Test Setup and Observations:

I hosted a dummy Flutter web application on this URL without using the --web-renderer html flag.
Analyzed the performance using Lighthouse on a physical mobile device running Chrome, accessed via chrome://inspect/#devices.
The performance score on mobile Chrome browsers did not show significant improvement compared to the html renderer.

2. Desktop vs. Mobile Performance:

When analyzing the same hosted app using a laptop browser (Chrome), Lighthouse consistently reported performance scores above 90.
On mobile devices, the score remains average, indicating that the hardware resource limitations of mobile devices might be a contributing factor.

3. Core Concern:
   My question remains: Is Flutter Web optimized for mobile Chrome browsers, given the hardware constraints of mobile devices?

4. Additional Data:
   I have attached the Lighthouse scores for mobile and desktop Chrome browsers for reference.

If further analysis or clarification is required, please let me know. Thank you for your support!

Mobile chrome browser score

Laptop chrome browser score

Note : I am currently on Flutter (Channel stable, 3.22.0, on Microsoft Windows) version.

[matanlurey]

There have been two major stable releases since 3.22.0 which is almost 8 months old. I suspect you need to upgrade and try again with the latest version.

[cheymos]

@pgoyal-android As far as I know web renderer html is deprecated. In my experience it behaves much slower than canvaskit on mobile devices. And you can also try to build in wasm

[pgoyal-android]

There have been two major stable releases since 3.22.0 which is almost 8 months old. I suspect you need to upgrade and try again with the latest version.

@matanlurey We upgraded our version to latest Flutter (Channel stable, 3.27.1, on Microsoft Windows [Version 10.0.22631.4317], locale en-US)

and also change build command to simple "flutter build web --release" but results shown as in below screenshot remains poor in case of speed index

As far as I know web renderer html is deprecated. In my experience it behaves much slower than canvaskit on mobile devices. And you can also try to build in wasm

@cheymos also try with wasm attribute it shows below result almost similar

@darshankawar can you please look into it and guide?

[danagbemava-nc]

Hi @pgoyal-android, can you try #80111 (comment) to see if it helps?

[pgoyal-android]

@danagbemava-nc I checked and try solution with respect to #80111 (comment) but it did not show any significant improvement in speed index metric though with initial loader only user experience improved.

[danagbemava-nc]

Hi @pgoyal-android, can you share the index.html configuration you used and the scores you got after the update? Also, what device(s) are you seeing this on?