Skip to content
Development
Skill

/perf-astro

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

BOOST
@tech-leads-clubtech-leads-club@tech-leads-club
From plugin
agent-skills
7.1k94 skills

Claude Code

$ npx -y skills add tech-leads-club/agent-skills --skill perf-astro --agent claude-code

SKILL.md

perf-astro.SKILL.md
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'
---

<!doctype html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- Font fallback (prevents FOIT) -->
    <style>
      @font-face {
        font-family: 'Inter';
        font-display: swap;
        src: local('Inter');
      }
    </style>

    <!-- Non-blocking Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap"
      media="print"
      onload="this.media='all'"
    />
    <noscript>
      <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap">
    </noscript>

    <!-- Preload LCP images -->
    <link rel="preload" as="image" href="/hero.png" fetchpriority="high">

    <title>{title}</title>

    <!-- Defer third-party scripts -->
    <script>
      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);
    </script>
  </head>
  <body>
    <slot />
  </body>
</html>

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 `<head>`
Read more
Read it on GitHub ↗
Stats
TypeScriptJavaScriptNodeReactAWSCloudflareVercelGitHubAnthropicMCPJiraFigma
7,153
Stars
569
Forks
Active
Maintenance
TypeScript
Language
Last commit
Created

Repo: tech-leads-club/agent-skills

In this plugin
94 skills
See everything inside
@tech-leads-club
Ships withagent-skills

The secure, validated skill registry for professional AI coding agents. Extend Antigravity, Claude Code, Cursor, Copilot and more with absolute confidence.

7.1k94 skills
Get the whole plugin

Stars on GitHub

Momentum

stars in total
7.1k
Star history of tech-leads-club/agent-skills on GitHub, a chart by star-history.com
See what's trending this week

Other skills on agent-skills.

See all 94 skills in agent-skills

More skills from other plugins.

brainstorming
Auto-invoked

brainstorming

You MUST use this before any creative work - creating features, building components, adding functionality, modifying behavior, or…

superpowers13d311k
@obra@obraInstall Skill
ask-matt

ask-matt

Ask which skill or flow fits your situation. A router over the skills in this repo.

skills11d309k
@mattpocock@mattpocockInstall Skill
accessibility
Auto-invoked

accessibility

Design, implement, and audit accessible UI to WCAG 2.2 Level AA across Web, iOS, and Android — semantic ARIA roles and labels,…

ecc12d293k
@affaan-m@affaan-mInstall Skill
compiler-commit

compiler-commit

Use when you want to verify compiler changes and commit with the correct convention. Runs tests, lint, and format, then commits…

react2d252k
@facebook@facebookInstall Skill

Questions about perf-astro.

Which coding agents can use perf-astro?
perf-astro installs in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI, using each agent's flag shown on this page. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.