perf-astro
Optimize Astro sites to achieve 95+ Lighthouse scores. Automatically manages CSS, HTML, and JS minification.
Install
mkdir -p .claude/skills/perf-astro && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/1155" && unzip -o skill.zip -d .claude/skills/perf-astro && rm skill.zipInstalls to .claude/skills/perf-astro
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
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).Key capabilities
- →Extract and inline critical CSS using astro-critters
- →Minify HTML, CSS, and JavaScript with @playform/compress
- →Implement font loading with media print and onload patterns
- →Defer third-party scripts until user interaction
- →Preload LCP images with high fetchpriority
How it works
It integrates astro-critters to inline critical CSS and @playform/compress to minify build assets. It also provides a layout pattern for font loading and script deferral to improve performance metrics.
Inputs & outputs
When to use perf-astro
- →Optimizing Astro site performance
- →Improving Google Lighthouse scores
- →Automating critical CSS inlining
About this skill
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
})
Layout Pattern
Structure your Layout.astro for performance:
---
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>
<!-- Non-blocking Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap"
media="print"
onload="this.media='all'"
/>
<noscript>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap">
</noscript>
<!-- Preload LCP images -->
<link rel="preload" as="image" href="/hero.png" fetchpriority="high">
<title>{title}</title>
<!-- Defer third-party scripts -->
<script>
let loaded = false;
function loadAnalytics() {
if (loaded) return;
loaded = true;
// Load GTM, analytics, etc.
}
['scroll', 'click', 'touchstart'].forEach(e => {
document.addEventListener(e, loadAnalytics, { once: true, passive: true });
});
setTimeout(loadAnalytics, 5000);
</script>
</head>
<body>
<slot />
</body>
</html>
Measuring
npx lighthouse https://your-site.com --preset=perf --form-factor=mobile
See also:
- perf-lighthouse - Running audits, reading reports, setting budgets
- perf-web-optimization - Core Web Vitals, bundle size, caching strategies
Checklist
-
astro-crittersinstalled and configured -
@playform/compressinstalled and configured - Google Fonts use
media="print" onloadpattern - Third-party scripts deferred to user interaction
- LCP images preloaded in
<head>
When not to use it
- →Non-Astro sites
- →Running Lighthouse audits
Prerequisites
Limitations
- →Requires manual configuration of astro.config.mjs
- →Does not automate Lighthouse audit execution
How it compares
Unlike manual optimization, this skill provides a pre-configured integration set specifically for the Astro build lifecycle.
Compared to similar skills
perf-astro side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| perf-astro (this skill) | 3 | 5mo | Review | Intermediate |
| nextjs-developer | 328 | 2mo | No flags | Advanced |
| frontend-developer | 27 | 4mo | No flags | Intermediate |
| senior-frontend | 15 | 7mo | Review | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by tech-leads-club
View all by tech-leads-club →You might also like
nextjs-developer
zenobi-us
Expert Next.js developer mastering Next.js 14+ with App Router and full-stack features. Specializes in server components, server actions, performance optimization, and production deployment with focus on building fast, SEO-friendly applications.
frontend-developer
sickn33
Build React components, implement responsive layouts, and handle client-side state management. Masters React 19, Next.js 15, and modern frontend architecture. Optimizes performance and ensures accessibility. Use PROACTIVELY when creating UI components or fixing frontend issues.
senior-frontend
davila7
Comprehensive frontend development skill for building modern, performant web applications using ReactJS, NextJS, TypeScript, Tailwind CSS. Includes component scaffolding, performance optimization, bundle analysis, and UI best practices. Use when developing frontend features, optimizing performance, implementing UI/UX designs, managing state, or reviewing frontend code.
nextjs-app-router-patterns
wshobson
Master Next.js 14+ App Router with Server Components, streaming, parallel routes, and advanced data fetching. Use when building Next.js applications, implementing SSR/SSG, or optimizing React Server Components.
vercel-performance-tuning
jeremylongshore
Optimize Vercel API performance with caching, batching, and connection pooling. Use when experiencing slow API responses, implementing caching strategies, or optimizing request throughput for Vercel integrations. Trigger with phrases like "vercel performance", "optimize vercel", "vercel latency", "vercel caching", "vercel slow", "vercel batch".
bundle-dynamic-imports
TheOrcDev
Use next/dynamic for lazy-loading heavy components. Apply when importing large components like editors, charts, or rich text editors that aren't needed on initial render.