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
- 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.
I build the application with both methods. Flutter builds the application into *project_name*/build/web.
flutter build web --web-renderer canvaskit --releaseflutter build web --web-renderer html --releaseI uploaded both builds to Netlify’s hosting service (free to use).
You can access the applications as well. I will leave them up.
1. CanvasKit 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
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.
Another notion is the accessibility, which had some minor things missing.
These issues also appeared for Html renderer, so I won’t go over them again.
Metrics CanvasKit renderer desktop
Settings Html renderer desktop
Overall score Html renderer desktop
The overall score is identical to the CanvasKit.
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
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
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.)
Html build loaded a bit faster, but not much. This is rather surprising given that it should be smaller package compared to CanvasKit.
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
Html renderer
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. :)
