Perf Astro

This is a focused playbook for squeezing 95+ Lighthouse scores out of Astro sites. It walks you through setting up astro-critters for critical CSS inlining and @playform/compress for minification, then shows you a battle-tested Layout.astro pattern that handles font loading, LCP image preloading, and deferred analytics scripts. The guidance is specific to Astro's build pipeline, so if you're on Next or plain HTML, you'll want perf-web-optimization instead. Honestly, the layout example alone is worth having on hand when you're staring at a 60 performance score wondering why your fonts are blocking render.

skills.sh installs: 286
GitHub stars: 7.2K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add tech-leads-club/agent-skills --skill perf-astro --agent claude-code

Installs into .claude/skills of the current project.

Files

Astro Performance Playbook

Astro-specific optimizations for 95+ Lighthouse scores.

Quick Setup

npm install astro-critters @playform/compress

// astro.config.mjs
import { defineConfig } from 'astro/config'
import critters from 'astro-critters'
import compress from '@playform/compress'

export default defineConfig({
  integrations: [
    critters(),
    compress({
      CSS: true,
      HTML: true,
      JavaScript: true,
      Image: false,
      SVG: false,
    }),
  ],
})

Integrations

astro-critters

Automatically extracts and inlines critical CSS. No configuration needed.

What it does:

Scans rendered HTML for above-the-fold elements
Inlines only the CSS those elements need
Lazy-loads the rest

Build output shows what it inlined:

Inlined 40.70 kB (80% of original 50.50 kB) of _astro/index.xxx.css.

@playform/compress

Minifies HTML, CSS, and JavaScript in the final build.

Options:

compress({
  CSS: true, // Minify CSS
  HTML: true, // Minify HTML
  JavaScript: true, // Minify JS
  Image: false, // Skip if using external image optimization
  SVG: false, // Skip if SVGs are already optimized
})

SKILL.md on GitHub