7 Ways to Speed Up Your Flutter Webapps

[Music] foreign the latest version of my app was just deployed to cloudfront let's take a look yeah oh that's taking a long time to load and that's actually why we're here today here's a recording that I took when I did load that you can see it takes quite a while one of the things I've noticed is when it's newly deployed it can take eight seconds even to load the app and I've been experimenting as to why and part of that is because we're using cloudfront which is like a CDN and it is caching it the first time and so when it goes to cash it that actually is a fairly expensive operation we'll actually see a little bit more about that coming up but what we can do to see what's happening is we can go to our developer tools I'm using Chrome we can go to the developer tools and we can pull up the network part and when we load it what you'll see is you'll see that it's still taking a while but it's taking like you know three and a half seconds now which is a lot better than it was before but I think we can do a lot better and in fact actually if we were to just reload this over and over and over it would actually come down anyway on its own but that's not a very fair case I think this is a little more of a of a good use case and that brings us to our topic of the day here are seven things that you should be looking at with your web apps the first thing I would suggest that you do when working with a flutter web app is to go ahead and add a loading animation it's actually pretty simple to do even though I had a hard time finding descriptions and tutorials with it so let's show you how to do it and to start with that let's go and take a look at the gallery for the flutter app uh so you can see there where it loaded breathed in a little bit came in let's take a look at how they did that because that's one of the beauties of course is we can just look at this page Source on this so if we scroll down here we will see that they've added a div with the Styles in here that handle that breathing the and the zooming in and out and stuff like that and so when we look at that that's all done right here and they added in and then as they work their way through the life cycle of getting ready to run the flutter app they go ahead and they load it here they bring it up there and they do that so now let's take a look at how we can add something like that to our now I have not got from our design team exactly what they want it to look like however we're going to go with something I think pretty easy so inside of the body we're going to go ahead and add a div and I'm going to give it a class of loading an idea of loading foreign for it okay and now we're going to go ahead and create dot loading and we're going to give it several parameters here first is position is going to be absolute once again this is just a quick thing to try to do with it we can always make it better as we go along uh I'm going to make the top I'm going to calculate it at 50 minus 100 pixels this is not responsive so we would need to actually deal with that for a final solution but let's get going and see what it does for us okay and then given the fact you can probably guess based on how we did that the width and the height are going to both be 200 pixels all right so we get that going in there and then we need to add a border that's gonna be five pixels these are just kind of made up numbers um once again you know you can make sure it Maps matches what your app is already doing or like in my case I've got a design team so you know ultimately before I'm actually checking code in here we're going to have that going so 50 percent On the Border radius okay and then we need to go ahead and do an a border top and that's going to be three pixels it's going to be solid and it's going to be uh three four nine eight DB and again I'm doing this you know in CSS even though I do flutter so I don't have to do CSS I'll be honest all right so we're coming along here and then so it's going to repeat and it's going to go on forever um we need to add the keyframes which is how that we Define what's happening with the spin here and the keyframes are actually really easy in this case because we're going to say at zero it's a transform and it's going to be rotate zero degrees and then at 100 percent it's sort of the same thing but you know it's the 360 degrees so that's the same position but we will make it work all right and so now that we've added that in there we can come down here to where we're going to turn it on and since I'm not stepping through all of it I just need to do it a couple times we're going to say let loading is going to be equal to document dot query selector and we're looking for loading hashtag loading all right and then we have to turn it off so that turns it on and then down here when we're about done we're going to turn it off now one thing we might want to do here is we might want to go ahead and uh maybe going to have the timer like they did on the other one and actually might cover up some sins that we're going to see in a little bit so that would be one approach all right now that we've done this let's go ahead and let's see what happens when we run it and you can see it's got that spinny Circle just like we would like now you may have noticed that there was still a white screen after the space Circle went off and I know what the reason for that is it's because I'm making an API call and I'm having to wait for the response now later on we're going to try to work on shrinking that but I'm not going to be able to make it zero so what I probably need to do will be to use either a future Builder and have some continuation loading screen or maybe come up with a way so that my first page can have the results fade in as soon as I get them either way would work and but we're going to still try to make it as small as we can so let's go on to step two our second step is going to be to go ahead and take a look with the tools and so the first thing I'm going to do is go ahead and load our app again now we just deployed it with the uh to the to the new Cloud front instance with a spinning Circle part and you can see that it took quite a while to go there but if I reload it again it won't be quite as bad I come over here and I will go ahead and pull up and and take a look at the developer tools and I've already clicked network over here so now when we run this what you'll see is you'll see it's going to start collecting what's called a waterfall and this waterfall is just showing all the things that are happening and the time that's going through there and you'll see this time it took 2.81 seconds um two and a half three and a half that's about what this app has been taking when we load if you take a look here you'll see that like wow a lot of time was spent with this canvas kit in fact actually that was over half a second out of our time that we had we also see that our fonts are coming in in parallel we still might be able to do something about that but to help that out a little bit but we'll see what we can do and then as you look through here you're going to see that I am for some reason downloading fonts twice well the reason this in fact I'm using both in a package and in my main application and so I'm not quite sure I get around that but I can definitely start preloading some of these and more importantly I can go ahead and prune some of these out because I want to look at this because I know my app the samples is not being used by the Woodley bank at Woodley Bank by the way is just our demo made up place that we're using and so we look through there with things like that we will see the timing on them and we can do work about that and if you take a look here this cash busting thing that's interesting so this took um over half a second again and so now we've got like a full second of this time just on two calls is there anything we can do about it I think we can do something about it with parts of it and then we take a look here we will see that this is actually a call that I'm making to my back end and so this needs to be authenticated I can't I can't do anything about making that call but I might be able to do something about getting us a little bit faster with what we're doing with it and then I've got you know these three assets that are being loaded here the uh that we're doing as part of this page and so I think we can do something about that so now that we've looked at the tools it's probably time for us to go ahead and move to step three the third thing I would like you to do when looking through what is being loaded through the waterfall graph is actually take a look and see if you're getting anything that you don't actually need and that actually is happening in my case I'm going to tell you a little story though the very first time I ever did this I discovered I actually had it was in response and I actually had one font that was put in my post Vector EML twice and put all the files in there twice and so when I started the app up it was obediently loading them all twice so mistakes can happen I hope that when you're looking you don't find anything like this but it's helpful to understand what all is being loaded and take a look and see if there are things you can do to streamline what's happening and so in this case let's go ahead and take a look in the code as I look through my waterfall graph here a couple things jumped out at me right off the bat and it had to do these fonts and if you take a look I'm actually downloading several of these fonts twice and of course the reason why is some technical debt I occurred recently where I refactored my project into a project and then a package I could reuse and that package needed access to these fonts so it is in both Pub spec.amls but where we can really do something about that is all of these fonts are not used in each place so if we go over here I happen to know that this tiempos headline is only used in the other project where it's one of the landing pages for a specific client so I get rid of it from here that's not a problem now the other one's a little bit harder but one thing I do know is I do know that when I'm building this endpoint so when I'm actually building this this actual web app open Sans is the only font that I need is for as far as the project goes everything else is part of that package so that means that all of the rest of these I can get rid of and so that's going to save us quite a bit of loading time and that's what our third thing to do is all about is it's identifying resources that we don't need to download and making it where we don't download them and that gives us a little ways but now we need to go talk about step four the fourth thing I would like you to do when you're working on a flutter web app is to use that waterfall graph and figure out are there things that we can basically move forward in our process so that we are able to when it comes time if you notice there's several things being done in parallel and so if we can do that and we can pre-load these assets then that would be something that could help us out later on because we won't have to do it later so let's go ahead and take a look at that and see how that works in practice okay when we take a look here we'll see there's these three images here that we are loading uh toward the end of the process and these are things that we could grab at the beginning and be just as good so if I go over I'm going to copy that value and then I'm going to go back into our code and we're looking at it what we're going to do is up here in the head section we create a link okay and it's going to the it's going to be preload okay and then it's href is going to be the value that we I just copied from that I got it from just right clicking and doing that and then we need to tell it to as equals fetch okay and finally we have to add the cross origin it's because it's coming from a different place and so if we do that that actually works for that first one and I had three of these images so let's go ahead and put both of these in there and the second image was going to be it's called um equity 968 . if I'm not gonna be typing this I would have probably tried to make the names a little bit easier but this one's a jpeg and then I've got one more which is going to be same right it's the different place it's actually in common and it is the equal housing logo.png all right so so these three images will now be loaded up at the beginning of the process when I'm waiting to see if one of the things I want to show you here is if you take a look we've got a spot right here where this is taking us quite a while for this to all happen and we've got several things going on in parallel so if we could that's where it would make sense to start really getting some of the things going now we don't want to do so much that we delayed this happening because this is still going to take a long time all right so if we take a look here then these these fonts are the other thing that we could really do this with so why don't we try to do that too and so in my practice this has helped quite a bit so what we do is it's almost the same exact thing so we're going to do a link it's going to be a Rel it's going to be preload okay we're going to have an href which is exactly the same as what we just did it's going to be as equals fetch and it's going to have to have cross origin and fonts always have to have crosswords and even if they are the same so if we go over here we can just do a copy and take care of all of those all right and over here this one's going to be after we did that one I've got the next one's going to be italic okay the next one is light the next one is light italic the one after that will be bold I have bold italic and then I have semi bold and semi bolt italic and those are all there are there is no there we go and that should work for those and so that now it's going to fetch these fonts at the beginning and it's going to fetch these images at the beginning we are up to the fifth thing that I would advise you to do when working on a flutter web app to try to help get a faster time to that mean time to confidential page so we've done pre-loading and preloading works very well for what it works for now we have some cases where I can't preload things for example I need credentials and stuff to go get the status of the collection that I'm working on and that doesn't make sense for me to put that into my index.html it's just a little too obvious not that API keys for example are secure that really but you know I don't want to go that far so let's go ahead and take a look here and see which HTML tag will help us with that let's go in the code all right this is the one I'm talking about is right here and so this is a call I'm making that I cannot make really and preload the information for So based on that let's go ahead and try out the pre-connect tag what preconnect does is it goes ahead and it starts the negotiation for it and makes the connection now this is only good for about maybe 10 seconds so this is not something you want to do just to do it at the beginning but in this case I know I'm almost immediately going to be calling this function and so the way that that works is it's a link Rel equals and you guessed it reconnect all right in this case the href I went and copied it but that's not doesn't make much sense because it is uh only I only want the uh base part of it I don't want the whole thing so this is API dot Dev dash at least my company I work for and that's what I want to set up for this and so that is what I'm doing for my pre-connect now let's go back and take a look because I saw something else that looked a little funny here on this graph so if you take a look here this one got slowed way down because of other stuff happening now it it kind of finished before we we finished loading some other stuff but you know we should probably take a look at this and oh my goodness so what's happening is it takes a while to look up DNS for something it also takes a while to negotiate the SSL that's a great use of pre-connect however let's take a look at what this is and this is actually a font and so I actually think we can get away with going ahead and doing another preload with that so let's set that up and over here I'm just going to go copy the value for it and that's going to just be coming right here and replace it there and that's going to have that so that that's something else that we discovered I missed the first time through but now we get to see that we are up to the penultimate thing that I would like you to do when working on a flutter web app and that is really as you're scrutinizing this waterfowl graph look for anything that's just really out of the ordinary and so when you're looking across here we can see I've got one item that is very long and when I take a look at it it's actually taking over half a second of our time with just this one call so let's take a look and see what the call is okay when I click on this oh my goodness Okay so what this is doing is this is trying to make sure that when it's reading the version.json that it is not getting a cached version of it well we are already in my case using a CDN and so what this is causing to happen is even though we're telling the browser to never cache this value um we're acting like it did and the problem with that is when it has to go and it has to retrieve it from the AWS servers that takes a long time and so because of that um that that's where we get the half a second so I took this offline and I worked on it and what I did was I went ahead for now I forked the package I'm going to this is a community package so I'm going to go and talk with the people that have made the change and see what they think and try to come up with the way so I can get back into the normal package but I use this for my analytics so I need to know certain things that are happening because of that and so what I did was instead of it what it is instead of having uh the the version the normal just normal through pub.dev I went ahead and I'm getting rid of that and I've got it added from my forked Branch so my forked repo now has that so that I can do this without having that cash Buster in it because in this case it doesn't do me any good and it's doing quite a bit of harm on my load time so I think we've done a lot why don't we go and see how well this works and see how much faster our app runs and now we've reached Our Moment of Truth let's see what we've done for it remember the first time that we do this is longer because it has to go get the cash from the servers let's see what happens here if we come in here we can see what's going on and this took over six seconds before and now only five seconds so that's quite an improvement on the first load but let's see what a second load does when I run through here you will see that this one took under two seconds we were close to three seconds before so that's a quite an improvement it's more than 25 Improvement based on what we did and I think there might be room for more given time and effort I think that's quite nice and that brings us up to the last thing that I would like you to do when working on a flutter web app and you're already doing it because you listen to this video hopefully you've listened to the keynote speech but what it is is stay involved pay attention flutter is constantly evolving it's becoming better and better and that really includes flutter web there's lots of things coming up that are going to really help us out with stuff and so that's what I want you to do is keep watching keep paying attention and watch as it gets better and come along for the ride and I want to thank you for checking out this video and I hope it helps with helping your load times on your flutter web apps thank you [Music]

Channel: Flutteristas

Views: 11,476

Keywords:

Id: CdH2CXG_M-s

Length: 22min 50sec (1370 seconds)

Published: Wed Jan 25 2023