Perf Astro

---

name: perf-astro description: 'Astro-specific performance optimizations for 95+ Lighthouse scores. Covers critical CSS inlining, compression, font loading, and LCP optimization. Use when optimizing Astro site performance, improving Astro Lighthouse scores, or configuring astro-critters. Do NOT use for non-Astro sites (use perf-web-optimization or core-web-vitals) or running Lighthouse audits (use perf-lighthouse).' ---

Astro Performance Playbook

Astro-specific optimizations for 95+ Lighthouse scores.

Quick Setup

npm install astro-critters @playform/compress

// astro.config.mjs
import { defineConfig } from 'astro/config'
import critters from 'astro-critters'
import compress from '@playform/compress'

export default defineConfig({
  integrations: [
    critters(),
    compress({
      CSS: true,
      HTML: true,
      JavaScript: true,
      Image: false,
      SVG: false,
    }),
  ],
})

Integrations

astro-critters

Automatically extracts and inlines critical CSS. No configuration needed.

What it does:

• Scans rendered HTML for above-the-fold elements
• Inlines only the CSS those elements need
• Lazy-loads the rest

Build output shows what it inlined:

Inlined 40.70 kB (80% of original 50.50 kB) of _astro/index.xxx.css.

@playform/compress

Minifies HTML, CSS, and JavaScript in the final build.

Options:

compress({
  CSS: true, // Minify CSS
  HTML: true, // Minify HTML
  JavaScript: true, // Minify JS
  Image: false, // Skip if using external image optimization
  SVG: false, // Skip if SVGs are already optimized
})

Layout Pattern

Structure your Layout.astro for performance:

---
import '../styles/global.css'
---

  
    
    

    
    
      @font-face {
        font-family: 'Inter';
        font-display: swap;
        src: local('Inter');
      }
    

    
    
    
    
    
      
    

    
    

    {title}

    
    
      let loaded = false;
      function loadAnalytics() {
        if (loaded) return;
        loaded = true;
        // Load GTM, analytics, etc.
      }
      ['scroll', 'click', 'touchstart'].forEach(e => {
        document.addEventListener(e, loadAnalytics, { once: true, passive: true });
      });
      setTimeout(loadAnalytics, 5000);
    
  
  
    
  

Measuring

npx lighthouse https://your-site.com --preset=perf --form-factor=mobile

See also:

• perf-lighthouse - Running audits, reading reports, setting budgets
• perf-web-optimization - Core Web Vitals, bundle size, caching strategies

Checklist

• [ ] astro-critters installed and configured
• [ ] @playform/compress installed and configured
• [ ] Google Fonts use media="print" onload pattern
• [ ] Third-party scripts deferred to user interaction
• [ ] LCP images preloaded in ``

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: svssdeva
• Source: svssdeva/agentic-skills
• License: MIT

Install and usage instructions live in the source repository linked above.