perf-astro

Inline critical CSS, optimize fonts, and enable build-time compression for Astro projects.

1|1|Updated Apr 19, 2026

Search Tags:#lighthouse #astro #web-performance #critical-css #lcp #font-loading

Ready to run

npx skills add https://github.com/RamonsDka/the-architect-overlay --skill perf-astro-ramonsdka

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: perf-astro
Source: https://github.com/RamonsDka/the-architect-overlay/tree/main/skills/perf-astro
Command: npx skills add https://github.com/RamonsDka/the-architect-overlay --skill perf-astro-ramonsdka

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Astro sites can struggle with loading performance, large CSS/JS payloads, and suboptimal LCP, making it difficult to meet high Lighthouse targets.

Core Features & Use Cases

Inlines critical CSS, optimizes font loading, and enables build-time compression to boost rendering performance.
Applies non-blocking loading patterns and resource prioritization to reduce weight and improve TTI/LCP.
Use Case: A marketing site built with Astro aims for 95+ Lighthouse scores across mobile and desktop using astro-critters and @playform/compress.

Quick Start

Run the astro performance playbook to enable critters and compress integrations in your Astro project and run a production build to verify performance.

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 Lighthouse scores for mobile and desktop?▼

To improve Astro Lighthouse scores, inline critical CSS, optimize font loading, and enable build-time compression to target 95+ across mobile and desktop using deterministic config and safe defaults.

What is the best way to optimize Largest Contentful Paint in Astro?▼

The best way to optimize LCP in Astro is applying non-blocking loading patterns and resource prioritization, which reduces payload weight and directly targets LCP improvements for high Lighthouse scores.

Do I need astro-critters to inline critical CSS in my Astro project?▼

Yes, you need astro-critters to inline critical CSS in your Astro project, as the performance playbook specifically enforces workflows with astro-critters and @playform/compress to achieve measurable rendering improvements.

How does build-time compression work with Astro to boost web performance?▼

Build-time compression works with Astro by enabling @playform/compress during the build process, reducing large CSS and JS payloads to boost rendering performance and improve Time to Interactive metrics.

Why does my Astro site have a poor LCP score despite being static?▼

Astro sites can have poor LCP scores due to suboptimal font loading and large CSS payloads, but applying non-blocking loading patterns and inlining critical CSS resolves these rendering bottlenecks for better performance.

Can I use @playform/compress with astro-critters in an Astro performance workflow?▼

Yes, you can use @playform/compress with astro-critters in an Astro performance workflow, as the structured playbook enforces deterministic config for both integrations to safely achieve 95+ Lighthouse scores.