Flutter Web vs HTML, CSS & JS: Performance Comparison

which one is faster flatter web or standard web technologies to find out i decided to build my new website both with flutter and with html css and js and since i just launched code with andrea 2.0 i thought it would be cool to also create a flatter clone to see if performance on flatter web is any good so in this video i'm going to give you a performance breakdown of both versions using two websites called page speed insight and web page test so if you want to find out which website is faster keep watching and if you are new to my channel please like and subscribe for more flutter videos alright so let's take a look at my new homepage and see what the layout looks like for reference i'll keep my live site on the left and the flatter web clone here on the right so at the top we have this intro with a newsletter sign up and then we get this section that showcases some feature tutorials using some cards and then we have another section about my flatter courses and this is followed by some testimonials from some of my students and then we have this about section about myself and why i created this website and we finish up with an email signup and a page footer and if we take a look at the flatter web version we have exactly the same layout all the way to the bottom so apart from some very minor differences the two websites look almost the same and now it's time to find out how fast they are so let's run them through page speeding sites first and all we have to do here is to paste the website url that we want to test and this will generate a report on mobile and desktop and out of these options mobile is more strict because it's simulated on a slow 4g connection so let me reload both pages so that we can do a fresh run and then we can click on analyze and generate our report and we can do that for both sides at the same time alright so here we go and let me speed things up a bit and as we can see the report for the live site is ready after 11 seconds while the flatter web one is still checking along and this only completes after 39 seconds so let's take a look at the test results starting from the live site and as we can see we get an overall score of 93 for performance and important metrics such as first contentful paint and largest contained full paint report a value of 2.6 seconds next let's see how the flatter web version did and in this case we are not so lucky because we get a performance score of just 25 with very high values for all these metrics indicating that it took more than 10 seconds to show the page on first load next up it's time to take a look at our second benchmark which is web page test and one great thing about web page test is that it offers many advanced settings such as the connection speed screen dimensions and many more so for this test i just keep the default settings but feel free to try different ones if you're curious and just like we did before we are gonna run the test simultaneously for both sides alright so here we go and well this is funny because i had to complete this captcha and it looks like now i'm stuck in a queue and this definitely didn't happen when i first run the tests but since my dedication to this course is very high i went for a coffee and came back right when the test started running and just like with the previous benchmark in this case it took a little while for the flatter tests to complete alright so here we have the final result and what we can see from here is that the main site gets a speed index of 0.8 seconds which is pretty good meanwhile the flatter web version has a much higher value of nearly 13 seconds and one very important thing that contributes to this very big difference is the bytes in metric which tells us how much data was downloaded in order to load the page and as you can see the main site only downloads around 300 kilobytes of data while the flutter web version downloads over four megabytes making it nearly 14 times heavier than the main site and as a result other important metrics such as first contentful paint and speed index are 10 to 15 times slower for the flatter version so the bottom line is that the flatter web version downloads 10 times more data and loads 10 times slower than the main site of course this only happens on first page load and some sequence reloads are a lot faster because all the content is cached by them but still four megabytes in download size is unacceptable for content websites such as mine and you know what this shouldn't be news to anyone in fact even team snit himself says that flutter is an app framework and it shouldn't be used for content heavy websites and the flutter documentation says exactly the same thing so while i had fun building this clone with flutter i knew from the start that this wasn't the right choice for performance as well as seo which is absolutely critical for me and this wraps up our performance comparison between flutter web and standard web technologies and the takeaway here is that if you are building simple or complex websites then you are better off learning popular web frameworks like react vue or zvelta but if you are building cross-platform apps that are mobile first then flutter is your best friend by the way if you head over to this page on my website you'll find a complete report with all the performance results from the test that i've been running and if you want to find out how i built this flutter clone then you can head over to this page on github where you can find all the source code and if you'd like me to share a speed code or a time-lapse video about how i built this with flutter then make sure to like this video and leave a comment below finally i hope that you like my new website and continue to learn flutter with all my tutorials and if you are quick enough you might even take advantage of my black friday sale and get my flatter courses for a discounted price okay so that's all for today thank you very much for watching and i'll see you in the next video

Channel: Andrea Bizzotto

Views: 70,013

Keywords: flutter, dart, android, ios, mobile app development, programming, tutorial, course, udemy, coding

Id: hZYoyMScXCg

Length: 6min 1sec (361 seconds)

Published: Mon Nov 22 2021