Font Loading Performance 📉 6 Experiments with FOUT & FOIT

[@sam18b]

The main reason the preload didn't do anything is because your CSS (or more specifically your font definition) is inlined in the head. On a regular site what would happen is you'd hit your page, then you'd load the CSS. Once all the CSS has been loaded only then would the font start loading because CSS only runs once it's been loaded entirely. Using a preload essentially just let's the browser know that we're going to need the font before it figures it out for itself after seeing the CSS

[@mvargasmoran]

Damn, thanks for the video, Last Time I had to deal with FOUT/FOIT I ended up self hosting. Then there was still some FOUT and I ended Up covering the screen with a "loading" (nice heartbeat animation) that would run for half a second, and then reveal the site... I Stopped looking at this kind of topics as the improvement was really little for all the hours I pour into it. I guess the best is to have some good defaults that try to match the font the designer wanted.

[@OfficialDevTips]

I like the challenge! It is fun to try and get the load time down. As you can read in the comments there’s a lot of improvements still to be made!

[@utyf]

Thanks for video. Btw, the 4 approach "with preload script" in your example has WRONG syntax - the SRC is used instead of HREF. Probably that is why you have had no difference. In real app it helps a lot because the fonts are loaded parallel with js bundle (loader indicator is displayed at that time), and then it renders without any FOUT/FOIT.

[@OfficialDevTips]

🤦‍♂️ Hahaha. I feel this REQUIRES a code review follow-up.

[@DaxyGamer]

Ironically, the new polymer design on KZbin or the A/B testing tends to make all text flash invisible or unstyled and recommendation thumbnail timestamps take 5 seconds to show up. So it takes 10 seconds for all the content on the homepage to show up.

[@charlyecastro]

Great vid! You guys should make a video on webRTC!

[@OfficialDevTips]

Yeah great suggestion!

[@jonathanbakebwa2292]

Hi David! What types of functions are these at 12:14 ? I'm kind of self taught, and I never really have interacted with this kind of javascript functions before. I've seen those but never really found a real explanation to why they exist this way. Do I need to use this kind of function syntax, and what makes it so special if I do? Thanks! Now I'll go back to enjoying this scrumptious video... nom nom nom nom....

[@funfunfunction]

When you put a script tag directly in the HTML, the browser will assume that the rest of the page is dependent on it, and rending etc will stop until the script has been loaded and executed. Sometimes this is what you want, but often not, especially if you are a third party that is offering some code to a developer to paste in. Then you use techniques like the one you see, which inserts a script tag dynamically into the DOM at execution time, which doesn't hold up loading of the page.

[@jonathanbakebwa2292]

@@funfunfunction Wow! Thank you. I didn't know that! Thanks! How I can use this to load cat memes without interfering with my webpage rendering. :D ||| Video Suggestion: Front End Architecture, and how to structure projects.

[@sunshineremovalsvic4576]

Very interesting but would like to see the review of the preload after substituting href for src. I load in footer from CDN at the moment.

[@OfficialDevTips]

Will do a follow-up with actual working code in all examples 🤪

[@sunshineremovalsvic4576]

Will try to preload fonts thru cache

[@ajinkyachitale89]

Which approach is better to use google font for improving the performance of webpage? 1) cdn 2) download (locally)

[@gadgetboyplaysmc]

cdn obviously... You just get that nasty FOUT and FOIT

[@danielkirk7350]

Fout is the exact problem that i have with my website on titles. Its already been set up but can't seem to figure out how to mend it. Very frustrating

[@cirykpopeye7587]

What if you put this website on a webserver? Don't think self-hosted will win anymore as now they're just loading off your SSD. Because the server doesn't load the fonts, the browser does so your latency to your own server is near 0.

[@AndyMortimer1]

Great video, just wondering what the tool is you’re using at the end to run all versions.

[@OfficialDevTips]

