This course has been updated! We now recommend you take the Build Progressive Web Apps (PWAs) from Scratch course.
Transcript from the "Performance Timeline" Lesson
[00:00:00]
>> Mike North: When thinking about how we can improve the state of our app, currently if you were to right-click on the app itself in View Source. You'll see we're basically sending an empty index.html, there's nothing visible in the body. And we're waiting for a client side JavaScript to be downloaded, parsed for that app to boot.
[00:00:19] And then it can start inserting elements into the HTML which then our user can see. Basically, everything on the critical path to our user being able to see stuff, right? We have to get the CSS, we have to get the JavaScripts. We obviously needed the HTML in order to know about those two things, the app has to boot.
[00:00:37] It's a lot of stuff that is in the way of us loading really, really quickly. So as we start to chip away at this problem and improve it. I want you to pay attention to the three metrics that we talked about earlier. Time to like a meaningful paint where the user feels like the app is starting to boot.
[00:00:57] The time to the app becoming interactive, and the time to our dynamic data being shown on the screen. And I've got a diagram that we'll refer back to over the next day-and-a-half or two days. And it sort of represents our progressive web app system as a whole. And we'll look at the things that are in the way of us providing a nearly instant boot time.
[00:01:23] Because that's where we're trying to go. We want this app to boot offline regardless of the quality of Internet connection. And for it to be definitely under the two second mark before we start seeing stuff. So here's our current state of affairs. We go and ask for index.html at localhost 3000 and it comes back with that file.
[00:01:46] And the browser starts reading through it, parsing it, it's gonna encounter, maybe an external style sheet and an external script. And we've probably, if we're doing our job right, we've hosted those on a CDN, a separate domain. So that's another roundtrip request. And the CSS is gonna come back first, because on average it is smaller.
[00:02:06] Less than a quarter the size of the average JavaScript payload. The JavaScript will come later, and then it has to be parsed and the app has to boot. CSS also has to be parsed as well, but the bar on this diagram would be so thin that you wouldn't even be able to see it.
[00:02:22] It's a much simpler language, right? It's almost like key value pairs, only three or four different types of objects we need to represent to describe that language. And then at this point, we can have sort of a non data-based First Paint. This is like the nav bar, this is the stuff we don't need JSON for.
[00:02:46] The title of the app, the cart icon, that's just SVG. Then we have to go to our API, get some JSON back, and we can show data on the screen. So this is where we are right now. And the hope is as we make improvement, I wanna see these icons move left, right?
[00:03:02] That represent faster boots, less things in the way for our users to start working with our applications. So if you've never used the PERF timeline, you're gonna get a little bit of experience with the today. This is our current state of affairs and you can see this little like film strip of screenshots here.
[00:03:25] Basically starts as pure white until this JavaScript file completes downloading and this by the way, this was on a 2G connection. So I've slowed it down to make this point clearly, but basically nothing gets painted until the JavaScript's downloaded. So this is proof that my claim, that everything is in the way, all of the JavaScript, all of the CSS, that's what we're looking at.