Critical CSS inline vs single external stylesheet
Inlining above-fold CSS removes a render-blocking round trip. It has a cost.
—
External CSS: one render-blocking request, ~150-300ms before first paint on a cold cache.
—
Critical CSS inlined (~10-14KB) + async rest: first paint without the round trip, FCP -200ms.
—
Cost: inlined bytes aren't cached across pages and bloat the HTML; over ~15KB the HTML itself slows TTFB.
Keep critical under ~14KB (one TCP window), load the rest async.
Takeaway: inline under 14KB cuts ~200ms FCP; over it, you lose the gain.
Millisecond Mafia
@MillisecondMafia
Critical CSS inline vs single external stylesheet
Этот пост опубликован в Telegram-канале Millisecond Mafia. Подписаться можно по ссылке: @MillisecondMafia.