Claude-skill-registry astro-performance
Core Web Vitals and performance optimization for Astro sites. LCP, CLS, INP optimization, bundle size, fonts, third-party scripts. Use for performance tuning.
install
source · Clone the upstream repo
git clone https://github.com/majiayu000/claude-skill-registry
Claude Code · Install into ~/.claude/skills/
T=$(mktemp -d) && git clone --depth=1 https://github.com/majiayu000/claude-skill-registry "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/data/astro-performance" ~/.claude/skills/majiayu000-claude-skill-registry-astro-performance && rm -rf "$T"
manifest:
skills/data/astro-performance/SKILL.mdsource content
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
- LCP Optimization - Hero images, preloading, server response
- CLS Prevention - Dimensions, skeletons, font display
- INP Optimization - Task chunking, debouncing, content-visibility
Assets & Resources
- Bundle Size - Analysis, tree shaking, dynamic imports
- Fonts - Self-hosting, subsetting, variable fonts
- Images - Format priority, responsive images
Infrastructure
- Third-Party Scripts - GTM, facades, loading attributes
- Caching - Cloudflare headers, cache control
- Testing - Lighthouse, WebPageTest, real user monitoring
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
- Lighthouse Performance ≥90
- LCP ≤2.5s
- CLS ≤0.1
- INP ≤200ms
- Total JS <100KB gzipped
- Hero image preloaded
- Fonts self-hosted with swap
- Third-party scripts deferred