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: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: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.