Check out a free preview of the full Progressive Web Applications and Offline course:
The "Final Measurements" Lesson is part of the full, Progressive Web Applications and Offline course featured in this preview video. Here's what you'd learn in this lesson:

Now updated for PWA support, Mike re-evaluates the metrics of the course demo application with the Lighthouse Chrome extension.

Get Unlimited Access Now

Transcript from the "Final Measurements" Lesson

[00:00:00]
>> Mike North: I just want to take a couple of last measurements of our app, now that it's in this good condition here. I'm gonna make a production build of the app.
>> Mike North: npm run build prod.
>> Mike North: And we're going to use a little HTTP2 server and we're gonna run Lighthouse again just to see where we are at.

[00:00:28]
>> Mike North: So the first thing I wanna do is dist grep app.
>> Mike North: So if we look at the size of our app here, this is the Gzip size. Oops sorry, that's,
>> Mike North: We've got many builds in there. Let me just build it again real fast. So we should be at about 60 kilobytes, which is pretty fantastic.

[00:01:07] We've come down from 80 to 64, should be. I mean, we've written some code since then, so let's check it out to make sure.
>> Mike North: So there's our GZIPed app.
>> Mike North: [SOUND] Interesting, lots of different versions here. So I believe it's this one here, 66, right, down from 80.

[00:01:31] And when we look at the Lighthouse score, run serve http2.
>> Mike North: Hopefully it has improved substantially since our initial starting point of 34.
>> Mike North: Wants to show notifications, go nuts. Sure, I'm just gonna refresh again just o make sure that our API has cached everything that it needs to cache.

[00:02:00] And let's run it and see where we're at.
>> Mike North: I'll run it twice, we'll take the best of the two scores. [LAUGH] There's some noisy stuff that can happen in there.
>> Mike North: So it's receiving a stack trace, which let's it know when certain events happened, making sure that it works with the service worker.

[00:02:31] All right, so we're at Progressive Web App 100. I think we can do better with performance if we run it just one more time.
>> Mike North: And it may be that our images are coming in a little bit later, and that's causing it to keep the timer running when we're beginning to paint.

[00:02:54] So the Lighthouse score is information, it's not a grade on your product. So we're gonna look at the film strip and see when things actually started looking good. Hey, look at that. Turns out it was a little bit better the second time around. 87 performance, 100% progressive web app.

[00:03:14] We haven't done any server-side rendering here, which would make that performance number shoot up. Just if we look here, it's saying 2.9 seconds, that's when we start to see all the of data start coming in. That's cuz we're running a tiny little node server here. Now, if that came in with the HTML it would be down here at 1.4.

[00:03:35] Right, that would be way, way, way faster, we'd be at 100 at that point. So this is a dramatic improvement and more closely resembles a native app than a web application at this point.
>> Steve Kinney: As Mike alluded to, generally speaking, the number that matters is production, right? The server you're serving it from when you're running on your local machine, it's not production hardware, right?

[00:03:58] So keeping that in mind, that what your users experience is what matters the most too. So that might be higher if it was running on real servers and stuff along those lines as well.
>> Mike North: Absolutely, all right, thanks for attending the course, and I hope you can put some of those new stuff into your apps as soon as possible, don't wait.

[00:04:24]
>> Class: [APPLAUSE]
>> Mike North: [LAUGH]