hartl3y94 / astro-critters

🦔 AstroJS GoogleChromeLabs critters integration. Inline your critical CSS with Astro.

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.

Installation

There are two ways to add integrations to your project. Let's try the most convenient option first!

(experimental) astro add command

Astro includes a CLI tool for adding first party integrations: astro add. This command will:

1. (Optionally) Install all necessary dependencies and peer dependencies
2. (Also optionally) Update your astro.config.* file to apply this integration

To install astro-critters, run the following from your project directory and follow the prompts:

# Using NPM
npx astro add astro-critters
# Using Yarn
yarn astro add astro-critters
# Using PNPM
pnpx astro add astro-critters

Install dependencies manually

First, install the astro-critters integration like so:

npm install astro-critters

Then, apply this integration to your astro.config.* file using the integrations property:

astro.config.mjs

import { defineConfig } from "astro/config";
import critters from "astro-critters";

export default defineConfig({
	// ...
	integrations: [critters()],
});

Getting started

Critters should now automatically inline the critical CSS of your HTML files.

You can override any of the default options from the configuration at https://github.com/GoogleChromeLabs/critters#properties. Path is "./dist/" by default as in the Astro configuration.

export interface Options {
	path?: string;
	publicPath?: string;
	external?: boolean;
	inlineThreshold?: number;
	minimumExternalSize?: number;
	pruneSource?: boolean;
	mergeStylesheets?: boolean;
	additionalStylesheets?: string[];
	preload?: "body" | "media" | "swap" | "js" | "js-lazy";
	noscriptFallback?: boolean;
	inlineFonts?: boolean;
	preloadFonts?: boolean;
	fonts?: boolean;
	keyframes?: string;
	compress?: boolean;
	logLevel?: "info" | "warn" | "error" | "trace" | "debug" | "silent";
	reduceInlineStyles?: boolean;
	logger?: Logger;
}

Head to critters for all options and features available. You can also check the Astro Integration Documentation for more on integrations.