Python Web Apps that Fly with CDNs Transcripts
Chapter: Welcome to the course
Lecture: Not just optimizing server-side
Login or
purchase this course
to watch this video and the rest of the course contents.
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:46
Is there JavaScript that's running a lot of times? So there's a bunch of different things that take effect.
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.