Astro Critical CSS Integration

Astro Integration for Critical package which inlines critical-path CSS into HTML and lazy loads remaining CSS which can greatly improve First Contentful Paint (FCP).

Read more about it here: Extracting Critical CSS.

Installation & Usage

Astro Add

npx astro add astro-critical-css
# or
yarn astro add astro-critical-css

Manually

# npm
npm install -D astro-critical-css
# yarn
yarn add -D astro-critical-css

In your astro.config.mjs:

import criticalCSS from "astro-critical-css";

export default defineConfig({
  integrations: [criticalCSS()],
});

During your build this integration will look at all the static HTML files and run it through Critical.

Astro SSR Mode

Note for < Astro 2.0

⚠️ If your project uses Astro SSR mode, this integration will only inline HTML files that pre-rendered on build. You will need to enable experimental.prerender in your astro config.

Astro 2.0 and above

Check out Hybrid Renderering

Similar Libraries

• astro-critters