# Perf Astro

Astro-specific performance optimizations for 95+ Lighthouse scores.

- Repository: https://github.com/tech-leads-club/agent-skills (7121 stars)
- Category: Design
- License: see repository
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add tech-leads-club/agent-skills --skill perf-astro -g -a claude-code -y`
Codex: `npx skills add tech-leads-club/agent-skills --skill perf-astro -g -a codex -y`
Cursor: `npx skills add tech-leads-club/agent-skills --skill perf-astro -g -a cursor -y`
Gemini CLI: `npx skills add tech-leads-club/agent-skills --skill perf-astro -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add tech-leads-club/agent-skills`

## Description

Astro-specific performance optimizations for 95+ Lighthouse scores. Covers critical CSS inlining, compression, font loading, and LCP optimization. Use when optimizing Astro site performance, improving Astro Lighthouse scores, or configuring astro-critters. Do NOT use for non-Astro sites (use perf-web-optimization or core-web-vitals) or running Lighthouse audits (use perf-lighthouse).

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Astro Performance Playbook

Astro-specific optimizations for 95+ Lighthouse scores.

## Quick Setup

```bash
npm install astro-critters @playform/compress
```

```js
// 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:

```js
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
})
```

## Layout Pattern

Structure your `Layout.astro` for performance:

```astro
---
import '../styles/global.css'
---

<!doctype html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- Font fallback (prevents FOIT) -->
    <style>
      @font-face {
        font-family: 'Inter';
        font-display: swap;
        src: local('Inter');
      }
    </style>

The rest: https://github.com/tech-leads-club/agent-skills/blob/HEAD/packages/skills-catalog/skills/(performance)/perf-astro/SKILL.md