perf-astro

Configure Astro builds with critical CSS inlining, font loading, and compression.

59|14|Updated Mar 10, 2026

Search Tags:#lighthouse #compression #astro #web-performance #critical-css #build-optimization #font-loading

Ready to run

npx skills add https://github.com/guilhermemarketing/esc-skills --skill perf-astro-guilhermemarketing

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: perf-astro
Source: https://github.com/guilhermemarketing/esc-skills/tree/main/skills/perf-astro
Command: npx skills add https://github.com/guilhermemarketing/esc-skills --skill perf-astro-guilhermemarketing

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Astro projects often struggle to consistently achieve Lighthouse targets due to suboptimal CSS delivery, font loading, and resource sizing.

Core Features & Use Cases

Critical CSS inlining to reduce render-blocking CSS
JavaScript and HTML compression to shrink bundle sizes
Efficient font loading strategies to improve first contentful paint
End-to-end performance tuning for Astro-based sites and apps
Triggered optimizations when Astro performance signals are detected

Quick Start

Run the Astro performance setup on your project to enable critical CSS inlining, font loading optimization, and build-time compression.

Frequently Asked Questions about perf-astro

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

FAQPage Schema

How do I improve Astro performance to reach a 95+ Lighthouse score?▼

To improve Astro performance for a 95+ Lighthouse score, you can apply build-time optimizations like inlining critical CSS, enabling efficient font loading, and compressing JavaScript and HTML assets.

What causes render-blocking CSS in Astro and how do I fix it?▼

Render-blocking CSS in Astro is caused by external stylesheets delaying the first paint. You can fix this by inlining critical CSS directly into the HTML during the build process to optimize delivery.

How do I optimize font loading in Astro for a better first contentful paint?▼

Optimizing font loading in Astro involves configuring efficient font loading strategies during the build to reduce layout shifts and improve the first contentful paint metric.

Does this Astro performance optimization require any external dependencies?▼

No external dependencies are required. The optimization process relies on enabling built-in Astro features like astro-critters and compression pipelines directly within your build configuration.

What is the best way to shrink JavaScript and HTML bundle sizes in an Astro project?▼

The best way to shrink JavaScript and HTML bundle sizes in Astro is to apply build-time compression pipelines that automatically optimize and compress assets before deployment.

When should I apply critical CSS inlining and build-time compression to my Astro app?▼

You should apply critical CSS inlining and build-time compression when your Astro-based website or app struggles with suboptimal CSS delivery, font loading, and resource sizing that lowers Lighthouse scores.