I screen recorded them and put them together in a video editing software Final Cut Pro X that I use for editing the videos.

[@mattcroat]

Variable fonts hype!

[@RmNrIHRoZSBDQ1AK]

Font loading is a browser thing, don't mess with it. The problem is that nothing is worse than no text when resources fail to load. Therefore browsers have built-in timeouts for how to handle webfont rendering. You will not increase load speed with JS as you've found out. The only thing you can achieve with JS is avoid any kind of flash but you'll cripple your site by doing so. Or you can use JS to delay loading the fonts even longer, so you get useful stuff on screen first. Self hosted fonts are faster because you're avoiding DNS lookups and TCP handshakes with a different server.

[@RmNrIHRoZSBDQ1AK]

With a cold cache google webfonts seem slower, but in the real world it's quite likely users will have the google's webfont DNS cached already.

[@AustroPower]

Hello David, hello MPJ, Could you guys start some series on Vue.js? Would be great😁. Thank you for all your tips and tutorials. 🙌

[@OfficialDevTips]

Actually it could be interesting. We have no idea how it works.

[@thejoker585]

Can you please explain point-free programming in JavaScript with simple examples (please keep it as simple and as clear as possible)?

[@Pikoro09]

IMO the page you are using is too small to throw bad results in Lighthouse. It is hard for such a tiny website to be slow. You should have tried it with a bigger site, there you would have seen lower results due to slow font loading.

[@OfficialDevTips]

Youre probably right. Tried having the image to fake weight of the page. It’s difficult because you don’t want to add too much that might influence the metrics but is not related to what you’re actually optimizing.

[@sholomaber]

For the async method you loaded the sync file instead of the async file.

[@OfficialDevTips]

Best code review is publishing a video of your code. Thanks!

[@mazwrld]

Hahaha this was so much fun. I've a question though, in school they thought me not to self host fonts because they take up too much space on a server. Relatively speaking. What's the validity of that?

[@OfficialDevTips]

I’d say none! Check out Zach’s speech linked in the description.

[@KeepItFresh02]

dope. feelin it.

[@nendo502]

http2 server push may improve the font load time, worth a try

[@OfficialDevTips]

Woot! Great idea - thanks!

[@marcindomanski5654]

You result may be wrong (or may be not). You tested server cdn vs local font. But in real example the server where is your page can be further and slower that server cdn. You shoul test "server cdn vs server ftp" And what about the situation when yuser browser use font from then cache, because some previous page use that resource?

[@OfficialDevTips]

Regarding cache. I come from the SEO perspective with this - first time you hit the site. And of course, there could be a Google Web Font cached because you visited one before. Regarding server CDN, the browser has a limit on how many resources you can fetch from one domain. If you "shard", i.e. split your resources to other domains you control, you can increase performance because the browser can fetch more resources simultanously. In this example, it is a bit silly because it is so bare though. If you'd make your server support HTTP/2 this is not needed at all.

[@LaviYatziv]

Why not just base64 encode the font and embed in the CSS?

[@mabdullahsari]

Browser cannot cache it and has to process it each time you reload, very expensive.

[@LaviYatziv]

@@mabdullahsarifor a step yeah. But in a spa, or pwa. You should be fine...

[@ram-pandey]

Is this working this time...? last time we were not able to improve :)

[@OfficialDevTips]

Don't twist the dagger.... It hurts.... 😂

[@ram-pandey]

@@OfficialDevTips 😂😂

[@eswarammajammu1575]

I want slipstream let font

[@julienjamet]

I love this music like philip Glass (the first) !

[@OfficialDevTips]

Yeah me too! It was a jazz clip with traditional Swedish music inspirations.

[@MarcoBiedermann]

