Perf Astro

by tech-leads-club120b67676388No licenseListed Oct 8, 2026Updated Oct 8, 2026

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).

Instructions onlySoftware Development
AI-generated overview

Astro-specific performance playbook for reaching 95+ Lighthouse scores via critical CSS, compression, fonts and LCP tuning.

What it does
Provides an Astro performance playbook covering critical CSS inlining with astro-critters, build minification with @playform/compress, font loading patterns, and LCP image preloading. It includes configuration snippets for astro.config.mjs, a performance-oriented Layout.astro pattern, a measurement command, and a checklist. The deliverable is guidance and configuration code rather than generated files.
When to use it
Use when optimizing an Astro site's performance, improving Astro Lighthouse scores, or configuring astro-critters. It is not intended for non-Astro sites or for running Lighthouse audits.
Requirements
Requires an Astro project with npm to install astro-critters and @playform/compress; the measurement step uses npx lighthouse against a live URL, so network access is needed. No scripts ship with the skill.

Astro Performance Playbook

Astro-specific optimizations for 95+ Lighthouse scores.

Quick Setup

bash
npm install astro-critters @playform/compress
js
// astro.config.mjsimport { 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:

js
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:

astro
---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

bash
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>

Source and attribution

Source:tech-leads-club/agent-skillsinpackages/skills-catalog/skills/(performance)/perf-astroat commit120b676

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

More from tech-leads-club/agent-skills

Nx Workspace

tech-leads-club

Guides configuring, exploring and optimizing Nx monorepo workspaces, including affected analysis and CI/CD setup.

DevOps & CloudOct 8, 2026

Nx Run Tasks

tech-leads-club

Runs build, test, lint, serve and other tasks in an Nx workspace using run, run-many and affected commands.

Software DevelopmentOct 8, 2026

Nx Generate

tech-leads-club

Guides an agent through discovering, validating, running and verifying Nx generators to scaffold code in a monorepo.

Software DevelopmentOct 8, 2026

Nx Ci Monitor

tech-leads-club

Monitors Nx Cloud CI pipeline status and orchestrates self-healing fixes until CI passes or a limit is reached.

DevOps & CloudOct 8, 2026

Excalidraw Studio

tech-leads-club

Generates Excalidraw .excalidraw JSON diagram files from natural-language descriptions.

Includes scripts
Design & CreativeOct 8, 2026

Chrome Devtools

tech-leads-club

Controls a live Chrome browser through the chrome-devtools MCP server for debugging, inspection, automation and performance profiling.

Software DevelopmentOct 8, 2026

More in Software Development

Playground

anthropics

Featured

Builds self-contained interactive HTML playgrounds with controls, live preview, and copyable prompt output.

Software Development37Kupdated today

M5 Onboard

anthropics

Featured

Provisions M5Stack ESP32 boards by detecting them on USB, flashing UIFlow 2.0 firmware, and installing a MicroPython app bundle.

Software Development37Kupdated today

Cardputer Buddy

anthropics

Featured

Guides iterating on a Cardputer-Adv MicroPython app bundle: adding apps, pushing files over USB-serial, tailing logs, and running REPL commands.

Software Development37Kupdated today

Dpop Adoption

google

Featured

Guides implementation of OAuth 2.0 DPoP (RFC 9449) sender-constrained refresh tokens for Google's OAuth platform.

Software Development21Kupdated today

Gemini Live Api

google

Featured

Generates a Gemini Live API WebSocket client class, tests, docs, and a demo UI for bidirectional streaming.

Software Development21Kupdated today

Gemini Api

google

Featured

Guides use of the Gemini API on Google's Agent Platform with the Gen AI SDK across languages and capabilities.

Software Development21Kupdated today