Hint, Hint, Font Loading Matters!
CC Attribution 2.0 Belgium:
You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor.
Karamalegos, Sia
We all love fonts. From Google Fonts to Typekit, Hoefler&Co and more, they give character and tone to our websites. The down side of fonts is that they can really slow down our loads. In this talk we'll learn about common pitfalls like critical requests depth and how to use resource hints to play tricks with latency to load web applications faster. We'll walk through a network profile to understand what's going on in the browser and how to make it faster.
 We have a developer coming into the performance. It's super interesting, I think. And she will talk about fonts. Yes? So, go away. Carry away. I'm sorry. I thought you wanted me to go away. No. I can't. No, go ahead. I'm sorry. I can't. Hello, everyone. How are you doing? Are you excited? I'm excited to talk to you about fonts. My name is Sia Caramelagos. It's a very long Greek name. Actually, that's not even all of my name. But I am a web developer and performance engineer. I like front-end. I end up still having to do full stack, sadly. But it's all right. I live in New Orleans. This is me at Mardi Gras. But that's enough about me. You're not here for me. I'm also a Google Developer Expert in web technologies. And I come more from the industry side. So I teach at conferences. I teach workshops on performance. But I also actually build web applications. And web really is my bread and butter. These are the slides at bit.ly-perf lowercase. You can find these slides so you don't have to scramble to copy anything down or take screenshots. They are deployed in the web. So all of these links are clickable. Yeah. You ready to get started? So I want to pull the audience really quick. How many of you are super passionate about web performance? And you're like a wonk. You're really into the weeds and the tech. There's a lot of you here. How many of you are, you think performance is great and you love it. But you're a developer and you're still learning. You're in that process. Yay. There's lots of you. How many of you are curious but not yet convinced that performance is important? Okay. And the rest of you, why are you here? I just mess with you. That's good to know. I like to know my audience because I'm going to adjust this a little bit. I don't think we need this section because I think most of you care about performance. So we're just going to jump right in. But what about typography? Because I'm talking about fonts here. So I'm just going to take a super quick side thing and talk about typography. So typography is what language looks like. It communicates. Content is king, like the words are king. But typography still makes a difference. And if you don't understand that, let's look at these few slides. So think to yourself, what does this evoke in you? I'm going to go back and forth. It's just one word, hello. Oops, wrong way. Versus this. What are these things about different feelings in you? Maybe this one's like, it's more out there. It's friendlier. It's open. It's trustworthy as a slab font. The next one is maybe a little quieter. But it's also all cats. It's a little confusing. Is it yelling at me? But it's italicized. I know most of you are not Americans. But these fonts, this is all the same word, right? New York, New York, New York. I feel like I should have started singing this song. But each of these evokes a different feeling at me. Because I'm also, it's like brand recognition. So it's associated with the publications that they are from. Or the sports teams they are used for. So typography is still important. But when we talk about fonts in action in the web and typography, what annoys you? I like to be interactive. So I want you to shout things at me. What is something that annoys you about fonts and performance in the web? They are slow. When they're slow, right? What else? Special characters. Yeah. You need to load them in a sequence. Yeah, yeah, yeah. There's different loading issues. I'll meet you in a second moment. Swapping fonts. Swapping fonts. And what else about swapping fonts? There's something that really annoys me. What? The flash. But also, especially when it moves everything. You're like, oh my god, I was halfway down this article and I have no idea where I am anymore, right? Like, that's annoying. So I'm a web developer, but I'm also very concerned about user experience, which is why I love performance. Because I want the users to be happy when they visit a page and not feel like it's annoying. So let's jump right into case studies. First, I'm going to talk about web fonts. So like Google Fonts. How many of you use Google Fonts or something similar? Yeah, we all love them. Yay. So web fonts. They're hosted on fast and reliable CDNs. They also have optimized variants. I don't know if you know this, but for example, with Google Fonts, I think OpenSense has at least 30-something different variants that optimize based on a user's browser. So, because I don't know if you know this either. But this is the joy of web development, browser differences, right? So like Safari is not going to render fonts in the same way that Chrome does. So this can be a little annoying. So it's nice when you use these CDNs because they can, you know, they can actually serve a more optimized font for that user's browser. This should be an air-quick opportunity for shared caching. We'll get back to that in a little bit. But we now have control over FOOT and FOINT, a flash of unsalitex and flash of invisible text. And we'll talk about that a little later. What are the downsides? There's a minimum of two separate requests. I'll talk about why. We're going to jump right into that. You can't use resource hints. If you don't know what those are, it's all right. I'll tell you what they are. And it can't take advantage of H2 multiplexing if the server can even prioritize it right. And luckily, right after my talk, Robin's going to dive deep into a lot of H2 issues and other things. I know the font's a little small on this, our screen's a little small, but this is a network profile. I'm assuming most of you have seen a network profile. I mean, if not, you know, it's okay. We'll learn here. So what's in this first line? What's the first line always, anyways? What file is that? It's like the page, right? The second file, you can't read it. I'll just read it to you. It says style.css, right? What do you think that is? File sheets, yeah, I know. That was a trick question, not. The third line, it says fonts.googleapis.com.css. What is that? It's that call. It's what you copy-paste from Google Fonts into either the head or into your style sheet, right? But what kind of file is that? It's a CSS file, right? It's not the actual font. The CSS file does, have you ever opened it and looked at it? It does all the font-face declarations, and then after that, it calls out to fetch the fonts. So what do you think those last two lines are? The fonts. Does this look efficient to you? What's going on here? Does anyone notice a big glaring issue of what's going on here and why I might have made this slower than it needs to be? So we have, remember, index, the CSS, my font CSS, and then the fonts, that's the order. So what's going on there? Yeah. Sorry, camera. Why is this starting here after the CSS? Because I called it from my CSS. Have you ever actually, I'm going to break all these rules about the video, sorry. I am calling the font from your style sheet, because you're going to get those two options. Sometimes it's easier to do this. Maybe you're working with a framework or a tool, and it's easier to drop your font call in your CSS, but you're paying a performance price. So what's one way we can fix that? What's one way that we can make it start loading right away? Put it in the head of the HTML. So when we put it in the head of the HTML, this is what happens. So we've, we've scooched it over some. We don't have to wait for the CSS to be downloaded and the CSS some created and then call our, finally our CSS for our fonts. We can put it in the head and it will start downloading that font CSS style sheet right away. But what, but there's more things we can do here to make this faster, right? What do you notice about, you can't read this, but it says fonts.googleapis.com, and then the actual font lines say fonts.gstatic. You can't see the rest of this, but it's.com and then there's a long hash for the font. So what's happening here? Yeah, but didn't we just make a call to, to Google? They're on two different domains. So the style sheet and the fonts are on two different domains. So what do we have to do? Yeah, oh yeah, we'll talk about the font hints. But so the browser has to start up a connection to that separate domain, but it won't do that until it knows that it has to reach out to that domain. So we have this wasted time again from doing this connection. We know we're going to do this connection, but we don't know until after that style sheet is downloaded and the CSS song is created so that it knows. So resource hints are our friends. We're going to focus on these middle three. This is a nice little handy thing I got from one of Addy Osmani's tweets. He was a performance engineer at Google. I think he's on a different team now, but he has some great stuff. So pre-connect, preload, and preflight are really fun resource hints. We'll talk about DNS prefetch also, but first we'll talk about the others. So what pre-connect does is it can warm up a connection for you. It can do all the steps of warming up that connection for you and just have it waiting for you in the background, but there's a time limit on it. So if you don't think that you're going to access a domain until later, what you can do is instead do DNS prefetch it just does a DNS part. So at least it negotiates that time, but a pre-connect will do the rest of the connection as well. But it's time sensitive. Preload, what preload does is it tells the browser, oh hey, I know I'm going to need this file soon. Download it now. So normally browsers are smart. They're not going to download a file until they know it's necessary when we're talking about fonts and similar. So it's not going to pull it down until it knows that you have the matching characters and that you're using the font on that page based on the CSS. But preload says, hey, I'm going to just go ahead and download it now because I know I'm going to need it later, even though you don't know it yet. Pre-fetch lets you put things in your cache for future use. We're not going to talk about that in here, but just so you know. So what can we do? Actually conveniently on this slide, that code snippet is exactly what you would use with Google Font. So what it says that is, I want you to warm up the connection to fonts.gestatic.com now. And so if we just put that in on the head of our HTML with our call to our style sheet, then that connection will start to warm up and you can see it down here. You know, it's kind of just like on its own, hanging out here before the actual fonts are downloaded. So you just copy that line directly in there and that does a pre-connect. And so now we've made our site faster by just doing these little kind of tricks. Like the code isn't significantly different, but you can actually make a pretty good chunk of savings just right there. Let's talk about self-hosted fonts. So these are fonts that you host, you know, on your domain. So you might call them in your head like this, preferably in your head, because then you know you don't have the same problem as before when we call it from our CSS. So this is my waterfall. What's on the first line? The page itself, right? The second line is my style.css. That's also where I have my font face declarations. And then what's going on with those last two lines? It's the fonts, right? But like what was one of those, do you remember what I said earlier? There's a hint that can say, oh hey, hey browser. Pre-connect is for the connection. This is our domain, so we don't need to do any extra connections. Preload. So what we, oh sorry, I forgot the mic was there. So what we can do is we can say, hey browser, I'm definitely going to use this font. I want you to download it earlier so I don't have this longer time of waiting. Because you know what else is happening? What happens while that font is downloading but it's not yet loaded? What does the page look like? It depends on your font display settings, but it's either going to be invisible or it's going to be a different font until that loads. Yeah. I call it FOOT. Other people say FOUT. Good thing we're not talking about content. So what we can do is we can preload. And the only thing I've added to these lines here is this rel equals preload. And then what can happen now on supported browsers is that those files will be downloaded right away. Any file I put link rel preload on there. So with great power comes what? Great responsibility if you watch a superhero movie. And so we don't want to abuse this, right? We only want to do this when we're actually going to use, we're definitely going to use the file on that page because we don't want to abuse our user's data plans. And also I suspect, is it the next slide? I suspect that's why this has happened. I don't know. Does anyone know anyone on the Firefox team? So on Firefox preload used to be supported. And now it's not supported. It's like behind a flag. So I would really be curious if anyone on the Firefox team, please, oh my Twitter handle is the green Greek. Please let me know what happened there. My guess is because maybe they are concerned about the users and kind of people abusing these privileges. So make sure that you don't abuse this privilege, but it will work in all the other modern browsers. So remember when I said shared caching of popular fonts, I used to say like, you know, if you're using Open Sans or Roboto, don't just do it directly from Google Fonts. Oh, don't ever try to just copy the hash of the font itself. There's a hash. So don't try to copy that whole URL because those are changed often and they'll just disappear. So you never want to do that. But shared caches go anyway. So now you can contemplate whether it might be a good idea to download the font and serve it locally, even if it is a Google font. You'll lose some of the other benefits like the variants and stuff like that. But because of double key caching, and I don't know if anyone's going to talk about this later, but shared cache is not really a benefit anymore. Let's talk about font rendering. So remember when I said, Foyte and Foot or Fout. Foyte is on this page. Oh, I know it's a little hard to see. This is, I have a screenshot of performance happening. That's what's over here on the right-hand side. And this is the page itself. If you look at the page itself, you can see there are actual words in my nav bar. But if you could see this screenshot better, the projector is a little bit dark. There's no words in my nav bar. There's no words in my button. It's annoying, right? That's a flash of invisible text. Does anyone know why that's happening? This was using Google Fonts. Does anyone know why that was happening? Yeah, yeah. So the default for Google Fonts on their font display property was display swap. So that means that it's going to show the fallback font for up to three seconds, and then it finally will switch to the web font. So it won't, I'm sorry, it will block it. It won't show anything at all for three seconds. And then it will show the fallback, and then it will show the web font. And so this was annoying, right? Like you couldn't, you had no control over this before. But now you have control. With the Google Fonts API, and now by default it has this part of the URL in it. If you just add and display equals swap, you will get display swap. And what display swap does is instead of making it invisible, it will show the fallback font until the web font is loaded. And we're going to kind of see a little bit of this in action in a minute. So that's really cool. If you have legacy apps that use Google Fonts, you can make them use display swap if you want. All you have to do is add that last part of the URL. You don't have to go in and re-copy your URLs. You just add the query at the end. So, that's not to play. So, flash of unstyled text, right? That's this change here. That's annoying, right? I mean, sometimes it's more annoying than others. If we think about what's happening here, I mean, this might vary by user. I feel like we used to match fonts based more on style. But if I am, for example, reading a blog post or an article, the thing that's going to annoy me more is layout shift. So, once that font comes in, if I'm on a totally different paragraph when it comes in, for me as a user, that's going to annoy me. So, for me, I, I guess, recognize the intent of this quote. The style doesn't matter so much as it has to flow the same way. And so, there's some great tools that we can use, like font style matcher. And I'm going to actually go to this. And so, what you can do is you, let me zoom in so you can see this a little bit better. You can put, it automatically has Google Fonts available here, but you can also upload your own font. And so, I've uploaded this font, and I'm going to tell you more about that font. And what my fallback font used to be was Arial. So, if I go down here, you can see them overlapped. We can use a different color for each font. So, Arial's red now, and then you can see an action, like the shift that happens. So, I have this, this is actually a variable font. I'm going to talk about that in a minute. So, we can see what happens, and what we can do is we can adjust properties. For example, like font size, Arial, if you look here, it just is a little bit smaller. So, I could like bump up the font size, and I could basically provide an entire fallback font and change things, change which one is used based, used on JavaScript. I prefer not to do JavaScript. So, what I did is I put in some other Web say fonts in here, and I found that Verdana, I actually don't know how to pronounce that, Verdana, Verdana. Just so you know. I put that one in, and it matched a lot faster. But you can actually get super close on some fonts, and then maybe you realize you don't actually need your Web font. But at least here, the size of the font, the line height, and the letter spacing really closely matches. So, it makes a really great fallback font for me, because I don't want the extra JavaScript on the page just to load a separate font style as well. So, that's a great tool to keep in your back pocket for having to deal with the swapping fonts. How many of you have used variable fonts before? I figured I would go into this a little bit, because they're fun and new, and they also present some challenges for performance. So, we are going to, we don't have slides for this, we're just going to do this. I started playing with this variable font called Recursive. They have a really cool website. And it's a highly flexible new variable font. What I should do is go to Firefox. When was the last time you used Firefox DevTools? Yesterday. Oh, yay! Someone was actually using it. So, I do use... Okay, that's fine. I do use Chrome mostly for performance, but Firefox has... You know what helps to do before you're a talk? Get on the Wi-Fi. It helps. Actually, I think I might be... Hold on. Yay! All right. So, if I go into... Actually, did I inspect that one? I was just doing it randomly. Let me inspect. What's really cool about Firefox DevTools is they have this whole fonts panel over here. I wonder if I can zoom in that. So, if you look here, we're going to play this... So, you can see what this particular variable font will do. I mean, you can play with standard things like size and line height, which is kind of cool, and letter spacing. Oh, that's terrible. But it also has all these special things that are just for this particular variable font. So, what does this variable font do? Right now, it's on not MonoSpace, but this font actually can be MonoSpace as well. So, I like to use my blog as my playground, and so I'm using this variable font so I can use, oh, this is my coding font too, and then, you know, my body text is going to be that. And then, it's called Casual, but I call it Sassy versus Not Sassy. Right now, I think that's Sassy. Here's Not Sassy, and then here's Sassy, AKA Casual. Weight, so look at that. It's like a smooth transition. I can, like, choose any weight in there. That's pretty cool. So, instead of, like, downloading, you know, you have to download your 700 weight, your 800 weight, like, if you want heavy bold or your lightweight, you could theoretically just have all your weights in one variable font. And then, you know, there's a lot of things that are actually slant, like italics. There's actually, slant and italic are two different things. Italic actually changes slant features as well. So, Firefox, that's one lesson from this. Firefox inspecting fonts are really great. Actually, CSS Grid and other inspect element things are really cool there. So, that's a variable font, an intro to a variable font. But how many codes do you have? How many kilobytes do you think are loaded when you do, like, a regular font? Has anyone, like, looked at that? How many kilobytes do you use? Yeah, so I feel like, you know, like, per style that you use, because it might be, like, it's like 400 weight regular. Would be maybe 15 to 20 kilobytes, or up to 30, it depends on really the font, or in what subsets you're using. Like, it's just, you know, Latin text, or is it others. And so, so maybe you have, like, maybe, let's say you have four of those, because you're doing, maybe you have two different fonts, and you have two different weights. That's conservative, that's like 80 kilobytes, maybe. So, my basic English subset was 130 kilobytes. It's a variable font. Like I said, this is my blog, so I get to play with things. It's okay if they're a little bit bigger. So, what happened was the designer came out with a new version. And he wanted me to deploy it, but it was like 400 kilobytes. And I was like, hmm, I'm a performance engineer. I don't think I should do that. So, we started playing with performance more. So, if we have things like variable fonts, what are some other things we could do, perhaps? Do you have any ideas? I mean, I don't know if we have this all correct, but what do you think we can do? There's another thing I haven't spoken about with fonts that you can do. Yeah. So, you probably remove large parts of the glyphs that you don't use. Yeah. So, sub-setting. Well, we can sub-set based on character codes. Do you know about this inside your font? I don't know if you've played in font display properties. We're all developers. Most of us are developers in here, right? So, it's like, we don't often play or learn all the CSS things that maybe we should. But let me zoom in a little. I was going to show you the difference with, for Donovan. It's fine. We made more subsets. And so, most of my website is in basic English characters. And so, you can put a Unicode range in your font face declarations. And it knows to use this font for this Unicode range. And this is the only one that I preload now. I don't preload the rest. And then the others will only ever load if they're used on a page. So, like I have, yeah, some diacritics and some other things, some symbols and extended fonts and a special font just for my first name because I made it the super heavy weight. So, that's the path we chose. There's also tools you can do to sub-set your fonts if you want really aggressive sub-setting. It's actually called sub-font. I think I have a link to it in the back of this. But if you want to look at sub-fonting, not just for variable fonts, for any fonts, you can look at this tool called sub-font. I forgot the developer who wrote it. But it kind of gives you a whole set of tools for setting up your fonts in a more performant way. So, yeah. What's really cool about preload, which I forgot to mention because I wanted to show it to you live, is that often what happens is we can beat the rendering path. When I reload does, it automatically, we put in our head that we're going to use the font and I want you to preload it. I want you to load it now. So, what we can often do is, the only what happened there when I reloaded, did you see that? I should slow it down. There's only one thing that happened there that you could visually see, right? Oh, not slower, so I did that. But on a faster connection, what can often happen is we actually skip that fallback time. I do have a display swap on my name because it's branded. So, like, branded things, you might want to keep swap because you don't want to see the ugly font on your brand. But, yeah. So, if I go to Firefox, right, which doesn't do preload, you need to disable the cache. This one has a much bigger layout shift. So, more resources mentioned. I do have a short article. It's a little bit data now, but it still works. If you want to learn how to self-host your Google font, there's a little tool you can use in there and the steps involved. Also, when you're looking at things like, I didn't mention this in this talk specifically, but you can pull your data into can I use. Like, if you use Google Analytics, you can pull in that data and you can see, like, you know, for my particular users, is this feature going to be supported, like, for example, preload. Most of my users for one client are on Safari, so it's supported. Thank goodness. I'm going to use the font tool I mentioned, which you can use for any type of font. So, thanks for coming to my talk. Again, the slides are at Bitly font perf and writing resources more, cio.codes. You can find me at the green Greek. We will, I guess, we'll take a few questions. I prefer offline questions, though, so feel free to come up to me later. I'll be in this room for the rest of the web perf thing, so in the breaks and I'll be back afterwards if you want to, you know, reach out to me and go out there. You can also DM me on Twitter or just mess or at me. So, thanks for coming to my talk. Thank you, Cio. Thank you.
 We have a developer coming into the performance.  It's super interesting, I think.  And she will talk about fonts.  Yes?  So, go away.  Carry away.  I'm sorry.  I thought you wanted me to go away.  No.  I can't.  No, go ahead.  I'm sorry.  I can't.  Hello, everyone.  How are you doing?  Are you excited?  I'm excited to talk to you about fonts.  My name is Sia Caramelagos.  It's a very long Greek name.  Actually, that's not even all of my name.  But I am a web developer and performance engineer.  I like front-end.  I end up still having to do full stack, sadly.  But it's all right.  I live in New Orleans.  This is me at Mardi Gras.  But that's enough about me.  You're not here for me.  I'm also a Google Developer Expert in web technologies.  And I come more from the industry side.  So I teach at conferences.  I teach workshops on performance.  But I also actually build web applications.  And web really is my bread and butter.  These are the slides at bit.ly-perf lowercase.  You can find these slides so you don't have to scramble to copy anything down or take screenshots.  They are deployed in the web.  So all of these links are clickable.  Yeah.  You ready to get started?  So I want to pull the audience really quick.  How many of you are super passionate about web performance?  And you're like a wonk.  You're really into the weeds and the tech.  There's a lot of you here.  How many of you are, you think performance is great and you love it.  But you're a developer and you're still learning.  You're in that process.  Yay.  There's lots of you.  How many of you are curious but not yet convinced that performance is important?  Okay.  And the rest of you, why are you here?  I just mess with you.  That's good to know.  I like to know my audience because I'm going to adjust this a little bit.  I don't think we need this section because I think most of you care about performance.  So we're just going to jump right in.  But what about typography?  Because I'm talking about fonts here.  So I'm just going to take a super quick side thing and talk about typography.  So typography is what language looks like.  It communicates.  Content is king, like the words are king.  But typography still makes a difference.  And if you don't understand that, let's look at these few slides.  So think to yourself, what does this evoke in you?  I'm going to go back and forth.  It's just one word, hello.  Oops, wrong way.  Versus this.  What are these things about different feelings in you?  Maybe this one's like, it's more out there.  It's friendlier.  It's open.  It's trustworthy as a slab font.  The next one is maybe a little quieter.  But it's also all cats.  It's a little confusing.  Is it yelling at me?  But it's italicized.  I know most of you are not Americans.  But these fonts, this is all the same word, right?  New York, New York, New York.  I feel like I should have started singing this song.  But each of these evokes a different feeling at me.  Because I'm also, it's like brand recognition.  So it's associated with the publications that they are from.  Or the sports teams they are used for.  So typography is still important.  But when we talk about fonts in action in the web and typography,  what annoys you?  I like to be interactive.  So I want you to shout things at me.  What is something that annoys you about fonts and performance in the web?  They are slow.  When they're slow, right?  What else?  Special characters.  Yeah.  You need to load them in a sequence.  Yeah, yeah, yeah.  There's different loading issues.  I'll meet you in a second moment.  Swapping fonts.  Swapping fonts.  And what else about swapping fonts?  There's something that really annoys me.  What?  The flash.  But also, especially when it moves everything.  You're like, oh my god, I was halfway down this article  and I have no idea where I am anymore, right?  Like, that's annoying.  So I'm a web developer, but I'm also very concerned about user experience,  which is why I love performance.  Because I want the users to be happy when they visit a page  and not feel like it's annoying.  So let's jump right into case studies.  First, I'm going to talk about web fonts.  So like Google Fonts.  How many of you use Google Fonts or something similar?  Yeah, we all love them.  Yay.  So web fonts.  They're hosted on fast and reliable CDNs.  They also have optimized variants.  I don't know if you know this, but for example, with Google Fonts,  I think OpenSense has at least 30-something different variants  that optimize based on a user's browser.  So, because I don't know if you know this either.  But this is the joy of web development, browser differences, right?  So like Safari is not going to render fonts in the same way that Chrome does.  So this can be a little annoying.  So it's nice when you use these CDNs because they can, you know,  they can actually serve a more optimized font for that user's browser.  This should be an air-quick opportunity for shared caching.  We'll get back to that in a little bit.  But we now have control over FOOT and FOINT,  a flash of unsalitex and flash of invisible text.  And we'll talk about that a little later.  What are the downsides?  There's a minimum of two separate requests.  I'll talk about why.  We're going to jump right into that.  You can't use resource hints.  If you don't know what those are, it's all right.  I'll tell you what they are.  And it can't take advantage of H2 multiplexing  if the server can even prioritize it right.  And luckily, right after my talk,  Robin's going to dive deep into a lot of H2 issues and other things.  I know the font's a little small on this, our screen's a little small,  but this is a network profile.  I'm assuming most of you have seen a network profile.  I mean, if not, you know, it's okay.  We'll learn here.  So what's in this first line?  What's the first line always, anyways?  What file is that?  It's like the page, right?  The second file, you can't read it.  I'll just read it to you.  It says style.css, right?  What do you think that is?  File sheets, yeah, I know.  That was a trick question, not.  The third line, it says fonts.googleapis.com.css.  What is that?  It's that call.  It's what you copy-paste from Google Fonts  into either the head or into your style sheet, right?  But what kind of file is that?  It's a CSS file, right?  It's not the actual font.  The CSS file does, have you ever opened it and looked at it?  It does all the font-face declarations,  and then after that, it calls out to fetch the fonts.  So what do you think those last two lines are?  The fonts.  Does this look efficient to you?  What's going on here?  Does anyone notice a big glaring issue of what's going on here  and why I might have made this slower than it needs to be?  So we have, remember, index, the CSS, my font CSS,  and then the fonts, that's the order.  So what's going on there?  Yeah.  Sorry, camera.  Why is this starting here after the CSS?  Because I called it from my CSS.  Have you ever actually, I'm going to break all these rules  about the video, sorry.  I am calling the font from your style sheet,  because you're going to get those two options.  Sometimes it's easier to do this.  Maybe you're working with a framework or a tool,  and it's easier to drop your font call in your CSS,  but you're paying a performance price.  So what's one way we can fix that?  What's one way that we can make it start loading right away?  Put it in the head of the HTML.  So when we put it in the head of the HTML, this is what happens.  So we've, we've scooched it over some.  We don't have to wait for the CSS to be downloaded  and the CSS some created and then call our,  finally our CSS for our fonts.  We can put it in the head and it will start downloading  that font CSS style sheet right away.  But what, but there's more things we can do here  to make this faster, right?  What do you notice about, you can't read this,  but it says fonts.googleapis.com,  and then the actual font lines say fonts.gstatic.  You can't see the rest of this, but it's.com  and then there's a long hash for the font.  So what's happening here?  Yeah, but didn't we just make a call to, to Google?  They're on two different domains.  So the style sheet and the fonts are on two different domains.  So what do we have to do?  Yeah, oh yeah, we'll talk about the font hints.  But so the browser has to start up a connection  to that separate domain, but it won't do that  until it knows that it has to reach out to that domain.  So we have this wasted time again from doing this connection.  We know we're going to do this connection,  but we don't know until after that style sheet is downloaded  and the CSS song is created so that it knows.  So resource hints are our friends.  We're going to focus on these middle three.  This is a nice little handy thing I got from one  of Addy Osmani's tweets.  He was a performance engineer at Google.  I think he's on a different team now,  but he has some great stuff.  So pre-connect, preload, and preflight  are really fun resource hints.  We'll talk about DNS prefetch also,  but first we'll talk about the others.  So what pre-connect does is it can warm up a connection for you.  It can do all the steps of warming up that connection for you  and just have it waiting for you in the background,  but there's a time limit on it.  So if you don't think that you're going to access a domain  until later, what you can do is instead do DNS prefetch  it just does a DNS part. So at least it negotiates that time,  but a pre-connect will do the rest of the connection as well.  But it's time sensitive.  Preload, what preload does is it tells the browser,  oh hey, I know I'm going to need this file soon.  Download it now.  So normally browsers are smart.  They're not going to download a file until they know it's necessary  when we're talking about fonts and similar.  So it's not going to pull it down until it knows that you have  the matching characters and that you're using the font on that page  based on the CSS.  But preload says, hey, I'm going to just go ahead and download it now  because I know I'm going to need it later,  even though you don't know it yet.  Pre-fetch lets you put things in your cache for future use.  We're not going to talk about that in here, but just so you know.  So what can we do?  Actually conveniently on this slide,  that code snippet is exactly what you would use with Google Font.  So what it says that is,  I want you to warm up the connection to fonts.gestatic.com now.  And so if we just put that in on the head of our HTML  with our call to our style sheet,  then that connection will start to warm up  and you can see it down here.  You know, it's kind of just like on its own,  hanging out here before the actual fonts are downloaded.  So you just copy that line directly in there  and that does a pre-connect.  And so now we've made our site faster  by just doing these little kind of tricks.  Like the code isn't significantly different,  but you can actually make a pretty good chunk of savings  just right there.  Let's talk about self-hosted fonts.  So these are fonts that you host, you know, on your domain.  So you might call them in your head like this,  preferably in your head,  because then you know you don't have the same problem  as before when we call it from our CSS.  So this is my waterfall.  What's on the first line?  The page itself, right?  The second line is my style.css.  That's also where I have my font face declarations.  And then what's going on with those last two lines?  It's the fonts, right?  But like what was one of those,  do you remember what I said earlier?  There's a hint that can say, oh hey, hey browser.  Pre-connect is for the connection.  This is our domain, so we don't need to do any extra connections.  Preload.  So what we, oh sorry, I forgot the mic was there.  So what we can do is we can say, hey browser,  I'm definitely going to use this font.  I want you to download it earlier  so I don't have this longer time of waiting.  Because you know what else is happening?  What happens while that font is downloading  but it's not yet loaded?  What does the page look like?  It depends on your font display settings,  but it's either going to be invisible  or it's going to be a different font until that loads.  Yeah.  I call it FOOT.  Other people say FOUT.  Good thing we're not talking about content.  So what we can do is we can preload.  And the only thing I've added to these lines here  is this rel equals preload.  And then what can happen now on supported browsers  is that those files will be downloaded right away.  Any file I put link rel preload on there.  So with great power comes what?  Great responsibility if you watch a superhero movie.  And so we don't want to abuse this, right?  We only want to do this when we're actually going to use,  we're definitely going to use the file on that page  because we don't want to abuse our user's data plans.  And also I suspect, is it the next slide?  I suspect that's why this has happened.  I don't know.  Does anyone know anyone on the Firefox team?  So on Firefox preload used to be supported.  And now it's not supported.  It's like behind a flag.  So I would really be curious if anyone on the Firefox team,  please, oh my Twitter handle is the green Greek.  Please let me know what happened there.  My guess is because maybe they are concerned about the users  and kind of people abusing these privileges.  So make sure that you don't abuse this privilege,  but it will work in all the other modern browsers.  So remember when I said shared caching of popular fonts,  I used to say like, you know, if you're using Open Sans or Roboto,  don't just do it directly from Google Fonts.  Oh, don't ever try to just copy the hash of the font itself.  There's a hash.  So don't try to copy that whole URL because those are changed often  and they'll just disappear.  So you never want to do that.  But shared caches go anyway.  So now you can contemplate whether it might be a good idea  to download the font and serve it locally,  even if it is a Google font.  You'll lose some of the other benefits like the variants  and stuff like that.  But because of double key caching,  and I don't know if anyone's going to talk about this later,  but shared cache is not really a benefit anymore.  Let's talk about font rendering.  So remember when I said,  Foyte and Foot or Fout.  Foyte is on this page.  Oh, I know it's a little hard to see.  This is, I have a screenshot of performance happening.  That's what's over here on the right-hand side.  And this is the page itself.  If you look at the page itself,  you can see there are actual words in my nav bar.  But if you could see this screenshot better,  the projector is a little bit dark.  There's no words in my nav bar.  There's no words in my button.  It's annoying, right?  That's a flash of invisible text.  Does anyone know why that's happening?  This was using Google Fonts.  Does anyone know why that was happening?  Yeah, yeah.  So the default for Google Fonts  on their font display property was display swap.  So that means that it's going to show the fallback font  for up to three seconds,  and then it finally will switch to the web font.  So it won't, I'm sorry, it will block it.  It won't show anything at all for three seconds.  And then it will show the fallback,  and then it will show the web font.  And so this was annoying, right?  Like you couldn't, you had no control over this before.  But now you have control.  With the Google Fonts API,  and now by default it has this part of the URL in it.  If you just add and display equals swap,  you will get display swap.  And what display swap does is instead of making it invisible,  it will show the fallback font until the web font is loaded.  And we're going to kind of see a little bit of this in action  in a minute.  So that's really cool.  If you have legacy apps that use Google Fonts,  you can make them use display swap if you want.  All you have to do is add that last part of the URL.  You don't have to go in and re-copy your URLs.  You just add the query at the end.  So, that's not to play.  So, flash of unstyled text, right?  That's this change here.  That's annoying, right?  I mean, sometimes it's more annoying than others.  If we think about what's happening here,  I mean, this might vary by user.  I feel like we used to match fonts based more on style.  But if I am, for example, reading a blog post or an article,  the thing that's going to annoy me more is layout shift.  So, once that font comes in, if I'm on a totally different paragraph  when it comes in, for me as a user, that's going to annoy me.  So, for me, I, I guess, recognize the intent of this quote.  The style doesn't matter so much as it has to flow the same way.  And so, there's some great tools that we can use,  like font style matcher.  And I'm going to actually go to this.  And so, what you can do is you, let me zoom in  so you can see this a little bit better.  You can put, it automatically has Google Fonts available here,  but you can also upload your own font.  And so, I've uploaded this font,  and I'm going to tell you more about that font.  And what my fallback font used to be was Arial.  So, if I go down here, you can see them overlapped.  We can use a different color for each font.  So, Arial's red now, and then you can see an action,  like the shift that happens.  So, I have this, this is actually a variable font.  I'm going to talk about that in a minute.  So, we can see what happens,  and what we can do is we can adjust properties.  For example, like font size, Arial, if you look here,  it just is a little bit smaller.  So, I could like bump up the font size,  and I could basically provide an entire fallback font  and change things, change which one is used based,  used on JavaScript.  I prefer not to do JavaScript.  So, what I did is I put in some other Web say fonts in here,  and I found that Verdana,  I actually don't know how to pronounce that, Verdana, Verdana.  Just so you know.  I put that one in, and it matched a lot faster.  But you can actually get super close on some fonts,  and then maybe you realize you don't actually need your Web font.  But at least here, the size of the font, the line height,  and the letter spacing really closely matches.  So, it makes a really great fallback font for me,  because I don't want the extra JavaScript on the page  just to load a separate font style as well.  So, that's a great tool to keep in your back pocket  for having to deal with the swapping fonts.  How many of you have used variable fonts before?  I figured I would go into this a little bit,  because they're fun and new,  and they also present some challenges for performance.  So, we are going to, we don't have slides for this,  we're just going to do this.  I started playing with this variable font called Recursive.  They have a really cool website.  And it's a highly flexible new variable font.  What I should do is go to Firefox.  When was the last time you used Firefox DevTools?  Yesterday.  Oh, yay! Someone was actually using it.  So, I do use...  Okay, that's fine.  I do use Chrome mostly for performance,  but Firefox has...  You know what helps to do before you're a talk?  Get on the Wi-Fi.  It helps.  Actually, I think I might be...  Hold on.  Yay!  All right.  So, if I go into...  Actually, did I inspect that one?  I was just doing it randomly.  Let me inspect.  What's really cool about Firefox DevTools  is they have this whole fonts panel over here.  I wonder if I can zoom in that.  So, if you look here, we're going to play this...  So, you can see what this particular variable font will do.  I mean, you can play with standard things like size  and line height, which is kind of cool,  and letter spacing.  Oh, that's terrible.  But it also has all these special things  that are just for this particular variable font.  So, what does this variable font do?  Right now, it's on not MonoSpace,  but this font actually can be MonoSpace as well.  So, I like to use my blog as my playground,  and so I'm using this variable font so I can use,  oh, this is my coding font too,  and then, you know, my body text is going to be that.  And then, it's called Casual,  but I call it Sassy versus Not Sassy.  Right now, I think that's Sassy.  Here's Not Sassy, and then here's Sassy,  AKA Casual.  Weight, so look at that.  It's like a smooth transition.  I can, like, choose any weight in there.  That's pretty cool.  So, instead of, like, downloading, you know,  you have to download your 700 weight, your 800 weight,  like, if you want heavy bold or your lightweight,  you could theoretically just have all your weights  in one variable font.  And then, you know, there's a lot of things  that are actually slant, like italics.  There's actually, slant and italic are two different things.  Italic actually changes slant features as well.  So, Firefox, that's one lesson from this.  Firefox inspecting fonts are really great.  Actually, CSS Grid and other inspect element things  are really cool there.  So, that's a variable font,  an intro to a variable font.  But how many codes do you have?  How many kilobytes do you think are loaded  when you do, like, a regular font?  Has anyone, like, looked at that?  How many kilobytes do you use?  Yeah, so I feel like, you know, like, per style that you use,  because it might be, like, it's like 400 weight regular.  Would be maybe 15 to 20 kilobytes,  or up to 30, it depends on really the font,  or in what subsets you're using.  Like, it's just, you know, Latin text, or is it others.  And so, so maybe you have, like, maybe,  let's say you have four of those,  because you're doing, maybe you have two different fonts,  and you have two different weights.  That's conservative, that's like 80 kilobytes, maybe.  So, my basic English subset was 130 kilobytes.  It's a variable font.  Like I said, this is my blog, so I get to play with things.  It's okay if they're a little bit bigger.  So, what happened was the designer came out with a new version.  And he wanted me to deploy it, but it was like 400 kilobytes.  And I was like, hmm, I'm a performance engineer.  I don't think I should do that.  So, we started playing with performance more.  So, if we have things like variable fonts,  what are some other things we could do, perhaps?  Do you have any ideas?  I mean, I don't know if we have this all correct,  but what do you think we can do?  There's another thing I haven't spoken about  with fonts that you can do.  Yeah.  So, you probably remove large parts of the glyphs that you don't use.  Yeah. So, sub-setting.  Well, we can sub-set based on character codes.  Do you know about this inside your font?  I don't know if you've played in font display properties.  We're all developers.  Most of us are developers in here, right?  So, it's like, we don't often play or learn all the CSS things  that maybe we should.  But let me zoom in a little.  I was going to show you the difference with, for Donovan.  It's fine.  We made more subsets.  And so, most of my website is in basic English characters.  And so, you can put a Unicode range in your font face declarations.  And it knows to use this font for this Unicode range.  And this is the only one that I preload now.  I don't preload the rest.  And then the others will only ever load if they're used on a page.  So, like I have, yeah, some diacritics and some other things,  some symbols and extended fonts and a special font just for my  first name because I made it the super heavy weight.  So, that's the path we chose.  There's also tools you can do to sub-set your fonts if you want  really aggressive sub-setting.  It's actually called sub-font.  I think I have a link to it in the back of this.  But if you want to look at sub-fonting, not just for variable fonts,  for any fonts, you can look at this tool called sub-font.  I forgot the developer who wrote it.  But it kind of gives you a whole set of tools for setting up your  fonts in a more performant way.  So, yeah.  What's really cool about preload, which I forgot to mention because  I wanted to show it to you live, is that often what happens is we can  beat the rendering path.  When I reload does, it automatically, we put in our head that  we're going to use the font and I want you to preload it.  I want you to load it now.  So, what we can often do is, the only what happened there when I  reloaded, did you see that?  I should slow it down.  There's only one thing that happened there that you could visually see,  right?  Oh, not slower, so I did that.  But on a faster connection, what can often happen is we actually  skip that fallback time.  I do have a display swap on my name because it's branded.  So, like, branded things, you might want to keep swap because you  don't want to see the ugly font on your brand.  But, yeah.  So, if I go to Firefox, right, which doesn't do preload,  you need to disable the cache.  This one has a much bigger layout shift.  So, more resources mentioned.  I do have a short article.  It's a little bit data now, but it still works.  If you want to learn how to self-host your Google font, there's a  little tool you can use in there and the steps involved.  Also, when you're looking at things like, I didn't mention this in this  talk specifically, but you can pull your data into can I use.  Like, if you use Google Analytics, you can pull in that data and you can  see, like, you know, for my particular users, is this feature going to be  supported, like, for example, preload.  Most of my users for one client are on Safari, so it's supported.  Thank goodness.  I'm going to use the font tool I mentioned, which you can use for any  type of font.  So, thanks for coming to my talk.  Again, the slides are at Bitly font perf and writing resources more,  cio.codes.  You can find me at the green Greek.  We will, I guess, we'll take a few questions.  I prefer offline questions, though, so feel free to come up to me later.  I'll be in this room for the rest of the web perf thing, so in the breaks  and I'll be back afterwards if you want to, you know, reach out to me  and go out there.  You can also DM me on Twitter or just mess or at me.  So, thanks for coming to my talk.  Thank you, Cio.  Thank you.
