The Critical Request: An investigation into what blocks render
summary
Study measures how browser chooses and fetches assets and shows web fonts often block first meaningful paint by about three to five seconds on slow networks. Using Chrome DevTools Performance panel with CPU and network throttling and the priority column reveals fonts loading late; adding a link rel=preload for fonts and applying font-display: swap moves fonts to highest priority and restores readable text several seconds earlier. Audit uses local overrides, tests on a throttled Nexus‑5–like profile, and cites 79% web‑font usage.
AI-written summary · about
chapters (17)
- 0:00Start
- 4:39First Meaningful Pain
- 6:33How Do Browsers Decide Which Resources To Fetch
- 7:05Read-Ahead Parser
- 9:30Javascript Request Priority
- 10:10Fonts
- 15:59Preload
- 17:12Performance Trace
- 17:50Local Overrides
- 18:30After Preload
- 19:26Font Splay Swap
- 21:06The Font Style Matcher
- 25:06Ensure that Critical Requests Are Prioritized
- 26:17Project Timeline
- 27:25Performance Workbook
- 30:35Performance Advocates Manifesto
- 34:24How Many Sites Are Using Web Fonts
related talks
47mThe Scoville Scale of Web Font Loading Opinions
32mHigh Performance Web Fonts
31mFaster fonts for speed fanatics
47mThe Five Whys of Web Font Loading Performance
31mFontastic web performance
30mHigh Performance in the Critical Rendering Path
38mCSS and the first meaningful paint
19mOptimising Core Web Vitals with web fonts