perf-astro
Scannednpx machina-cli add skill tech-leads-club/agent-skills/perf-astro --openclawFiles (1)
SKILL.md
3.6 KB
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>
Source
git clone https://github.com/tech-leads-club/agent-skills/blob/main/packages/skills-catalog/skills/(performance)/perf-astro/SKILL.mdView on GitHub Overview
Perf-astro provides Astro-specific performance optimizations aimed at achieving 95+ Lighthouse scores. It centers on inlining critical CSS with astro-critters, minifying assets with @playform/compress, and fine-tuning font loading and LCP practices. Use it when optimizing Astro site performance, boosting Astro Lighthouse results, or configuring astro-critters.
How This Skill Works
The skill configures Astro with astro-critters to extract and inline above-the-fold CSS and uses @playform/compress to minify HTML, CSS, and JS in the final build. It also demonstrates a layout pattern for font loading (font-face with font-display: swap, non-blocking Google Fonts via media attributes) and preloads LCP images while deferring non-critical scripts to improve LCP and render times.
When to Use It
- You want to optimize an Astro site to reach 95+ Lighthouse scores.
- You need automatic inlining of critical CSS for above-the-fold content.
- You want to minify HTML, CSS, and JavaScript in the final build with a single config.
- You're focusing on font loading strategies to prevent FOIT and speed up text rendering.
- You aim to improve LCP by preloading LCP assets and deferring third-party scripts.
Quick Start
- Step 1: npm install astro-critters @playform/compress
- Step 2: Update astro.config.mjs to include critters() and compress({ CSS: true, HTML: true, JavaScript: true, Image: false, SVG: false }) in the integrations array as shown in the Quick Setup.
- Step 3: Build and measure with Lighthouse using the perf preset to verify 95+ scores and optimized LCP/CLS metrics.
Best Practices
- Install and configure astro-critters and @playform/compress as shown in the Quick Setup.
- Rely on astro-critters to automatically extract and inline only the critical CSS for above-the-fold content.
- Enable compress with CSS, HTML, and JavaScript minification in the final build.
- Follow the Layout Pattern: use font-display: swap, non-blocking font loading, and preloads for LCP assets.
- Verify improvements by running Lighthouse with the perf preset and reviewing output (Inlined CSS, reduced render-blocking resources).
Example Use Cases
- A personal blog or portfolio built with Astro that needs fast first paint and 95+ Lighthouse mobile scores.
- A marketing site with heavy typography and hero images that benefits from inlined critical CSS and font loading tweaks.
- A documentation portal that requires compact HTML/CSS/JS and quick render of above-the-fold content.
- An e-commerce storefront built with Astro aiming for fast CLS and improved LCP for product hero images.
- A content-heavy site using external fonts where font loading strategy reduces FOIT and accelerates rendering.
Frequently Asked Questions
Add this skill to your agents
