Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →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).
.claude/skills/tech-leads-club-perf-astro/SKILL.md| Test case | Without → With | Effect | Δ tokens | Δ turns |
|---|---|---|---|---|
| case-01 | ✗→✓ | ▲ Improved | -28% | 0% |
| case-03 | ✗→✓ | ▲ Improved | 20% | 0% |
| case-09 | ✗→✓ | ▲ Improved | 8% | 0% |
| case-10 | ✗→✓ | ▲ Improved | -39% | 0% |
| case-11 | ✗→✓ | ▲ Improved | -30% | 0% |
Astro-specific optimizations for 95+ Lighthouse scores.
bashnpm 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, }), ], })
Automatically extracts and inlines critical CSS. No configuration needed.
What it does:
Build output shows what it inlined:
Inlined 40.70 kB (80% of original 50.50 kB) of _astro/index.xxx.css.Minifies HTML, CSS, and JavaScript in the final build.
Options:
jscompress({ 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 })
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> <!-- 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>
bashnpx lighthouse https://your-site.com --preset=perf --form-factor=mobile
See also:
astro-critters installed and configured@playform/compress installed and configuredmedia="print" onload pattern<head>| Case | Status | Duration (ms) | Turns | Tokens | Tool calls | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Without | With | Δ | Without | With | Δ | Without | With | Δ | Without | With | Δ | ||
case-01 | fail→pass | 13,438 | 4,569 | -66% | 1 | 1 | 0% | 2,430 | 1,739 | -28% | 0 | 0 | — |
case-02 | fail→fail | 51,934 | 9,749 | -81% | 1 | 1 | 0% | 3,115 | 2,912 | -7% | 0 | 0 | — |
case-03 | fail→pass | 12,158 | 8,018 | -34% | 1 | 1 | 0% | 2,129 | 2,553 | +20% | 0 | 0 | — |
case-04 | pass→pass | 15,357 | 3,786 | -75% | 1 | 1 | 0% | 2,822 | 1,631 | -42% | 0 | 0 | — |
case-05 | pass→pass | 10,037 | 7,450 | -26% | 1 | 1 | 0% | 1,841 | 2,349 | +28% | 0 | 0 | — |
case-06 | pass→pass | 12,002 | 4,229 | -65% | 1 | 1 | 0% | 2,007 | 1,675 | -17% | 0 | 0 | — |
case-07 | pass→pass | 10,335 | 6,097 | -41% | 1 | 1 | 0% | 2,020 | 2,028 | +0% | 0 | 0 | — |
case-08 | pass→fail | 10,308 | 8,839 | -14% | 1 | 1 | 0% | 2,001 | 2,581 | +29% | 0 | 0 | — |
case-09 | fail→pass | 9,154 | 4,112 | -55% | 1 | 1 | 0% | 1,554 | 1,671 | +8% | 0 | 0 | — |
case-10 | fail→pass | 14,763 | 2,972 | -80% | 1 | 1 | 0% | 2,337 | 1,420 | -39% | 0 | 0 | — |
case-11 | fail→pass | 14,951 | 4,714 | -68% | 1 | 1 | 0% | 2,504 | 1,764 | -30% | 0 | 0 | — |
case-12 | pass→pass | 7,320 | 2,735 | -63% | 1 | 1 | 0% | 1,334 | 1,447 | +8% | 0 | 0 | — |
case-13 | fail→pass | 15,384 | 11,637 | -24% | 1 | 1 | 0% | 2,533 | 2,980 | +18% | 0 | 0 | — |
case-14 | fail→pass | 9,221 | 5,216 | -43% | 1 | 1 | 0% | 1,569 | 1,831 | +17% | 0 | 0 | — |
case-15 | fail→fail | 13,109 | 9,156 | -30% | 1 | 1 | 0% | 2,380 | 2,754 | +16% | 0 | 0 | — |
case-16 | fail→pass | 12,522 | 4,913 | -61% | 1 | 1 | 0% | 2,288 | 1,859 | -19% | 0 | 0 | — |
case-17 | fail→pass | 7,064 | 1,800 | -75% | 1 | 1 | 0% | 1,147 | 1,196 | +4% | 0 | 0 | — |
case-18 | pass→pass | 6,806 | 5,442 | -20% | 1 | 1 | 0% | 1,215 | 1,901 | +56% | 0 | 0 | — |
case-19 | fail→fail | 14,442 | 11,481 | -21% | 1 | 1 | 0% | 2,470 | 2,843 | +15% | 0 | 0 | — |
case-20 | pass→pass | 10,963 | 6,730 | -39% | 1 | 1 | 0% | 1,945 | 2,227 | +14% | 0 | 0 | — |
case-21 | pass→pass | 12,188 | 10,156 | -17% | 1 | 1 | 0% | 2,166 | 2,990 | +38% | 0 | 0 | — |
case-22 | pass→pass | 12,124 | 10,179 | -16% | 1 | 1 | 0% | 2,349 | 2,879 | +23% | 0 | 0 | — |
DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 22 cases were attempted. The headline lift of +36 percentage points is the difference between those two pass rates over the 22 comparable cases. 1 case got worse with the skill loaded, and it is included in that figure.
Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.
Other measured skills in the registry, with their headline benchmark lift.