Render-blocking CSS: 142KB -> 14KB critical
Every stylesheet in <head> blocks the first paint until downloaded and parsed.
— One 142KB bundle blocked render for 680ms on the test profile
— Extracted above-the-fold rules (14KB) inline, deferred the rest via media="print" onload swap
— First Contentful Paint moved 1.8s -> 0.9s; LCP followed to -540ms because layout settled sooner
Watch the trap: inlining too much (>50KB) bloats HTML and hurts TTFB-to-FCP. 14KB sat in the first TCP congestion window.
Takeaway: critical CSS under ~14KB fits the initial round-trip — FCP -900ms.
Millisecond Mafia
@MillisecondMafia
Render-blocking CSS: 142KB -> 14KB critical
Этот пост опубликован в Telegram-канале Millisecond Mafia. Подписаться можно по ссылке: @MillisecondMafia.