Faster fonts for speed fanatics

on YouTube ↗31m

" summary

Hosting fonts on the same origin cuts speed index roughly 35% compared with cross‑origin Google Fonts; using rel=preconnect masks connection latency and yields about a 7% speed‑index win; font-display: swap roughly halves first meaningful paint by showing system text then swapping in web fonts; rel=preload removes nested critical request chains so fonts load earlier; honoring save‑data can shrink delivered font bytes from ~50KB to ~10KB by skipping nonessential typefaces.

AI-written summary · about

" chapters (11)

1. 0:00Start
2. 1:41HOW BROWSERS RENDER FONTS
3. 2:08A QUICK RECAP OF RESOURCE LOADING
4. 3:43RENDER BLOCKING IS ALL ABOUT PRIORITIES
5. 6:03WEB FONTS ARE RIPE FOR PERFORMANCE TUNING
6. 15:05HOSTING YOUR OWN FONTS GIVES YOU CONTROL
7. 16:22FRIENDLY REMINDER: MIND THE LICENSING AGREEMENTS!
8. 16:56font-display FOR BETTER RENDERING CONTROL
9. 17:53font-display: auto; BROWSER DEFAULT BEHAVIOR KICKS IN.
10. 20:57CONSIDERATIONS WITH swap: . Don't use it for icon fonts (use font-display: block instead)
11. 30:30SLIDE DECK LINK: JLWAGNER.NET/TALKS/FASTER-FONTS

" related talks

• 32mHigh Performance Web FontsPeter Müller · CSS-Minsk-JS 2018
• 26mHigh Performance Web FontsPeter Müller · JSUnconf 2018
• 31mFontastic web performanceMonica Dinculescu · JSHeroes 2018
• 28mHosting Fonts? Good Luck!Matthias Dugué · Developers Summit 2021
• 50mFont Performance StrategiesMandy Michael · performance.now() 2024
• 37mThe Critical Request: An investigation into what blocks renderBen Schwarz · DinosaurJS 2018
• 47mThe Scoville Scale of Web Font Loading OpinionsZach Leatherman · beyond tellerrand Düsseldorf 2019
• 47mThe Five Whys of Web Font Loading PerformanceZach Leatherman · performance.now() 2018