perf-astro
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).
npx skills add tech-leads-club/agent-skills --skill perf-astro --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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 '..
- Quick Setup
- Integrations
- astro-critters
- @playform/compress
- Layout Pattern
- Measuring
- Checklist
npm install astro-critters @playform/compress npx lighthouse https://your-site.com --preset=perf --form-factor=mobile
What does the perf-astro skill do?
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).
How do I install it?
Run `npx skills add tech-leads-club/agent-skills --skill perf-astro --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From tech-leads-club/agent-skills, a repository with 4,983 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.