☂️ make initial load of canvaskit faster

[franarolas]

Hello everyone!

This post is a request from the Flutter community to request an improvement on the start load time of Flutter Web.
As most of you know, the initial load time when using the canvas build is way too long for a production product, so most of the people are not choosing Flutter Web for their web apps.

Thank you all for voting this up, I hope that this gets solved as soon as possible.

Since the old post didn't make much sense in the context of what we are trying to achieve, I decided to rewrite the post.

Old post

I'm experiencing a huge difference in the initial load time of the web app in the versions 1.26 and 1.27, the load time now is about 2-3 seconds slower.
The lighthouse tool can't even test the app performance as it is too slow.
Once the app is loaded, it is as fast as always.

It is affecting also the hot-reload time, it now takes about 10 seconds more to reload my project(A big project with more than 240 files and around 30000 written code lines).

I would be working with the 1.25 version(As everything was working fine, including SVGs), but I really need the Scrollbar implemented in 1.26.

Steps to Reproduce

Just create a new Flutter project and test the different versions initial load time(Without cache).

I'm not posting my Flutter doctor as it is unrelated.

Lighthouse audits in different versions:

Alpha - 1.27.0-1.0.pre:

Beta - 1.26.0-17.5.pre:

Beta - 1.25.0-8.3.pre:

Everything is tested in a production server, with the release version and the following pubspec:

name: flutter_load_test
description: A new Flutter project.

publish_to: 'none'

version: 1.0.0+1

environment:
  sdk: ">=2.7.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:
  uses-material-design: false

[iapicca]

would be interesting to introduce a test based in lighthouse to prevent regressions

[azbuky]

@franarolas what web renderer are you using, html or canvaskit?

[franarolas]

@franarolas what web renderer are you using, html or canvaskit?

@azbuky Always the default one, it should be always canvas as I am testing it through desktop browser

[TahaTesser]

Hi @franarolas
Thanks for filing the issue

1.25 doesn't use canvaskit by default, it's HTML, canvaskit default change is recent and not present in 1.25

@azbuky Always the default one, it should be always canvas as I am testing it through a desktop browser

When using default on 1.25 (HTML) flutter run -d chrome

When forcing canvaskit on 1.25 (Canvaskit) flutter run --dart-define=FLUTTER_WEB_USE_SKIA=true -d chrome -v

Related #59082

code sample

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

void main() => runApp(MaterialApp(home: MyApp()));

class MyApp extends StatelessWidget {
  final fontsList = <String>[];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Test')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 'fonts' or 'localFonts'
            for (final it in List.generate(12, (_) => 0))
              fontsList.addAll(fonts.split('\n'));

            Navigator.of(context).push(MaterialPageRoute(
              builder: (_) => FontsPage(fontsList: fontsList),
            ));
          },
          child: Text('Next Page'),
        ),
      ),
    );
  }
}

class FontsPage extends StatelessWidget {
  const FontsPage({
    Key key,
    @required this.fontsList,
  }) : super(key: key);

