Repository: flutter
Issue: Flutter Web App Performance on Mobile Chrome Browsers
Labels: waiting for customer response,in triage

With reference to [question](https://github.com/flutter/flutter/issues/159969) as mentioned by [darshankawar](https://github.com/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.


![image (26)](https://github.com/user-attachments/assets/b2d4de16-486a-49b9-a85f-1f01968fc3ca)

**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

<details open><summary>Logs</summary>

```console
[Paste your logs here]
```

</details>


### Flutter Doctor output

### Flutter Doctor output

<details open><summary>Doctor output</summary>

```console
[√] 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.

```

</details>