~ 2 min read
Astro-Critters an Astro Integration to Optimize CSS Loading

astro-critters 🦔
This Astro integration brings critters to your Astro project. Critters is a plugin that inlines your app’s critical CSS and lazy-loads the rest.
astro add command
Astro includes a CLI tool for adding first-party integrations: astro add
. This command will:
- Install all necessary dependencies and peer dependencies
- Update your
astro.config.*
file to apply this integration
To install astro-critters
, run the following:
# Using NPM
npx astro add astro-critters
# Using Yarn
yarn astro add astro-critters
Or Install dependencies manually
First, install the astro-critters
integration:
npm install -D -E astro-critters
Then, apply this integration to your astro.config.*
file using the integrations
property:
astro.config.js
import type { AstroUserConfig } from "astro";
import critters from "astro-critters";
export default (): AstroUserConfig => ({
integrations: [critters()],
});
Critters should now automatically inline the critical CSS of your HTML files.
Making Changes
You can use several Parameters to pass to the integration
To disable Critters
import type { AstroUserConfig } from "astro";
import critters from "astro-critters";
export default (): AstroUserConfig => ({
integrations: [
critters({
critters: false,
}),
],
});
If your path is different than dist
, update it using path : "./build"
import type { AstroUserConfig } from "astro";
import critters from "astro-critters";
export default (): AstroUserConfig => ({
outDir: "./build",
integrations: [
critters({
critters: {
path: "./build",
},
}),
],
});
Set logger to 0 if you do not want to see debug messages. Default is 2.
import type { AstroUserConfig } from "astro";
import critters from "astro-critters";
export default (): AstroUserConfig => ({
integrations: [
critters({
logger: 0,
}),
],
});