Optimising Core Web Vitals with web fonts

on YouTube ↗19m

" summary

Custom web fonts frequently push Core Web Vitals over the limits: LCP 2.5s, FID 100ms, CLS 0.1 — fonts can delay LCP by blocking text render, cause long tasks that inflate FID, and trigger layout shifts when metrics fire as fonts swap in. Practical fixes include avoiding third‑party font services when possible, using the CSS Font Loading API to group loads, preload and critical CSS ordering, and reducing files with glyphhanger + fonttools/pyftsubset (one example cuts size ~3×) so pages render within budget.

AI-written summary · about

" chapters (8)

1. 0:00Introduction
2. 0:42Why web fonts
3. 5:37Best font
4. 6:48Font services
5. 9:52Group fonts by rendering
6. 11:27Style fallback properly
7. 13:09Optimize phones with subsetting
8. 16:31Speed up font loading

" related talks

• 25mCore Web Vitals under controlMarta Wiśniewska · JNation 2024
• 50mFont Performance StrategiesMandy Michael · performance.now() 2024
• 39mCore Web Vitals under controlMarta Wiśniewska · Web Summer Camp 2024
• 32mHigh Performance Web FontsPeter Müller · CSS-Minsk-JS 2018
• 47mThe Scoville Scale of Web Font Loading OpinionsZach Leatherman · beyond tellerrand Düsseldorf 2019
• 31mFontastic web performanceMonica Dinculescu · JSHeroes 2018
• 34mOptimizing Web Applications with Core Web VitalsANDREINA GOMEZ · Nerdearla 101 2022
• 25mCore Web Vitals under controlMarta Wiśniewska · Voxxed Days Zurich 2023