skills.rest
rodrigotoledo
rodrigotoledoCOMMUNITY
Explore all skills by this author →
Website𝕏@foolkgsGitHub

perf-astro

Inline critical CSS and compress assets in Astro builds.

Updated Jun 18, 2026
Search Tags:#performance#lighthouse#astro#critical-css#inlining#font-loading
One-click install
npx skills add https://github.com/rodrigotoledo/trading-exchange --skill perf-astro-rodrigotoledo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: perf-astro
Source: https://github.com/rodrigotoledo/trading-exchange/tree/main/packages/skills-catalog/skills/%28performance%29/perf-astro
Command: npx skills add https://github.com/rodrigotoledo/trading-exchange --skill perf-astro-rodrigotoledo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Astro-specific performance optimization techniques to push Astro projects toward 95+ Lighthouse scores, including optimized CSS, font loading, and build-time inlining.

Core Features & Use Cases

  • Inlines critical CSS with astro-critters to improve FCP and CLS.
  • Uses @playform/compress to minify HTML, CSS, and JavaScript in the final build.
  • Provides layout patterns and font-loading strategies to optimize LCP, CLS, and overall render speed.
  • Offers measurement guidance using Lighthouse to validate improvements.

Quick Start

Install the required packages and configure your Astro project as described to enable the performance optimizations.

Frequently Asked Questions about perf-astro

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

FAQPage Schema
How do I improve my Astro site's Lighthouse performance score for better LCP?▼

To improve your Astro site's Lighthouse performance score, you can apply critical CSS inlining, asset compression, and optimized font-loading strategies to target LCP, FCP, and CLS metrics.

What is critical CSS inlining and how does it affect Astro render speed?▼

Critical CSS inlining extracts and embeds only the necessary CSS directly into the HTML to improve render speed. In Astro, this mechanism is handled by the astro-critters integration to boost FCP and CLS.

How do I configure build-time asset compression for an Astro project?▼

You can configure build-time asset compression in an Astro project by integrating the @playform/compress package to minify HTML, CSS, and JavaScript files in the final build output.

Does this Astro performance approach require specific dependencies to work?▼

Yes, achieving these Lighthouse optimizations requires the astro-critters and @playform/compress Astro integrations to handle critical CSS inlining and asset compression during the build process.

Can I use these font-loading and LCP optimization techniques for any Astro project?▼

These font-loading and LCP optimization techniques apply to Astro projects specifically targeting Lighthouse scores of 95 or higher where CSS delivery and render speed need validation.

Related Skills

Explore More Software Engineering Skills→
yuheitomiyuheitomi

set-up-biome

Configure Biome and Shadcn/UI preferences in React projects with pnpm.

Community
Advanced
deomiarndeomiarn

performance-audit

Audit website performance with Lighthouse against Core Web Vitals targets.

Community
Intermediate
MatheusrlrMatheusrlr
1

perf-astro

Optimize Astro websites with critical CSS inlining and asset compression.

Community
Intermediate
svssdevasvssdeva
1

perf-astro

Optimize Astro sites by inlining critical CSS and compressing builds.

Community
Intermediate