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