← Writing
TIL · / 1 min read

inlineStylesheets: 'always' removes Astro's render-blocking CSS requests

If your site's combined CSS is small, inlining it into the HTML eliminates the render-blocking stylesheet requests Lighthouse flags — at the cost of a few KB per page.

astro performance

Lighthouse flagged two render-blocking <link rel="stylesheet"> requests on my Astro site. My combined CSS is ~12 KB — small enough that the fix is one build option:

// astro.config.mjs
build: {
  inlineStylesheets: 'always',
}

Every page now ships its CSS inside the HTML. No stylesheet requests, no render blocking, first paint happens off a single response.

The tradeoff is honest: the CSS repeats in every page’s HTML instead of being cached once. That math only works while the CSS is small — at 12 KB it’s a clear win; at 100 KB it wouldn’t be. Astro’s default ('auto') inlines only small stylesheets, so 'always' is for when you know your total and it’s tiny.

← All writing Book a call →
Book a call → WhatsApp