 There are more coming from the performance side and now we have a developer coming into performance So that's super interesting. I think and she will talk about fonts. Yes. So Go away Hello everyone, how are you doing? Are you excited to be here? I'm excited to talk to you about fonts My name is see a caramel a ghost. It's a very long Greek name Actually, that's not even all of my name, but um, 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 alright. I live in New Orleans This is me at Mardi Gras. So but that's enough about me. You're not here for me. I'm also a Google developer expert and web technologies and I come more from the industry side. So I 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 font-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 like really into like this the weeds in 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 you know a developer and you're still learning and you're in that process Yay And how many of you are curious but not yet convinced that performance is important Okay And in the rest of you, why are you here? That's good to know I like to know my audience because I'm gonna 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 gonna jump right in but what about typography because I'm talking about fonts here So I'm just gonna 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 gonna go back and forth It's just one word. Hello Oops wrong way Versus this What are these 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 plant 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 in New York, New York, New York I feel like I should have started singing the song but But each of these evokes a different feeling in me Because I'm also it's like brand recognition. So it's like associated with the publications that they are from Or the sports teams they are used for So typography is still important But what like 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 Yeah, yeah, there's a different loading issue Yeah Swapping font and like what else about swapping fonts. There's something that really annoys me What? Oh the flash but also like especially when it like moves everything and 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 open stands has at least 30 something different variants that optimize based on a user's browser So because I don't know 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 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 Food and foit flash of unstyle text 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 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 So I know the font's a little small on this our screens 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 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? So what do you think that is? Style sheets. Yeah, I know It was a trick question not The the third line it says fonts.googleapis.com CSS what is that? It's it's that call it's that 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 decorations 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? Why? What does anyone notice like 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 the index the CSS my font CSS and then the fonts. That's the order. So what's going on there? Yeah, yeah, sorry. Sorry camera What's 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 know it gives you those two options Sometimes it's easier to do this like 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 it we scooched it over some we don't have to wait for the see it the CSS to be downloaded and the CSM 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 Google APIs calm and then The actual font lines say fonts dot g static You can't see the rest of this but it's calm 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 um, 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 gonna 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 gonna focus on these middle three This is a nice little handy thing. I got from one of Addy Osmani's tweets. He's a He was a performance engineer at Google. I think he's on a different team now, but he has some great stuff so Preconnect preload and prefetch are really fun Resource hints. We'll talk about DNS prefetch also, but first I'll talk about the others. So what preconnect 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 and it just does a DNS part So at least it negotiates that time, but a preconnect will do the rest of the connection as well But it has its time sensitive preload what preload does is It tells the browser oh, hey, I know I am 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 Prefetch 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 fonts. So what it says that is I Want you to warm up the connection to fonts dot g static comm 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 that 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 hints do you remember what I said earlier? There's a hint that can say oh, hey Hey browser Preconnect is for the connection. We've already 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 is the page look like? It depends on your font display settings But it's either gonna be invisible or it's going to be a different font until that loads Yeah, I call it food but 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're watching 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 they're definitely going to use the file on that page because we don't want to abuse our users 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 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 sure when I said shared caching of popular fonts. I used to say like, you know, if you're using open fans or Roboto don't Just do it directly from Google fonts. Oh, don't ever try to just copy the hash of the 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 gonna talk about this later, but shared Caches not really a Benefit anymore Let's talk about font rendering So remember when I said Voit and food or Foutt Voit is on this page. 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 projectors 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 is this was using Google fonts Does anyone know why that's 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 and 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 equal 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 font 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 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 like go in and like re-copy your URLs. You just add the The query at the end so So Flash of unstyled text right that's this change here. That's annoying, right? Sometimes 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 reckon 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 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 aerial So if I go down here, you can see them overlapped We can use a different color for each font so Ariel's red now and then you can see in 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 aerial 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 use on JavaScript. I prefer not to do JavaScript So what I did is I put in some other website fonts in here and I found that Um Verdana, I actually don't know how to pronounce that for Donna. We're Dana. 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 font but um, but at least here my um The size of the font the line height and the wet 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 font How many you have used variable fonts before I Feared I would go into this a little bit because they're fun and new and so 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 his 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 Okay, so I'm actually using so um, I do use Okay, that's fine. I do use Chrome mostly for performance, but Firefox has You know what helps what 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, um, so if I go into then Inspect my element 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 gonna play this is so you can see what this particular Variable font will do. I mean you can play with standard things like size and Lion 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 And so what is this variable font do right now? It's on Not mono space, but this font actually can be mono space as well So I like to use my blog is 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 And my body text is gonna be that and then I called casual But I call it sassy versus not sassy right now that 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 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 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 how many kilobytes do you think are loaded when you do like a regular font? Does anyone like looked at that how many kilobytes to use? Yeah, so I feel like you know like per 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 the font designer came out with a new version And he wanted me to deploy it, but it was like 400 kilobytes 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 here with fonts that you can do Yeah Yeah, so subsetting we will we can subset 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 gonna show you the difference with For Donna, but it's fine. So we did 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 Yes, like some diacritics and some other things some symbols and Extended fonts and then a special font just for my first name because I made it the super heavyweight So That's that's the path we chose There's also tools you can do to subset your fonts if you want really aggressive sub setting It's actually called sub font I think I've a link to it in the back of this But if you want to look at sub font ain't not just for variable fonts for any font So 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 remember what preload does It automatically we put in our head that we're gonna use this font 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 not slower because 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 brand 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 needed to save all the cash. This one has a much bigger Layout shift so more 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 fonts. 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 and then sub font That tool I mentioned which you can use for any type of font so thanks, thanks for coming to my talk again the slides are at bit.ly font perf and Writing resources more see a code you can get find me at the green Greek. We will Yeah, 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 then also 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 that to you, but thanks for thanks for coming to my talk