Preloading Resources

[00:00:00]
>> Speaker 1: All right, the second thing that we want to do here is around preloading resources, and it's gonna help us with this font problem. Preloading resources is around starting your critical path resources as soon as you possibly can. So the critical path, what resources do you absolutely have to have in order to render the page.

[00:00:21]
How do we get those started as soon as we can? In our case, we have this problem here, we have Google Fonts. Now Google Fonts when you go to Google Font, which is the most common way that people like reference web fonts, they pick out a thing and says, great, paste this in your in your document.

[00:00:37]
And what you paste in is the ability for you reference to a CSS file, and that CSS file points at the fonts. So that CSS file has to come down before those fonts can be loaded. So this is what that actually looks like. This is the little thing that you paste in from Google Fonts based on their recommendation.

[00:00:58]
And, the bottom thing here on line 13 is a link to fonts.googleapis.com/css2, and that's where we're actually getting it from. But it tries to optimize it a little bit, which these two link statements on lines 11 and 12. Link preconnect is instructing the browser to go ahead and try and start up a connection to those APIs or to those domains before you know that we need them.

[00:01:31]
So tries to do the overhead of like doing a DNS lookup and setting up a connection and figuring out what version of protocols it can talk to. Do all that work to fonts.googlepis.com and fonts.gstatic.com because you know you're gonna need it later so go ahead and get started.

[00:01:48]
Now that solves part of the problem. It like starts up connections but it doesn't actually tell it to go and get the files. If we want to actually go and get the files, we could do that. So there's another attribute called link preload. Now link preload allows you to basically instruct the browser to fetch something earlier than it knows about it otherwise.

[00:02:13]
If you know you need something if you know something is important, and this is gonna be blocking for your path, you tell the browser to go ahead and start getting it earlier with Link preload. And so in this little example, and what we're gonna do in a minute, I took the URLs of the actual font files and I just threw them into preloads.

[00:02:34]
Like, go ahead and get these particular fonts ahead of time. I know you're gonna need it. And what that's gonna look like here when we're done, is rather than those series of fonts waiting until the CSS file is done before starting, we can start them right away. Now it could still push things back, every request is different, but FCP has the potential to be quite a bit faster.

[00:03:00]
So what can we preload? Well, you can preload lots of stuff. You can preload styles, you can preload scripts, you can preload images, you can preload fonts, which is what we're doing. You can even preload a call to fetch. Before your JavaScript has like even woken up, you can tell it to say, hey, start fetching this resource and I'll dump it into your fetch later when your stuff wakes up.

[00:03:21]
Now the limitation here is that for fonts and fetch require you to add the crossorigin attribute to that link, which means it's gonna need the CORS headers, the crossorigin resource sharing headers. You have to be sure that the font or the API that you're calling, supports your ability to load these things from your website.

[00:03:45]
CORS is not within the scope of what I'm gonna talk about right here. But I imagine that you'll have a CORS that you can reference dynamically in after effects or in after editing, that talks all about CORS somewhere in the Frontend Masters catalog. All right, so let's take a look.

[00:04:00]
We're going to add a preload for some fonts. All right, so what we're gonna do here on www is we have these three requests here for the actual font files with these long, gibberish names. So I'm gonna copy all three of these URLs and we're gonna use them.

[00:04:23]
Now these Urls clearly are not meant to be human readable, which is an issue. There's no guarantee that these files in their current name is guaranteed to continue to work. However, this is gonna just be an example for us and I'm gonna show you more permanent way to do that here in a second.

[00:04:41]
Rather than doing these simple preconnects to these APIs, we're gonna do a link rel preload as a font. You have to specify what you're loading a thing as, and I'm gonna put this, rect font file in it, I'm gonna do the other two and I put them in my clipboard history.

[00:05:18]
>> Speaker 1: I think that's all three of them. All right, so now we've instructed the browser to go ahead and start loading all three of these as fonts ahead of time. All right, so I'm adding the crossorigin attribute to all three of those. And let's do that again. Cool, it didn't die that time.

[00:05:46]
>> Speaker 1: So now if we zoom in, you'll notice it's actually making the requests for those fonts before the CSS files. It discovers, hey, I need to do this right away, and it's making those requests. Now it knows the CSS files need to come down as well, but it's just limited by how much the browser can do at one time, and so when it hits its limit, it waits.

[00:06:08]
We notice that we're like, queuing and connecting to these things here. But what we did is we were able to flatten this entire structure by making all of the requests earlier, rather than waiting for us to discover it. Now, these fonts or these file names aren't guaranteed to exist, this is behind a couple of levels in Google's API.

[00:06:30]
And so Google could change the name of this file tomorrow, and it would break this pattern. And so you probably shouldn't do this. You probably shouldn't actually explicitly reference these Google generated font names in your stuff. Instead, you should probably just host these locally. You should take a copy of the fonts that you need and you should put them in your own source and just preload them from there rather than pointing at Google's version of them.

[00:06:57]
Your site, especially if you've optimized for TTFB and put it on a fast CDN, is probably just as fast as Google Fonts, arguably a lot faster. The response time I see from real users to Google Fonts is quite slow. I often see Google Fonts as like the long pole in the third party resources you depend on.

[00:07:18]
So pulling those fonts locally, highly recommend that.