Python Web Apps that Fly with CDNs Transcripts
Chapter: Integrating Static Content
Lecture: Faster still with preconnect tag
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Our app is so much better. But there's a few things we can still do to make it better still. And one of them is this thing called Preconnect.
0:12
You probably haven't heard of it, maybe you have. It's one of these more esoteric but powerful tags or features of HTML.
0:20
And the idea, according to the developer network over at Mozilla, a great place for HTML resources, It says you can use this as a hint to browsers
0:31
that the user is likely gonna need to talk to this location, that you put into the pre-connect URL. And therefore, if you can start the process
0:41
of resolving that DNS name to connecting to that server, so by the time a little bit farther in the HTML, you see I need to get an image or a CSS file
0:49
from that location, you already connected and most of the work is already done. So we can hint to all of our pages
0:57
that you're gonna want to connect to the CDN somewhere in this page. So please, as soon as you can, get going with that.
1:04
All right, let's put that in place. Now, the way I've designed this web application is if you look at say home,
1:12
what it's doing is it actually extends this shared layout. That way, when you look at the different pages, so for example, you look at this page,
1:22
it has this nav stuff over here. You look on this page, it has that nav. it always has the same footer, the same CSS, right?
1:29
We can just leverage that and say, you know what? This shared section over here, way up at the top,
1:38
we can come in and probably sooner is better than later. I put a comment to remind myself there's a good spot. Let's put this pre-connect here
1:47
and instead of example.com, we're gonna connect to that. That's the CDN. Again, if this was your subdomain,
1:56
you would put your pre-connect for the subdomain there. Now, I don't like this having these weird colors, so I'm gonna tell PyCharm it can download it.
2:03
In order for this to work, you have to have ngrok running and you have to have the site running. So, that's how it loops back
2:11
to actually figure out what this is. So I'll say download, although it may not be necessarily the second time because it's cached, you know?
2:18
But I'll just do that to make these warning looking things go away. Now, let's just run this and make sure there's no warnings anywhere.
2:27
Remember, in order for changes to the HTML to apply, you need to restart it. Probably some flask setting I could set, but I didn't.
2:37
Now, also, it opens here, but let's not do that. Although that did do the pre-connect, let's just kind of make a habit of using the ngrok variant.
2:48
So there it goes, and we click around a little just to see that, yeah, this is a pretty zippy web app already.
2:55
And let's pull up the dev tools and just check and see that there's no warnings in, say, the console.
3:03
Now, this is not a big deal. It's just looking for a lookup for the minified JavaScript.
3:09
So these we can ignore. I don't like seeing them there, but I don't really have the map files to share, so there they are.
3:15
But there's no other warnings other than this, like we're missing some debugging stuff for some of our external JavaScript files.
3:21
Yeah, it looks great, right? It looks like there's no errors and our pre-connect is in there. Pull up the page source and sure enough, there it is.
3:30
Yeah, that's the one. Oh, one more thing I did notice here just now. I didn't check this on the pull zone. This is important.
3:37
Notice we can visit this and actually get the whole site. That's not great for SEO and canonicalization and stuff.
3:43
So let's go back to our pull zone really quick here. And it was a security, yes, block root access.
3:51
Okay, so we don't want them to be able to pull up that site and get to something like this. Let's try it again. Here we go. Hard refresh, forbidden,
4:01
'cause I told it to cache that for three months. So nope, it can't go here, but you can go to static/images or anything else under there, right?
4:11
So you wanna make sure that people can't navigate through the CDN and get a clone or a copy of your website. So make sure that, go to security
4:19
and say block root access. Here we go. All right, Preconnect, making things even a little bit faster.