Inlining 4 KB of CSS sped up first paint by 1.2s
Render-blocking resources are files the browser must finish before it can show anything. Think of them like a bouncer checking IDs at the door: until everyone's cleared, nobody gets in. CSS is a common one.
A news page loaded a 90 KB stylesheet in the <head>. The browser waited for the whole file before painting a single pixel.
The team split it:
— Took the ~4 KB needed for above-the-fold content and inlined it directly in the HTML.
— Loaded the rest of the CSS afterward, without blocking.
Result: first visible paint arrived 1.2s sooner, and LCP improved alongside it.
Try this: in PageSpeed Insights, look for 'Eliminate render-blocking resources'. It lists the exact files holding you up. This one's gentler than it looks.
Vitals 101
@CoreVitals101
Inlining 4 KB of CSS sped up first paint by 1.2s
Этот пост опубликован в Telegram-канале Vitals 101. Подписаться можно по ссылке: @CoreVitals101.