Q5: Resource Hints

[00:00:00]
>> Question 5, match the resource hints with their definitions. So we have dns-prefetch, preconnect, prefetch, and preload. And then prioritizes fetching of crucial resources needed for the current navigation, performs domain name resolution in the background, 3 is proactively performs DNS resolution and TCP/TLS handshake, or 4, requests non-critical resources in the background?

[00:00:28]
All right, let's look at the answer. So AS2 dns-prefetch performs domain name resolution in the background. Preconnect proactively performs DNS resolution and TCP/TLS handshake. Prefetch requests non critical resources in the background. And preload prioritizes fetching of critical resources needed for the current navigation. So first, when we talk about having an http request, it's not just a request and the response it also usually includes the DNS that we saw previously.

[00:01:00]
Also the TCP connection to establish the acts and all that stuff to establish that connection between the client and the server. And if it's secure, so if it uses https, it also needs to have the TLS handshake which basically ensures that both a client and a server have the same certificate.

[00:01:18]
This is that secure connection that we expect. Now with, or yeah, so whenever we don't use DNS prefetch and we're making a request to an external resource, it includes all of these steps. But with DNS prefetch, we can already say, hey, I know that this resource is pretty critical, I will use it.

[00:01:34]
So let's already perform that DNS resolution before I request the resource. So in that case, I only have to still do the TCP/TLS request and response. Now we can even go a step further with preconnect because that doesn't only use the DNS, or not just DNS, but also includes the TCP and TLS.

[00:01:54]
So in that case can be the connection is already there, you just have to use, or you just have the request and then the response. Now, it's important to remember that you shouldn't overuse DNS prefetch and preconnect because you're still establishing a connection. And they kind of all fight for bandwidth.

[00:02:17]
So if you're doing this it might happen if you're on a lower end device or poor network connections that you're preconnecting but then other resources might need to wait which actually return, or it's a worse user experience. Yeah, there's also a maximum number of simultaneous connections that a browser can have.

[00:02:40]
So make sure that you're only kind of doing this for external resources that you might need on initial load maybe. I don't know, like Google fonts, Google APIs, that kind of stuff. So the next one was prefetch which download resources ahead of time even if they aren't immediately needed.

[00:02:56]
So maybe in this case we have user interaction maybe they click on something, maybe they navigate to another page. And then it requests a very important resource maybe it's that in this case a picture of a dog that will get displayed instantly. So with prefetch we can already say, hey, I know that I will need this resource pretty soon or like probably.

[00:03:16]
So if it's possible, if you're idle and if you have an bandwidth and if the browser thinks, all right, I can just prefetch this resource, it's fine. It won't negatively affect the performance, it can already prefetch it and then store it in browser cache. So whenever we actually need the resource, it can just quickly get it from cache.

[00:03:35]
Again, important to remember that prefetch can be skipped by browsers if they feel they just don't have enough bandwidth or if the user has data saving mode on, all that stuff. So, yeah, then we have a more aggressive one which is preload. So normally whenever we have the HTML there is something called like a preload scanner or prescanner that browsers implement, which runs at the same time as your HTML parser.

[00:03:59]
So if your HTML parser is blocked, that prescanner can still continue looking through all the resources. And seeing, okay, I'm requesting images here, and links, whatever, it can already fetch all of those things. But that's only for your markup, and not for CSS, or maybe scripts that import other scripts, all that stuff, the preload scanner cannot see that.

[00:04:19]
But for example, in this case we have a background image like your image in the CSS and let's say that this background image is already displayed on the first page. In that case we can say the browser, hey, preload this asset I know you wouldn't have been able to see that yourself with your preload scanner.

[00:04:36]
So instead, I will tell you preload this because I will need it very soon after navigation. It's important to remember that this is only for very critical resources because your browser cannot ignore this. So it might easily lead to worse user experience because you're using a network connection for that preload.

[00:04:57]
And especially, also for mobile users, don't overuse it because it'll cost data, and that's expensive. So, yeah.
>> Can you explain the 'as' parameter (attribute)? Is that something?
>> Yeah, so I see like as image here, so you can have as image, as document I'm-
>> Multiple.
>> Yeah, I'm honestly not sure how this, I mean, I think it just has something to do with how your browser fetches, what kind of request headers to send.

[00:05:29]
I may be wrong here, I know that it does add some optimization stuff, but I'm not entirely sure how. But, yeah, so in this case we have the 'as="image"' cuz we're fetching an image. Otherwise, if you have HTML, you do it 'as="document"', all that kind of stuff.

[00:05:44]
But again, just important to remember the browsers are very smart, and they already do so many optimizations under the hood. So using resources like this can help, but don't rely on it as the sole, the only thing.