Nice Video David. In my opinion your results are not that accurate, since you are running them locally and just emulating the network connection. I would suggest so put your examples up on some hosting platform e.g. GitHub pages and measure al examples using www.webpagetest.org/ This also allows you to run it multiple times and to calculate an average. Also you should moved your CSS to an external file, which might reflect a more real world scenario. I also did quite a lot of research on this topic and I came to the following setup as best strategy. - Host fonts by yourself - Lower file size by using just a subset of glyphs (en only) - Serve font only in woff2, it it supported in pretty much any browser by now - Add "font-display: swap" property to your fontface - Add a preload link to your font-file in the header - Add serif / sans-serif fallback to your font declaration: e.g. "body: { font-family: CUSTOM_FONT, sans-serif; }" - Compress your resources using Gzip (Nginx / Apache module) - Set cache control header (cache fonts for e.g. 1 year) - Add file rev hash to font-filename to allow cache busting This will tell the browser to prefetch all critical fonts, but will render the content on first meaningful paint using your system font and automatically switch to your custom font as soon as loaded. If you would like to make this also work in older browser, yes you would need a shim like FontFaceOberserver but I think this will have a negative impact on modern browsers.

[@jsphpndr]

Have you tried Bram Stein's Font Face Observer? From my experience it's a much, much better solution.

[@OfficialDevTips]

That is the one I'm using in the video for the two "own font loader" examples.

[@jsphpndr]

​@@OfficialDevTips Ok. I went back and checked it out. While I do a few things differently, you basically get the same results that I do... This makes me want to test things out again and check if there may be some of these issues. Thanks.

[@jsphpndr]

​@@OfficialDevTips​, I went back and checked it... fonts start loading and load time are both under a second. I don't know why you're experiencing the delay. I'm curious to try your setup and see what the difference is...

[@OfficialDevTips]

@Joseph Pinder it's available in the description. Now on Friday I'm having a follow-up episode as well, where I try some more techniques and give my verdict on the one and only approach I recommend. (Not the best performing, but best performance vs ease-of-implementation balance.)

[@RmFrZQ]

We lurned not to use font loader scwipts. :)

[@cashme6819]

preload the image

[@milehighsi]

I've never had a problem using a font loader with Google's hosted font files. This way you benefit from the very real possibility that a user has loaded the font files (from Google) already, from another site, therefor having it cached. You also get Google's CDN, compression, and the very latest version of the font etc. etc. for free... the main thing is the caching. There is nothing faster than loading from cache. For me this is the main benefit of using Google Fonts. Turing off caching for this entire video is educational but very unrealistic.

[@OfficialDevTips]

Yes if you use the very common fonts everyone else is using (Roboto, Open Sans et al) this is a nice approach. But are you sure you have "never had a problem" when loading your site on a slow mobile 3G connection? Very often the experience is worse than you expect!

[@milehighsi]

@@OfficialDevTips Fortunately the best optimised Google fonts are all amongst the most commonly used. Never may be too strong, admittedly, given that there is no way of testing every device, connection, user prefs combination. However, even if a font isn't cached, if you're careful with your fallback font and styling, there should be very little jank when if it does load late. I've never encountered FOIT on my own sites so I guess that's specifically do with how some people are loading their fonts. It'd be cool if you could get analytics over Google fonts to determine how many people are loading an uncached version. I doubt it would be very many, regardless of your font choice. Every time I look at my wife's screen there's a mad font on there! We as designers/devs don't tend to see the god-awful websites regular people spend their time on..

[@milehighsi]

Specifically regarding painfully slow networks, wouldn't you agree that a more practical solution would be to resist forcing these poor folks to download a custom font?

[@OfficialDevTips]

Haha regarding custom fonts and the "poor folks"! I think we have this amazing tool to use fonts, to create interesting designs. I like it. But by just dropping in the "original", you get poor user experience. Now on Friday I'll publish a follow-up video where I have made up my mind on the best approach where you balance ease of implementation vs performance.

[@jobybejoy8219]

FOuT .?? 🤓

[@OfficialDevTips]

I guess pronunciation should be */faʊt/*