FCP 2.4s -> 0.9s by inlining 9KB of critical CSS
FCP (first contentful paint) was gated by one 140KB render-blocking stylesheet.
— Browser blocks first paint until all <link rel=stylesheet> in head finish. That sheet took 1.3s to fetch + parse.
— Extracted above-the-fold rules (9KB) and inlined them in head. Loaded the full sheet async with media="print" onload swap.
— Render-blocking request count: 3 -> 0. FCP request chain broke entirely.
— LCP also dropped 1.9s -> 1.3s as a side effect — it was waiting on the same sheet.
The first paint waits on the slowest blocking resource in head. Make that set tiny.
Takeaway: 0.9s FCP from 9KB inlined critical CSS.
Millisecond Mafia
@MillisecondMafia
FCP 2.4s -> 0.9s by inlining 9KB of critical CSS
Этот пост опубликован в Telegram-канале Millisecond Mafia. Подписаться можно по ссылке: @MillisecondMafia.