Flutter Web vs HTML, CSS & JS: Performance Comparison

[@iboy883]

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

[@rogeriomq]

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

[@S_tories265]

Yeah maybe in the near future we'll see flutter dominant the web Maybe who knows 😅😅

[@relax3the6mind9]

Please do this!!!!

[@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?

[@sticklebrix1756]

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.

[@mettleUnbeaten]

Would you please help me with some examples of interactive websites. Thank you

[@7mada89]

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

[@aytunch]

html renderer does not support svg's for instance and it is not rendering UI pixel perfect. What does the shelf_static do exactly?

[@7mada89]

​@@aytunch oh so html render isn't that flexible shelf_static is for building static web page with html and css

[@wdestroier]

shelf_serve is a library, that runs in the back-end, written in Dart, to serve content. It isn't related to Flutter

[@7mada89]

@@wdestroier Yeah so true but you can host a static web page with it, recently I found a another tutorial about building web pages with dart and html and css what do you think about this approach ?

[@highlightstime2723]

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

[@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.

[@HammadKhanYT]

Ran the code with the latest Flutter 3.16. The website transferred 64.8 MB data and it took 2.73 seconds to load which is quite an impressive change from when the video was made originally (2 years ago). Of course, I ran the code locally only which should be faster but then it would also be in debug mode.

[@DanVanDamme]

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

[@CodeWithAndrea]

I uses a static site generator called Publish: github.com/johnsundell/publish Though if I was starting from scratch, I'd probably go with Next.js or similar.

[@notetodeiii2326]

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

[@thefamousdjx]

I’ll check again in a few years. Flutter tables cant even merge cells like colspan does. I dont even want to check how it does with charts. Some people saying it loads faster the second time but people are too impatient lately u’ll be losing business just because of that super slow page load. Javascript aint that bad

[@andyyork6471]

Was flutter in debug, or production mode when testing?

[@someshsahu4638]

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

[@communityband1]

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.

[@bigmistqke]

If it takes me 4 seconds to open ur website there won't be a second time

[@communityband1]

@@bigmistqke I really don't have an issue waiting a bit for a website to load. Most of the time it won't be the fault of the website author but rather the service they host on. In any case, it will take me longer to find another site than it will to wait a bit.

[@Simonsayztaga]

Great Video! Thanks Andrea

[@tomaszcz.6949]

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

[@ThunderboltPath]

Very insightful, thanks!

[@AapVanDieKaap]

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

[@evgenii.zaikin]

2022 year, any changes?

[@Juliano-v]

About the loading "speed", if you implement flutter_native_splash it decreases a lot. Thank you for the video!

[@Melon9an]

Could explain more plz, cause it doesn't change the loading speed, it's just an image while ur waiting.....

[@nested9301]

Seriously ?? Is this a joke?

[@intuneknight9681]

You can use Angular with Dart, you would be amaze how Dart take Angular to the next level.

[@anuragbishnoi3208]

nobody talks about it, can't find any normal discussion video on it.

[@smarthumanism3221]

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

[@Gaijin101]

Seems like Flutter Web is only suitable for big webapps or CMS

[@scottstoll-dn2yx]

That's what the Flutter team and veteran Flutter developers have been saying all along. Flutter was never intended to be used to create a whole website, it's for web apps. People are trying to use it for something that it wasn't designed for, and then complaining when it doesn't do it well.

[@johnsonemmanuel]

Flutter web stable version is a one year baby. i guess, it would improve over time. comparing flutter web with existing frame work is comparing iphone model 1 with model 13

[@S_tories265]

thank you sir for sharing this infos with us 🙏

[@Ismail-hd4yz]

I am building a very highly complex web app with flutter. i guess after flutter 3.0 the performance has increased a lot

[@mrman4636]

can i see it

[@its.arjun.s]

Flutter pages stutter on my phone. I'm skeptical

[@m_leBrave]

Can you do it again Since Flutter has been updated

[@segamenacesis]

This test is BS unless it's served from the same backend (it's not). We don't have any data on how long it's taking for the backend to respond.

[@faheemahmadofficial7701]

Please now do this using flutter 3.3

[@youtubewatch8329]

I feel when you execute flutter web first fime it takes too much time.. But after that it quite faster.. Please Create some other comparisons videos

[@iamtafara]

Cant say im surprised

[@sianami-e9s]

please run new test with new flutter feature (wasm)

[@CodeWithAndrea]

Don't have time for that atm. The project is open source so you can do it yourself ;)

[@TheSinisterCurse]

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

[@muhamadhaydar8419]

Could you test it again after flutter 3.0, i would like to see the result again !!

[@CodeWithAndrea]

The project is open source and methodology explained in the article => you can test it yourself

[@lmarkrol]

Wait for fuchsia OS then try to compare again

[@burgasHoH]

Nice video :)

[@nemkov.official]

Go to test today😉

[@mswinvle]

Have you tested it?

[@zonasochi1147]

Круто !!

[@rajaryan7167]

thanks

[@cekroz]

Tray again with WASM !

[@CodeWithAndrea]

I tried but got some compile errors and didn’t have time to investigate

[@cekroz]

@@CodeWithAndrea I had to enable 3 flags in chrome : Experimental WebAssembly, Experimental WebAssembly JavaScript Promise Integration (JSPI) and WebAssembly Garbage Collection.

[@shubhamboghara4490]

Speed code of this flutter version.

[@violetsjade]

@TechTimeTraveller Thanks for watching and commenting, ❤❤ you've been randomly selected as a winner in today's giveaway, use the name above 👆👆 to claim your prize.💫🎁🎁🥳🥳

[@OOpSjm]

This comparison doesn't seem right.

[@apisaga]

Flutter 3.0 please

[@moutaouakilayoub2337]

aser tqewed

[@ayoubelbadaoui7000]

akhy kharba9 had khona

[@DartMitai]

flutter web it is real shit

[@wdestroier]

It works great! The only problem is that it takes too much time to load

[@learnwitharslan1049]

@@wdestroier yes and that sucks.

[@finnbarm]

It's good when you use it for what it was made for. If you're building a highly interactive app, such as a video editor or word processor that you want to run in the browser, flutter is one of the best options because you don't need to deal with JS at all.