Astro Performance Skill
Purpose
Achieve 90+ Lighthouse scores and pass Core Web Vitals. Direct impact on SEO rankings and conversion rates.
Core Rules
- Preload LCP elements (hero images/text) with fetchpriority="high"
- Set explicit dimensions on all images and iframes to prevent CLS
- Use font-display: swap for all web fonts
- Self-host fonts and subset to reduce file size
- Defer third-party scripts until after load or user interaction
- Break up long tasks to keep INP under 200ms
- Use AVIF/WebP formats with responsive images
- Keep JS bundle under 100KB gzipped
- Implement edge caching with long cache headers for assets
- Monitor real user metrics with web-vitals library
Core Web Vitals Targets
| Metric | Good | Needs Improvement | Poor |
|---|
| LCP (Largest Contentful Paint) | ≤2.5s | 2.5-4s | >4s |
| INP (Interaction to Next Paint) | ≤200ms | 200-500ms | >500ms |
| CLS (Cumulative Layout Shift) | ≤0.1 | 0.1-0.25 | >0.25 |
Bundle Size Budgets
| Asset Type | Budget |
|---|
| Total JS | <100KB (gzipped) |
| Total CSS | <50KB (gzipped) |
| Hero image | <200KB |
| Any single image | <100KB |
References
Core Web Vitals
Assets & Resources
- Bundle Size - Analysis, tree shaking, dynamic imports
- Fonts - Self-hosting, subsetting, variable fonts
- Images - Format priority, responsive images
Infrastructure
Forbidden
- Render-blocking CSS in body
- Synchronous third-party scripts in head
- Unoptimized images
- Web fonts without
font-display: swap
- Layout shifts from dynamic content
- Main thread blocking >50ms
Definition of Done