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.
Best use case
astro-performance is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Core Web Vitals and performance optimization for Astro sites. LCP, CLS, INP optimization, bundle size, fonts, third-party scripts. Use for performance tuning.
Teams using astro-performance should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/astro-performance/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How astro-performance Compares
| Feature / Agent | astro-performance | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Core Web Vitals and performance optimization for Astro sites. LCP, CLS, INP optimization, bundle size, fonts, third-party scripts. Use for performance tuning.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# 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](references/lcp-optimization.md) - Hero images, preloading, server response - [CLS Prevention](references/cls-prevention.md) - Dimensions, skeletons, font display - [INP Optimization](references/inp-optimization.md) - Task chunking, debouncing, content-visibility ### Assets & Resources - [Bundle Size](references/bundle-size.md) - Analysis, tree shaking, dynamic imports - [Fonts](references/fonts.md) - Self-hosting, subsetting, variable fonts - [Images](references/images.md) - Format priority, responsive images ### Infrastructure - [Third-Party Scripts](references/third-party-scripts.md) - GTM, facades, loading attributes - [Caching](references/caching.md) - Cloudflare headers, cache control - [Testing](references/testing.md) - 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
Related Skills
Content Performance Explainer
Diagnose and explain why e-commerce content is or isn't performing against KPIs, using causal analysis frameworks, funnel decomposition, and competitive benchmarking to generate actionable improvement recommendations.
astro-cta-injector
Inject Call-to-Action blocks into Astro site content with intelligent placement strategies. Use when the user wants to add CTAs, newsletter signups, product promotions, or any content blocks to blog posts. Supports multiple placement strategies (end, after 50%, after 60%), content scoring for relevance, and dry-run preview.
astro-content
Create Astro/Starlight MDX content pages. Use when the user says "write a new article", "add a blog post", "create content in Tech/Life category", or "add an MDX page".
astro-blog-write
Phase 3 - Writing blog content with human voice and SEO optimization
astro-i18n
Internationalization patterns for Astro sites. Multi-language routing, content translation, locale switching, RTL support. Use for multi-market lead generation.
managing-astro-local-env
Manage local Airflow environment with Astro CLI. Use when the user wants to start, stop, or restart Airflow, view logs, troubleshoot containers, or fix environment issues. For project setup, see setting-up-astro-project.
performance-analytics
Analyze marketing performance with key metrics, trend analysis, and optimization recommendations. Use when building performance reports, reviewing campaign results, analyzing channel metrics (email, social, paid, SEO), or identifying what's working and what needs improvement.
astro-seo
SEO markup patterns for Astro lead generation sites. Meta tags, Open Graph, Schema.org, sitemap, robots. Use for all SEO implementation.
visualiser-performance
React Flow performance rules and review checklist for the @eventcatalog/visualiser package. Automatically applies when making changes to any file under packages/visualiser/. Use this skill to audit, review, or implement visualiser code with performance in mind.
spring-boot-performance
Guide for optimizing Spring Boot application performance including caching, pagination, async processing, and JPA optimization. Use this when addressing performance issues or implementing high-traffic features.
PostgreSQL Performance Optimization
Production-grade PostgreSQL query optimization, indexing strategies, performance tuning, and modern features including pgvector for AI/ML workloads. Master EXPLAIN plans, query analysis, and database design for high-performance applications
performance
Optimize web performance for faster loading and better user experience. Use when asked to "speed up my site", "optimize performance", "reduce load time", "fix slow loading", "improve page speed", or "performance audit".