skills.rest
kobogithub
kobogithubCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

astro-performance

Optimize Astro applications for Core Web Vitals and build performance.

Updated Jan 14, 2026
Search Tags:#frontend#astro#hydration#web-performance#build-optimization#image-optimization#islands
One-click install
npx skills add https://github.com/kobogithub/dotfiles --skill astro-performance-kobogithub
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: astro-performance
Source: https://github.com/kobogithub/dotfiles/tree/main/opencode/.config/opencode/skills/astro-performance
Command: npx skills add https://github.com/kobogithub/dotfiles --skill astro-performance-kobogithub

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a structured set of best practices to optimize Astro applications for faster load times, improved Core Web Vitals, and leaner builds.

Core Features & Use Cases

  • Core Web Vitals optimization to improve largest contentful paint, first input delay, and cumulative layout shift through image strategies, font loading, and preloading.
  • Image optimization and responsive assets guidance using Astro's image tools and modern formats.
  • Build-time vs runtime considerations including island architecture, selective hydration, and code-splitting.
  • Caching and bundle size strategies to reduce JavaScript payloads and improve caching efficiency.

Quick Start

Configure your Astro project to apply island architecture, image optimization, and build-time performance optimizations.

Frequently Asked Questions about astro-performance

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I improve Core Web Vitals in an Astro application?▼

Improve Core Web Vitals in an Astro application by applying image strategies, font loading, and preloading techniques to boost largest contentful paint, first input delay, and cumulative layout shift.

What's the best way to implement island architecture and selective hydration in Astro?▼

Implement island architecture in Astro by leveraging build-time versus runtime considerations, utilizing selective hydration and code-splitting to minimize JavaScript execution and reduce client-side overhead.

How do I reduce JavaScript bundle size and improve caching efficiency in Astro?▼

Reduce JavaScript bundle size and improve caching efficiency in Astro by applying code-splitting strategies and configuring static asset caching to optimize build outputs and delivery.

Does this Astro performance optimization approach work for frontend teams at scale?▼

This approach suits frontend teams optimizing Astro applications at scale, providing structured best practices for build optimization, component hydration, and Core Web Vitals improvements.

Why does my Astro site have slow load times despite using static generation?▼

Astro sites may load slowly due to unoptimized images, heavy JavaScript payloads from improper hydration, or inefficient caching, requiring build optimization and island architecture strategies.

Related Skills

Explore More Software Engineering Skills→
kegbikegbi
1

astro

Scaffold, configure, and run Astro projects using the Astro CLI.

Community
Intermediate
liauw-medialiauw-media
3

lighthouse-performance-optimization

Run Lighthouse audits through MCP to identify website performance bottlenecks.

Community
Advanced
Arupbiswas09Arupbiswas09

content-delivery

Configure CDN settings for caching, TTL, edge routing, and origin protection.

Community
Advanced
TheerasakPingTheerasakPing
3

integrating-tauri-js-frontends

Configure JavaScript frontend frameworks like Vite and Next.js for Tauri v2 desktop applications.

Community
Intermediate