name: astro-performance description: Core Web Vitals and performance optimization for Astro sites. LCP, CLS, INP optimization, bundle size, fonts, third-party scripts. Use for performance tuning.

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

Bundle Size Budgets

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