Python Web Apps that Fly with CDNs Transcripts
Chapter: Checking your work: Performance testing
Lecture: Testing with network tools
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
So it looks like, yes, we have made an improvement, but it wasn't major, was it? Well, in fact, it was a major improvement.
0:09
It's just not entirely obvious within the scales that Lighthouse was giving us. Let's go into, let's say this Python,
0:17
we'll go to the Apple, Apple category, that's a good one. And we'll do that for both sites here.
0:22
And we've got all of our thumbnails and that type of thing. So let's just say we're gonna look at this page.
0:30
If we analyze the lighthouse one more time, we see 98 for the original, and we see 99 just ahead for the improved version.
0:44
But let's see if we can check it out from another perspective. How fast did this page load? So if these are gone,
0:53
and I come over here and I click away, and I click back, kind of, you can sort of see it clicking in. This is the original, right?
1:01
You can see it clicking in. Let's try it for the one on the CDN. Click away, click in. Click away, it definitely feels faster,
1:10
but let's put some more numbers to that. Let's go over here and let's go to the DevTools here and back to the DevTools here and go to the Network tab.
1:20
Okay, let's start with Disable Caching. This will show us what it feels like for the very first request.
1:26
and I'll go ahead and move that up quite a bit. So if we hit this here, notice it loaded within processing everything
1:40
about 450 milliseconds for total load time. And if you actually look at the DOM content loaded, 280 milliseconds, okay? That's the new version.
1:51
Here we do the same thing. See, it's clicking and clicking and look at that, 1.2 seconds or 1,200 milliseconds. That's three times slower.
2:04
So the first experience when you first land on the page, right, that's your no cache. I just discovered this cool new website
2:13
and somebody linked to it. So I just clicked here and visited it. Like what is your experience? That's this disable cache story.
2:20
So this is 1.4 seconds or if you totaled The total DOM content loaded is just over a second. And this one, do the same trick. Click away, click back.
2:32
Here we go, 348. So three times better for first run experience. And if we leave the caching on, which is every subsequent interaction after that,
2:43
come down here and click it again, come over here and click it again. Notice this is 391. I guess I gotta do it one more time
2:54
really get the cache in, so. There we go, this one is 660 milliseconds. We hit it a few more times, five, get that tooltip away,
3:05
592, 585, 578, that's 599. So around 600 milliseconds is the cached experience, like the warmed up website experience for a user on our original one.
3:21
So that's what we started with is 600. And how are we doing now? Let's see. Hit it again. 333, 336, 332, 238, 237, 237 compared to 600.
3:39
Again, this is about three times better. Not quite, but really, really good. So I'm super happy with the progress that we made here.
3:50
And moreover, as we have larger and larger content, we have more results, obviously these improvements are going to make a bigger difference, right?
4:00
So as we have like pages with more videos or more images or those types of things, and it's going to take a lot of load off our server.
4:09
And you can see that absolutely over here. So if I just clear out the one on the left is the old school and the one on the right
4:15
It's the new school and I come over here and I just click the homepage.
4:21
On this one, there's this stupid debug map, which actually, let me turn off the dev tools here. Click it. What do we get? We just get this.
4:35
So with the dev tools turned off, it's not trying to pull the debug information. How much traffic did that put to our site? Very little, right?
4:43
just got the HTML, none of the other stuff. If we do exactly the same thing on that side, I just click here, look at all that traffic,
4:53
all that stuff that is hitting our website. So it's not just that it's a better experience, it means that we can possibly pay a third
5:01
of the price for infrastructure. And if we were farther away, remember the ping time down here is like 88 milliseconds, so great.
5:10
If somehow I could arrange it so that that ping times 800 milliseconds, then you can bet that light speed scale is going to change and the performance
5:19
difference is going to be way bigger. And that is exactly what happens when users are farther away from us.
5:25
So it's a little tricky to simulate things that are out of your control here, but that's the idea, right?
5:32
Test it with Lighthouse, test it with the network tools, test it with caching off, test it with caching on and see how things are working.
5:40
but also don't underestimate like that amount of work versus all the work over here. Like that's a lot more requests
5:49
that the website has to do to support your clients. And that means bigger machines, more expensive machines, possibly more complex infrastructure
5:59
'cause you might need more than one and so on. So tons of benefits we got. And in the end, it turns out to be about three times faster
6:07
from this still pretty good local version. version, but again, the farther you get away, the better the CDN version is going to turnout to be.