The Flutter team announced at the
Google IO event that was celebrated recently some web-related improvements that
Flutter 3 brings. In the official keynote, they reported on the possibility of
running Flutter in headless mode, and after that they showed some performance
tests that presumably increase Flutter's performance on the web by using the
latest standards regarding image decoding. But is this true? And if it is, are the improvements they've made
substantial enough for an end-user to notice? Since I always like to
check things out for myself, I've decided to run some performance
tests comparing the difference between the previous version of Flutter, the version
2.10.5 with the new version 3 of Flutter. In this video I am going to show you the specific
tests that I have carried out, as well as the final result so that you can see and judge for
yourself how Flutter 3 performs on the web. In the official keynote, the Flutter team showed
some screenshots in which a Flutter application appeared to load a bunch of GIFs. I have decided
to follow the same methodology and take advantage of one of the open-source projects that I already
have created in which the Giphy API is consumed and a lot of Gifs are displayed. I have cloned
it and made some adjustments to it to add the web platform. After that, I executed it in debug,
since Flutter web does not support profile mode, and I have observed the frames per
second indicator. Then I have run the same test after upgrading to Flutter 3. I
have repeated this set of tests on Windows, Mac and Linux to see if there is a performance
improvement on all or just some platforms. Before starting I am going to show you the
specific specs of the machines on which I am going to run the benchmarks. All the tests will
be executed in Google Chrome, in its version 101. For the Windows and Linux tests I will
use a laptop configured with dual boot with the specifications that
you can see on the screen. The tests on macOS will be executed with
a MacBook Pro M1 from the year 2020. Starting with Windows 10 we can see the previous
version of Flutter loading all the trending GIFs and reaching the figure of 35 FPS. After
upgrading to Flutter 3 and running the same test, I've seen the indicator go up around 39 FPS; with
which we can already see that in this first test there is already an improvement
over the previous version. I have repeated this same test with Chrome on
my Mac 13'' with an M1 chip. Here we can see how it reaches 45 FPS, and after upgrading
we can see how it goes up to almost 60 FPS, a very substantial improvement and
superior to that observed on Windows, although we have to take into account that this
is a different machine with different hardware. To finish, I have executed this benchmark on
the same machine where I have Windows installed, but this time on another partition where I have
Linux Mint mounted. 32 FPS, not bad although it is lower than Windows. After upgrading
there is a small improvement up to 38 FPS. Now I'm going to give you a summary of all the
tests. On Windows we have seen how we went from about 35 FPS to 39, which is an improvement of
approximately 11 percent. On macOS is where I've seen the biggest difference, going from 45 FPS to
58, which equates to a 28% improvement. Finally, on Linux we have gone from about 32 FPS to 38,
which represents an improvement of about 18%. By the way, keep in mind that these
tests are being executed in debug mode, without minified code, so it is possible that
the performance is higher in release mode. After having seen all this, I think we
can say that there has certainly been a huge improvement in the performance of Flutter
apps published in a browser. It remains to be seen if these improvements are also replicated
in other browsers such as Firefox or Safari, but at least we know that it will be noticeable
in Chromium browsers, so my most sincere congratulations to the entire Flutter team and its
contributors for having made this excellent work. If you want to see more performance tests and
comparisons between Flutter 2 and Flutter 3, do not hesitate to subscribe to this channel,
since I plan to carry out more experiments like this to be able to evaluate the impact that will
have updating our applications to Flutter 3. If you liked this video please give it a like, and if you want to see more content related
to Flutter here I leave you a recommendation. Thank you for watching, and
have a great rest of your day.
