Inline Critical (above-the-fold) CSS in your Astro Project
MIT License
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.
npx astro add astro-critical-css
# or
yarn astro add astro-critical-css
# 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.
⚠️ 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.
Check out Hybrid Renderering