webperf_font_loading_0_287.png webperf_font_loading_288_563.png webperf_font_loading_564_2099.png webperf_font_loading_2100_2147.png webperf_font_loading_2148_4343.png webperf_font_loading_4344_4403.png webperf_font_loading_4404_4847.png webperf_font_loading_4848_5099.png webperf_font_loading_5100_5795.png webperf_font_loading_5796_8015.png webperf_font_loading_8016_8063.png webperf_font_loading_8064_8219.png webperf_font_loading_8220_8267.png webperf_font_loading_8268_13511.png webperf_font_loading_13512_13583.png webperf_font_loading_13584_14363.png webperf_font_loading_14364_14879.png webperf_font_loading_14880_15599.png webperf_font_loading_15600_15923.png webperf_font_loading_15924_18911.png webperf_font_loading_18912_24323.png webperf_font_loading_24324_25679.png webperf_font_loading_25680_26987.png webperf_font_loading_26988_27599.png webperf_font_loading_27600_28427.png webperf_font_loading_28428_31235.png webperf_font_loading_31236_32051.png webperf_font_loading_32052_32099.png webperf_font_loading_32100_33179.png webperf_font_loading_33180_33587.png webperf_font_loading_33588_33647.png webperf_font_loading_33648_34103.png webperf_font_loading_34104_34343.png webperf_font_loading_34344_39359.png webperf_font_loading_39360_39467.png webperf_font_loading_39468_39839.png webperf_font_loading_39840_40391.png webperf_font_loading_40392_41903.png webperf_font_loading_41904_41975.png webperf_font_loading_41976_42743.png webperf_font_loading_42744_44027.png webperf_font_loading_44028_46163.png webperf_font_loading_46164_47119.png