Font Loading Performance 📉 6 Experiments with FOUT & FOIT 

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

Variable fonts hype!

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.

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

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.

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

preload the image

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.

Ironically, the new polymer design on RU-vid 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.

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.

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.

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

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

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.

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....

I want slipstream let font

We lurned not to use font loader scwipts. :)

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

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

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.

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?

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

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?

dope. feelin it.

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

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

FOuT .?? 🤓

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

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.

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

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