Nerd For Tech
Published in

Nerd For Tech

Flutter Web production build testing with Lighthouse

There are two rendering methods to build Flutter Web application. I wanted to test benchmarking these two methods. The results were confusing.

Flutter Web renderers

  1. HTML renderer.

“Uses a combination of HTML elements, CSS, Canvas elements, and SVG elements. This renderer has a smaller download size.”

Source: Flutter docs

2. CanvasKit renderer.

“This renderer is fully consistent with Flutter mobile and desktop, has faster performance with higher widget density, but adds about 2MB in download size.”

Source: Flutter docs

Hosting applications

I created a new Flutter Web project with no changes.

Flutter web default application.

I build the application with both methods. Flutter builds the application into *project_name*/build/web.

flutter build web --web-renderer canvaskit --release
CanvasKit renderer build directory.
flutter build web --web-renderer html --release
Html renderer build directory.

I uploaded both builds to Netlify’s hosting service (free to use).

It is easy to manually prototype web pages with Netlify.
Both applications hosted in Netlify.

You can access the applications as well. I will leave them up.
1. CanvasKit rendered application

2. Html rendered application

Testing

Finally I ran Chrome’s Lighthouse for both of them to test performance. I also show the download sizes, even though that is already mentioned in the Flutter docs.

Desktop Lighthouse test

Settings CanvasKit renderer desktop

CanvasKit desktop Lighthouse test settings.

Overall score CanvasKit renderer desktop

Interestingly Lighthouse cannot create a performance score for Flutter applications. I tried this many times but I always get a question mark for the performance.

Lighthouse can’t for some reason generate a performance score.

Another notion is the accessibility, which had some minor things missing.

Missing lang attribute and something wrong with viewport scaling.

These issues also appeared for Html renderer, so I won’t go over them again.

Metrics CanvasKit renderer desktop

CanvasKit metrics.

Settings Html renderer desktop

Html desktop Lighthouse test settings.

Overall score Html renderer desktop

The overall score is identical to the CanvasKit.

Html renderer overall score.

Metrics Html renderer desktop

Interestingly the Html renderer build is slower in basically all metrics that are present.

Mobile Lighthouse test

I also ran the same analysis with mobile version.

Settings CanvasKit renderer mobile

CanvasKit mobile Lighthouse test settings.

Metrics CanvasKit renderer

The other parameters didn’t change when running mobile analysis, so I’m only showing metrics. Here we see that the speed is slowing down compared to desktop version.

Settings Html renderer mobile

Html mobile Lighthouse test settings.

Metrics Html renderer mobile

Html rendered build seems to be even slower than the CanvasKit in mobile.

First time loading

For fun I tested the first load times as well. As expected the CanvasKit build has a 2.8 MB package and it is slower to load. (The cache is disabled.)

CanvasKit first load without caching.

Html build loaded a bit faster, but not much. This is rather surprising given that it should be smaller package compared to CanvasKit.

Html first load without caching.

Then again this is not really precise measurement since it is only one load. But that is what I’m getting. Obviously with caching the load times will be faster in the subsequent loads.

Performance Insights test

Finally I ran the Performance Insights, this is also a Chrome profiling tool. The results are similar to the loading test.

CanvasKit renderer

Performance insights for CanvasKit rendered build.

Html renderer

Performance insights for Html rendered build.

Conclusion

I don’t know if much can be said based on these Lighthouse tests that I ran. It seems that the results are contradictory to what is said in the Flutter docs. Or maybe I am misunderstanding. I though that html rendered build would load faster, the opposite seems to be true with Lighthouse. Then again it is also giving weird errors so maybe something is not right.

In the real world loading test, the Html rendered build loaded faster and contained smaller package. This is also true on the Chrome’s Performance Insights test.

I would not take this article too seriously as it was written during one evening with not much seriousness. The builds are in Netlify if you want to try yourself. :)

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store