Flutter Web vs HTML, CSS & JS: Performance Comparison

Written tutorial: 👇👇

Source code for Flutter clone: 👇👇

HIGHLIGHTS

00:00 - Intro
00:35 - Website overview
01:27 - PageSpeed Insights benchmark
04:33 - Flutter web vs HTML, CSS & JS: take aways
05:24 - Conclusion

BLACK FRIDAY PROMOS (35% OFF!)

Happy coding!

[iboy]

i would love to see the comparison again now with flutter 3 it would be really interesting

[Damielsestrem]

can you, please, do the same test with flutter 3.3.1?

[jeschinstad]

But if subsequent loads are substantially faster, then it would've been interesting to see that comparison as well. Also, didn't I read somewhere that Flutter web can be compiled into html5 rather than running as a JS app on canvas?

[someshsahu]

Very nice explanation sir thank you so much 🙏🏼🙏🏼🙏🏼

[tomaszcz.]

Has anything changed since this test ? Have the new versions brought any improvement ?

[rogeriomq]

Great comparison. It would be nice to see with the new flutter version 2.10.1 or higher

[highlightstime]

I'm confused why there's not more complains about the flutter for web scroll performance. That's what's worst for me when using flutter for web

[S_tories]

thank you sir for sharing this infos with us 🙏

[andyyork]

Was flutter in debug, or production mode when testing?

[DanVanDamme]

Thanks for sharing this comparison Andrea! Curious, what technology did you use to create your new website? Vanilla HTML, CSS and JavaScript?

[notetodeiii]

Do you think it will be better in the future? Anw great content!

[sticklebrix]

The problem is there are websites that don't neatly fall into "content heavy website" vs "interactive app". For instance you get sites that are very data-centric that have reasonably complex UI's for viewing / exploring that data where a UI framework would be the obvious option. Now for some Flutter would be fine because that bit is locked behind a login, so the long first initial page load doesn't really matter. However for others they make a limited amount of data and / or functionality public and want to be indexed by search engines, because that is a source of customer acquisition, and for that Flutter is pretty bad.

[TheSinisterCurse]

Thank you very much for that comparison and explanation. Helped me on making a decision very clearly.

[its.arjun.s]

Flutter pages stutter on my phone. I'm skeptical

[peekpt]

The principle of web page is to be more fragmented as possible to be able to load faster and free resources. I believe flutter will be good for making appliances interfaces, apps, computer software. For web it's another story. I'm willing to see it on embedded devices.

[AapVanDieKaap]

It doesn't really matter because once the flutter runtime is cached there will be no difference.

[m_leBrave]

Can you do it again Since Flutter has been updated

[smarthumanism]

Please change the mike. The sounds vibrates too much that it is hard to understand.

[mada]

Thanks Andrea for doing such a compression.
I have two questions
1- Did you use HTML renderer or CanvasKit renderer for flutter, the doc said that HTML renderer is a bit faster
2- Did you tried using dart shelf_static

[communityband]

It really does just seem to be the download time. I tried your Flutter demo page, and on first load, it took about 4 seconds. Refreshing the page though it seemed to load instantly. So hosting a Flutter app on a service with good bandwidth would be advisable.