skills.rest
Peterson-Benhame
Peterson-BenhameCOMMUNITY
Explore all skills by this author →
GitHub

perf-astro

Configures Astro sites with critical CSS inlining, compression, and font loading for Lighthouse optimization.

Updated Sep 15, 2026
Search Tags:#performance#lighthouse#compression#astro#core web vitals#web optimization#critical css
One-click install
npx skills add https://github.com/Peterson-Benhame/agent-skills --skill perf-astro-peterson-benhame
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: perf-astro
Source: https://github.com/Peterson-Benhame/agent-skills/tree/main/packages/skills-catalog/skills/%28performance%29/perf-astro
Command: npx skills add https://github.com/Peterson-Benhame/agent-skills --skill perf-astro-peterson-benhame

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires astro-critters, @playform/compress.

What problem does it solve? Astro sites often ship render-blocking CSS, unminified assets, and blocking third-party scripts that drag Lighthouse scores below 95. This Skill provides a concrete playbook of Astro-specific integrations and layout patterns to fix those bottlenecks. ## Core Features & Use Cases - Critical CSS Inlining: Configure astro-critters to automatically extract and inline above-the-fold CSS while lazy-loading the rest. - Build Compression: Set up @playform/compress to minify HTML, CSS, and JavaScript in the final build output. - Font and Script Loading Patterns: Apply non-blocking Google Fonts loading, font-display swap fallbacks, LCP image preloading, and deferred third-party script loading in Layout.astro. - Use Case: You have an Astro marketing site scoring 78 on Lighthouse mobile. Apply this playbook to inline critical CSS, defer analytics scripts until user interaction, and preload the hero image to push the score above 95. ## Quick Start Ask the AI to configure your Astro project with astro-critters and @playform/compress and update Layout.astro with non-blocking font loading and deferred 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 Lighthouse scores on an Astro site?▼

Install astro-critters and @playform/compress, then add them as integrations in astro.config.mjs. Critters inlines critical CSS automatically, while compress minifies HTML, CSS, and JavaScript in the build output.

How to inline critical CSS in Astro builds?▼

Add the astro-critters integration to astro.config.mjs with no extra configuration. It scans rendered HTML for above-the-fold elements, inlines only the CSS they need, and lazy-loads the remainder.

What is the best way to load Google Fonts in Astro without blocking rendering?▼

Use the media="print" onload="this.media='all'" pattern on the stylesheet link, with a noscript fallback and preconnect hints. Add a local @font-face rule with font-display: swap to prevent invisible text.

Does @playform/compress handle image optimization in Astro?▼

The compress integration can process images, but the recommended configuration sets Image and SVG to false when using external image optimization or already-optimized SVGs. It focuses on minifying HTML, CSS, and JavaScript.

When should I not use this Astro performance approach?▼

Do not use it for non-Astro sites, where general web optimization guidance applies instead. It also does not run Lighthouse audits itself; use a dedicated Lighthouse auditing workflow for measuring and budgets.

Related Skills

Explore More Software Engineering Skills→
svssdevasvssdeva
1

perf-astro

Optimize Astro sites by inlining critical CSS and compressing builds.

Community
Intermediate
deomiarndeomiarn

performance-audit

Audit website performance with Lighthouse against Core Web Vitals targets.

Community
Intermediate
pascallammerspascallammers
1

performance-optimization

Optimize application performance through code splitting, lazy loading, and caching strategies.

Community
Advanced
tech-leads-clubtech-leads-club
5.0k

perf-astro

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

Official
Intermediate