Python Web Apps that Fly with CDNs Transcripts
Chapter: Welcome to the course
Lecture: Not just optimizing server-side
0:00 The easiest place for us to optimize our code is that server side Python. After all, that's what we consider the heart of our application to be.
0:10 So we do our database queries, we check user privileges, we do basically most of the work of our app on the server side.
0:18 And yes, that cannot be slow, or we're going to pass that slowness on to the user. And that's not going to be great.
0:27 But it's not just about the server side code. As you saw with 109 requests, that's one of the things that affects how users perceive
0:35 our code and perceive our web app to behave. But it's also about how do those images show up on the page? How does the CSS work together?
0:51 So for example, let's look at a somewhat terrible web application, CNN. Why is it terrible?
0:59 this thing, it packs so much junk onto it. There are 43 different trackers, 43 different
1:07 tracking tools and applications they put on you when you visit here. So it really puts
1:12 a load onto your browser trying to like do all that tracking on behalf of all these different
1:19 companies plus just their web app running which is kind of intense. However, they are
1:23 very impressive in one way. If you look at that response time of this page, 40 milliseconds
1:29 from end to end all the way to my browser, that's fantastic. So they might be feeling
1:35 pretty good about this, they might think, Oh, look how fast our code is. This is amazing.
1:39 We've done a good job. But there are tools we can use to actually ask what is the perceived
1:46 experience of a user of our web application? If they're using mobile, how do they perceive If they're using a desktop browser, how do they perceive it?
1:55 They're far away, if they're on a slow network like a cellular network versus a fast gigabit one, whatever. So that's very hard for us to test.
2:06 But luckily, we've got some tools. Google came up with this thing called PageSpeed tools or PageSpeed insights.
2:15 And you can go to their link here and say analyze with PageSpeed insights.
2:21 Give it the URL to one of your pages and it'll do a bunch of analysis and say how does this look to somebody on a 3G network?
2:28 How does it look to somebody on this type of browser or on this type of computer? And it'll give you a report. That's great.
2:35 One of the drawbacks of this is it can only access public pages. It can't access, you know, for example, a talk Python if you're taking a course, the
2:45 course listing page that you have to log in and own the course for, it can't analyze that.
2:50 Plus you've got to wait for that thing to run on the server and all that.
2:54 So there's actually a built-in version in many of the Chromium-based browsers. This is Vivaldi.
3:01 And if you go to the DevTools here, you can see in addition to the network tools we saw, there's Lighthouse.
3:07 Lighthouse is the code name that preceded PageSpeed Insights. So this is the same basic thing, okay?
3:14 If we look at CNN with PageSpeed Insights or Lighthouse turned on, maybe the folks over
3:21 at CNN aren't feeling so smug and happy about how they built their code because the performance
3:27 is poor, the best practices are poor, and see the 31 errors on the right there?
3:34 That's because Vivaldi plus my network DNS blocker, NextDNS, all of those are prohibiting
3:42 many of these tracking tools from getting in. So they're kind of crashing. This would
3:46 actually look worse if I let all those trackers run as well. But even without them, even with
3:51 all that blocked 70% performance, that's kind of okay. I don't know. It's not that great.
3:58 50% best practices. You know, even SEO is not that great. So we're going to use this
4:04 lighthouse in addition to the network tools to really understand like, is our app behaving
4:10 Not just for me locally, because things are always fast when they're local, but how does
4:16 it look for somebody on a slower computer, on a different kind of browser, on somebody far away, on this type of network or that.
4:22 And we want these numbers to be green at least, and clearly they're not yet here. But it doesn't have to be.
4:31 I talked about those 109 requests over on the course catalog page. Look at this. We got 97 perform.
4:38 100% accessibility, 92% or 92 of 100 for best practices and 100 for SEO.
4:47 I'm sure that CNN spends more on their data centers, more on their delivery and more on
4:52 their technology by a factor of a thousand than I do on this page. And yet here we are running incredibly fast.
5:00 Part of this has to do with writing good code that communicates back well and the other part is using a CDN that really delivers things ultra quick.
5:09 So you want yours to look like this, not like that. We're going to start out with an app that is slow like the CNN one, but throughout this
5:19 course we're going to make it a lot faster and you'll be able to take those ideas and
5:22 apply them to your own existing web apps or new ones you're building.