Python Web Apps that Fly with CDNs Transcripts
Chapter: Checking your work: Performance testing
Lecture: Testing with LightHouse
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Now, we've got a lot going on here in order to run the old version and the new version side by side in a way that we can use.
0:09
So notice I have two terminal open here, one to the starter project code and one to this
0:16
chapter 8 performance testing, which is literally just a copy of chapter 7.
0:21
I don't think we're going to make any changes to that code, but I want to have it there as a standalone thing for you.
0:26
Also note we have the same Python virtual environment activated already for both so that we can run our app. I'm going to say Python app.py here.
0:38
Notice this is running on 10001 as it has been. I made a very minor change to the starter project, which you'll need to make if you
0:45
want to do this trick as well, because they can't share the same port.
0:53
going to need to use a different one, so I made that 10,002, just so we can run them both at the same time without it complaining that, "You know what?
1:01
This is, you know, I can't open a port here because something else is listening." So that's the two versions of the Python app running.
1:09
We also need to have ngrok to get to it. So I'm going to open up a new tab here and I'm going to put it at the bottom so we can see it side by side.
1:17
I'll say ngrok Like this, this is the one we've seen traditionally, what we've been using most of the time, this Kennedy CDN. And then same thing here,
1:27
and I'll drag this to the bottom, like so, and I'll say Ngrok, and we'll just listen on 2002. So this FA whatever, this is the original version,
1:39
and this Kennedy Talk, this is the thing that we've gotten to now. So let's open up that,
1:46
And over here, open up that, you can see the request coming in. Like if I refresh this, you'll see that one running.
1:54
And if we're over here, and I refresh this, not that one, this one, you can see it moving
2:02
a little bit, but there's a lot of traffic on the original over here.
2:06
See every request, do a hard refresh, you'll see a bunch of things coming in there.
2:11
over here, even if I do a hard refresh, it's just a forward slash, oh, and the favicon, which we don't have a favicon, so too bad.
2:21
Probably should add one just so we don't see those silly 404s.
2:24
But anyway, these two things are running side by side coming through the two different ngroks. Whew, that's a lot of setup, isn't it?
2:34
Okay, hopefully that makes sense. And remember this one with my name in the subdomain here, that one is the new fancy one.
2:43
This is the original one without any form of the CDN stuff. It's just got slash static. It's got the Google fonts.
2:53
All that's coming straight out of the website. Whereas this one, the CDN is going all those things.
3:03
So let's go and see if we can find out information about it being slow or fast.
3:10
Before we get to it, let's look at one that I'm pretty certain will be slow. Come over here to CNN. Make that a little smaller.
3:17
So over here, let's go to the DevTools. Now we talked about PageSpeed Insights, which is this website.
3:28
We can go and analyze it here and pull up the details for it. But that's also gone under the name Lighthouse.
3:36
So if you're running a Chromium-based browser, you can go to this Lighthouse tab and you can say I want to analyze for mobile or desktop.
3:44
For now we're going to do desktop. You can also analyze it for progressive web app correctness. There is no progressive web app that we built.
3:52
So turn that off. It'll just be like a zero out of 100. All right. So we hit this on CNN for now, it's gonna go,
3:59
look at that, 45 errors 'cause of all the trackers that we're blocking, terrible. Run this, it'll go talk to CNN on different types
4:10
of browsers, different capabilities, different networks with, without caching, all the things that it does. And honestly, that's a little bit better
4:22
than I expected out of CNN, but it's still really, really bad, right? Like even best practices in accessibility are bad, not just performance.
4:30
So, you know, it is what it is. So here's a big professional website that is a very important front end to a big company. Put a lot of time into it.
4:41
There's their numbers. So let's see how we can do with ours. When I first ran this and showed off how ngrok was working, ngrok was pretty slow.
4:51
But look at this right here, 84 millisecond latency. I don't know what they changed in the last couple of days, but it is way faster.
4:58
And so it's not, you know, there's a good thing in general, right? We don't want stuff to be slow, but for this example, it was nice that it was slow.
5:06
It's less slow now. So the numbers, I just can't get terrible numbers out of the original anymore, but we should see an improvement anyway.
5:15
So let's go over here to the DevTools for this particular one, and let's just run Lighthouse. Make sure you're consistent.
5:22
It doesn't really matter what you pick for some of these, but just be consistent when doing the comparison. And we'll say, analyze the page.
5:28
You see all the requests coming in on the left over here. Incredible. So came back with 99%. So like I said, they really made it faster and it's hard.
5:43
I'm gonna go and delete this and just run it one more time, delete the cache and see if that makes any difference.
5:49
But it's ranking quite high, which is really good, but thanks, ngrok. Thanks for setting us up like that. 93 it is.
5:58
Okay, so this is the original, right? Let's go to our fancy new version that we've got over here and do the same thing. Go to the DevTools.
6:08
Now, when I run this, you might say, "Well, 93, we saw 99." There's probably no difference. There's still a huge difference and we will see it,
6:14
but just not with Lighthouse yet, so hang tight. This one I would expect to be at least as good. Let's see what we got.
6:22
You do see some stuff coming through here, but really not much. Those 404s are the map lookup files, remember? Look at this, 99%, 100, 100.
6:36
Chef's kiss, beautiful. Let's just hit it one more time. 99. Okay, really, really good. I guess we could see where we could do better, right?
6:45
Down here we could scroll down to opportunities. We could improve the image size and eliminating blocking renders, which are our fonts, but
6:54
you know what? We want fonts and we want bootstraps. So sorry world, we're going to need it. Anyway, there's a couple of options.
7:02
You can come through here and make it still better. By the way, these numbers I got like a hundred for best practices.
7:07
That's not how it first came out, but then I went and looked and made it a little bit better before we started.
7:12
So some of this advice has already been taken by me before we got started. So here is how we can analyze this with Lighthouse.
7:22
We could cruise around the web and find some other places and test them as well, just to give you a sense. So let's try a place like Arstechnica.
7:33
Great website. I think this will probably be pretty good. Hit this one, see what comes out of it.
7:41
Yeah, this one's pretty good at 90, although we're still doing better. Let's try the Verge.
7:48
The Verge is, I think it's going to be less good, but we'll see. Take it back. The Verge is amazing.
7:58
So, you can go around to different places on the web and just run Lighthouse and get
8:03
a sense of like, these are the websites that I feel are really excellent when I visit them,
8:06
and these are ones that are poor, and you can compare your own website to it. But most important thing is, where did we start? Where did we end up?
8:15
Are we in a better place than we were before? And take the advice. When it has items down here,
8:21
you could look and say, okay, well, what can I do better? Properly size images. Sometimes you can do this, but you know what?
8:27
If it's a responsive design, well, can't really, like for example, see here, it's hard to see 'cause it's rapid, IMJ-responsive.
8:36
I'm not gonna set a fixed size on this because I want it to adapt. Like, quite literally, as it gets bigger,
8:44
Those images should get bigger and smaller as you can see. So the advice, it's not gospel, right? You wanted those to change potentially.
8:53
So you don't have to take all the advice, but do look at what it's recommending there.
8:57
A lot of times it's not obvious, something you haven't noticed before and it will make a big difference.