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:

1. Install all necessary dependencies and peer dependencies
2. 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,
  }),
 ],
});