skills.rest
svssdeva
svssdevaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

perf-astro

Optimize Astro sites by inlining critical CSS and compressing builds.

1|1|Updated Apr 20, 2026
Search Tags:#performance optimization#lighthouse#astro#core web vitals#minification#font loading#critical css
One-click install
npx skills add https://github.com/svssdeva/agentic-skills --skill perf-astro-svssdeva
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: perf-astro
Source: https://github.com/svssdeva/agentic-skills/tree/main/astro/perf-astro
Command: npx skills add https://github.com/svssdeva/agentic-skills --skill perf-astro-svssdeva

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves the problem of slow Astro pages and missed Core Web Vitals by providing a focused, Astro-specific performance playbook that you can apply consistently to production builds.

Core Features & Use Cases

  • Critical CSS inlining using astro-critters to reduce render-blocking resources and speed up above-the-fold paint.
  • End-to-end build compression with @playform/compress to minify HTML, CSS, and JavaScript in the final output.
  • Performance-first Layout pattern to reduce FOIT, improve font loading behavior, preload likely LCP images, and defer third-party scripts until user interaction or a timeout.
  • Use case: Improving a marketing site built in Astro so it routinely reaches strong Lighthouse performance by combining build tooling, layout conventions, and measurement discipline.

Quick Start

Apply astro-critters and @playform/compress in your astro.config.mjs, then update your Layout.astro to use non-blocking Google Fonts, preload the LCP image, and defer third-party scripts.

Frequently Asked Questions about perf-astro

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

FAQPage Schema
How do I improve Core Web Vitals and reach a 95+ Lighthouse score in Astro?▼

To improve Core Web Vitals in Astro, apply critical CSS inlining, enable build minification, and implement layout patterns like non-blocking fonts and LCP image preloading to boost Lighthouse scores.

What is the best way to reduce render-blocking resources for static and SSR Astro sites?▼

Reducing render-blocking resources in Astro involves inlining critical CSS with astro-critters and compressing HTML, CSS, and JavaScript payloads during the build process.

How do I configure build minification and compression in an Astro project?▼

You configure build minification in an Astro project by integrating @playform/compress within astro.config.mjs to minify HTML, CSS, and JavaScript in the final output.

Does this Astro performance optimization approach work for both static and server-side rendered sites?▼

Yes, this Astro performance optimization applies to both static and SSR projects, reducing payload size and improving above-the-fold rendering across different rendering modes.

Why does my Astro page still have slow font loading and a poor LCP score?▼

Slow font loading and poor LCP scores in Astro often occur when Layout.astro lacks non-blocking Google Fonts, LCP image preloading, and deferred third-party scripts.

When should I defer third-party scripts in Astro to avoid performance penalties?▼

You should defer third-party scripts in Astro until user interaction or a timeout to prevent them from blocking initial page rendering and degrading Core Web Vitals.

Related Skills

Explore More Software Engineering Skills→
BrunoAMSilvaBrunoAMSilva

astro

Detect Astro output modes and apply client directive strategies.

Community
Intermediate
liauw-medialiauw-media
3

lighthouse-performance-optimization

Run Lighthouse audits through MCP to identify website performance bottlenecks.

Community
Advanced
TheBushidoCollectiveTheBushidoCollective
187

tailwind-performance

Optimize Tailwind CSS production builds by configuring content paths and JIT mode.

Official
Intermediate
tech-leads-clubtech-leads-club
5.0k

perf-astro

Optimize Astro projects for Lighthouse performance with critical CSS and asset compression.

Official
Intermediate