00:00 Let's go ahead and clear our cache right now just so that we're all ready to go when it's ready and I'll turn this on a, well we'll turn that on a slow 3G once we've got it. We've got our ship and we've got this right here where we're getting the image URL for the ship. We want to move this

00:15 up so that this can happen before we trigger suspense with this use right here. And we're going to do the ship name so this gets us this ship image source. If we dive into ship image and then image right here we're calling use image source. So we don't actually need to call use

00:35 up above but if we call image source then that will start the preloading because that image source function is cached. And so we can say ship image source in there and that will trigger the preloading of the image so that by the time we end up rendering this once this is done

00:54 suspending it will have already started. So with that let's save that we get a reload and let's go slow 3G close this out and we'll go to the battleship and you notice right next to each

01:07 other exactly what we wanted. So it's loading let's see that's I think that takes two seconds for this one to finish so it's two seconds faster. Good stuff I'm a fan for sure. So all we needed to do was analyze the the waterfall that we had to see oh we're loading this we can in fact load

01:27 this sooner. There's not like a data dependency here so let's preload that by simply calling the function earlier. Again not my favorite this is kind of a manual optimization and if we decided to get rid of this there's nothing telling us that we need to also get rid of this which is

01:44 kind of frustrating but that's why you use a framework. But this is something that you can do if you're using this directly so it's nice to know that there's optimizations available.