  final List<String> fontsList;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Scrollbar(
        child: ListView.separated(
          itemCount: fontsList.length,
          separatorBuilder: (_, __) => Divider(height: 40.0),
          itemBuilder: (_, index) {
            final isEven = index % 2 == 0;
            return Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text(
                isEven ? 'přížíéščé č' : '订单, asdf',
                // if using 'localFonts' uncomment this:
                // style: TextStyle(
                //   fontFamily: fontsList[index],
                //   fontSize: 58.0,
                // ),
                style: GoogleFonts.getFont(fontsList[index]).copyWith(
                  fontSize: 58,
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

// Google Fonts
const fonts = """
Ubuntu
Titillium Web
Stalinist One
Source Sans Pro
Source Code Pro
Roboto Condensed
Roboto
PT Serif
PT Sans Narrow
PT Sans
Poppins
Oxygen
Open Sans
Nunito Sans
Nunito
Noto Serif
Noto Sans
Nanum Gothic
Mukta
Montserrat
Merriweather
Lobster
Libre Baskerville
Lexend Mega
Lexend Giga
Lato
Jomhuria
IBM Plex Sans
Hind Siliguri
Hanalei
Hammersmith One
Fjalla One
Fira Sans
Crimson Text
Big Shoulders Display
Bebas Neue
Barlow
Anton
Abel""";

// load fonts from assets without GoogleFonts lib
const localFonts = """
Ubuntu
TitilliumWeb
StalinistOne
SourceSansPro
SourceCodePro
Slabo27px
RobotoCondensed
Roboto
PTSerif
PTSansNarrow
PTSans
Poppins
Oxygen
OpenSans
NunitoSans
Nunito
NotoSerif
NotoSans
NanumGothic
Mukta
Montserrat
Merriweather
Lobster
LibreBaskerville
LexendMega
LexendGiga
Lato
Jomhuria
IBMPlexSans
HindSiliguri
Hanalei
HammersmithOne
FjallaOne
FiraSans
CrimsonText
BigShouldersDisplay
Benne
BebasNeue
Barlow
Anton
Abel
""";

Since you're getting performance benchmarks on 1.25, it must be HTML, can you please confirm?
Otherwise, Can you please provide a complete reproducible minimal code sample to reproduce the performance report in 1.26 using canvaskit to be sure it's a regression
Thank you

[franarolas]

@TahaTesser
The sample used was the default Flutter project.
If 1.25 was not using canvas by default then the test of the 1.25 is done with HTML instead of canvas, so it is not a regression.
Then the problem is in the canvaskit it self, the initial load time is way to high to be used in any production environment(I know Flutter web is in beta).

[yjbanov]

Applications using --web-renderer=auto and --web-renderer=canvaskit will take longer to start on empty browser cache. This is expected. We plan an effort to optimize it, but for now it's a deliberate trade-off. If your application requires the fastest possible start-up on empty browser cache, consider using --web-renderer=html instead.

However, if subsequent app reloads are slow in any mode, please let us know.

For now, I'm going to treat this issue as a feature request to make CanvasKit initial start-up time faster.

[franarolas]

@yjbanov Just testing the web apps that have been shown on the Flutter Engage today, the initial load with canvas is too slow to be in production, I think that you guys should put that on the top of the priorities.
Just check the following webs that you guys have shown today as examples:
Flutter folio;
Flutter plasma;
iRobot;
Once it is loaded the performance is amazing and if you have the website loaded in cache the initial load time is pretty good but from 0 to 100 it takes too much time.

[steeling]

The CDN hosting canvaskit is having issues.. can we enable an option to bundle canvaskit with our app, or in the interim simply move to a different CDN?

[ivanfeanor]

Same issue with flutter 2.2.0
Can be very easily reproduced by using fast 3g network speed in chrome - for me page load drops to 15-20s. With slow 3g it takes over a minute to load.

[cedvdb]

Also the js code is not tree shaken. I mean the library used and included inside the scripts in index.html.

I believe this is something that has a high return on investment and can be implemented today by the flutter team (using existing tools ofc)

[yjbanov]

There are a few ongoing efforts to improve this:

• @hterkelsen is working on making a new custom build of CanvasKit that reduces the size by ~400kB.
• @mdebbar is working on reducing the size of the text layout sub-system by ~500kB.
• @ditman is working on various strategies for embedding Flutter Web in a web-page, that can help with load times as well.

We're going to treat this an the umbrella issue for improving load times, but a lot of work will be happening in smaller individual issues.

[DevinXiaoBai]

There are a few ongoing efforts to improve this:

• @hterkelsen is working on making a new custom build of CanvasKit that reduces the size by ~400kB.
• @mdebbar is working on reducing the size of the text layout sub-system by ~500kB.
• @ditman is working on various strategies for embedding Flutter Web in a web-page, that can help with load times as well.

We're going to treat this an the umbrella issue for improving load times, but a lot of work will be happening in smaller individual issues.

Can you streamline the process of running canvaskit more，

[ditman]

People, no need to ping this issue once a week. Do you think we'd hide development in one of the most requested features in the project? (Answer: no)

Stay tuned!

[harryfei]

We try to patch the generated flutter.js and flutter_service_worker.js to make flutter web first load faster. What the patch does is making most of resources downloaded in parallel. It's not perfect, but the result is acceptable to us. Wish it's helpful to you guys.

enkra/enkra-send@a2ecf6b

Those patches are based on Flutter master channel and a self-hosted canvaskit.

window.flutterConfiguration = {
   canvasKitBaseUrl: "./canvaskit/"
};

[crimsonvspurple]

There are a few ongoing efforts to improve this:

• @hterkelsen is working on making a new custom build of CanvasKit that reduces the size by ~400kB.
• @mdebbar is working on reducing the size of the text layout sub-system by ~500kB.
• @ditman is working on various strategies for embedding Flutter Web in a web-page, that can help with load times as well.

We're going to treat this an the umbrella issue for improving load times, but a lot of work will be happening in smaller individual issues.

Hi.

Are you able to link issues for these listed things? (if the links are still not available, my apologies)

Does any of the strategy above includes breaking up canvaskit in parts so only the required parts are loaded first to accelerate first time flutter web visit?

[TMSantos]

@harryfei interesting, do you have any flutter website in production where I can test the improvements?

[harryfei]

@TMSantos Yeah, we use this patch in our E2EE file transfering app

Note that we add a loading indicator to avoid blank screen. So use the chrome dev tools to see real flutter first screen rendering time.

[tcakmak]

What do you think about this solution -> https://github.com/SchabanBo/deferred_test

[TMSantos]

@harryfei actually from everything that was said, your example is the only one that I can feel some improvement, well done

[commandiron]

@TMSantos Yeah, we use this patch in our web app https://send.enkra.io

Note that we add a loading indicator to avoid blank screen. So use the chrome dev tools to see real flutter first screen rendering time.

How can i use this patch to my flutter web app? Can you explain step by step please?

[harryfei]

@TMSantos Yeah, we use this patch in our web app https://send.enkra.io
Note that we add a loading indicator to avoid blank screen. So use the chrome dev tools to see real flutter first screen rendering time.

How can i use this patch to my flutter web app? Can you explain step by step please?

1. Copy the files from this commit enkra/enkra-send@a2ecf6b and replicate them in your Flutter repository.
2. Use flutter master channel flutter channel master
3. Execute ./build_tools/patch_web.sh after every flutter build web.

[commandiron]

@TMSantos Yeah, we use this patch in our web app https://send.enkra.io
Note that we add a loading indicator to avoid blank screen. So use the chrome dev tools to see real flutter first screen rendering time.

How can i use this patch to my flutter web app? Can you explain step by step please?

1. Copy the files from this commit enkra/enkra-send@a2ecf6b and replicate them in your Flutter repository.
2. Use flutter master channel flutter channel master
3. Execute ./build_tools/patch_web.sh after every flutter build web.

Thanks for your help. flutter master channel is breaking various things, so I will have to wait with " fancy CircularProgressIndicator" XD

[razfazz]

@TMSantos Yeah, we use this patch in our web app https://send.enkra.io
Note that we add a loading indicator to avoid blank screen. So use the chrome dev tools to see real flutter first screen rendering time.

How can i use this patch to my flutter web app? Can you explain step by step please?

1. Copy the files from this commit enkra/enkra-send@a2ecf6b and replicate them in your Flutter repository.
2. Use flutter master channel flutter channel master
3. Execute ./build_tools/patch_web.sh after every flutter build web.

is the master channel mandatory to apply this patch?

[harryfei]

@razfazz Yeah. master channel has some modifications(fixing service worker cache bug) for flutter_service_worker.js which we need.

[jeancc29]

@harryfei Does it work on windows machine?

[harryfei]

@jeancc29 Yeah. it's a patch for flutter web which is just javascript and html. So It works on all OSes including Windows.

[eyebrowsoffire]

We've dropped the size of CanvasKit from 2.8MB compressed to 2.0MB compressed and 1.5MB compressed on Chromium-based browsers. We're going to close this issue for now, and track our further work on load time with follow-on issues.

[jaredsburrows]

@eyebrowsoffire Can you point us to the Git commit or Github PR? Also, what release of Flutter will have this update?

[eyebrowsoffire]

CanvasKit size changes are in Flutter 3.10. There is no single PR or git commit that is responsible for the size drop, it is a cumulative effect from many changes as part of a large effort to drop code size. The main things that contributed to the size drop:

• Lots of experimentation with build flags and inclusion/exclusion of features and code in CanvasKit
• Hosting CanvasKit on our own CDN and using brotli compression instead of gzip
• For Chromium-based browsers, we have a special build of CanvasKit that omits ICU data and leverages some specific Chrome APIs for text line breaking

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.