Perf Astro

Name: Perf Astro
Author: tech-leads-club

tech-leads-club/agent-skills

204 installs
5k repo stars
Updated August 4, 2026
tech-leads-club/agent-skills

Use perf-astro for development tasks

About

perf-astro: A skill for development. This provides functionality for development workflows.

perf-astro

Perf Astro by the numbers

204 all-time installs (skills.sh)
+11 installs in the week ending Aug 5, 2026 (Skillselion tracking)
Ranked #1,979 of 4,347 Backend & APIs skills by installs in the Skillselion catalog
Data as of Aug 5, 2026 (Skillselion catalog sync)

npx skills add https://github.com/tech-leads-club/agent-skills --skill perf-astro

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/tech-leads-club/agent-skills/perf-astro.svg)](https://skillselion.com/skills/tech-leads-club/agent-skills/perf-astro)

Installs	204
repo stars	★ 5k
Last updated	August 4, 2026
Repository	tech-leads-club/agent-skills ↗

What it does

Use perf-astro for development tasks

Files

SKILL.mdMarkdownGitHub ↗

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

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>

Related skills

Lark Openapi ExplorerInstantly explore, test, and generate calls against the full Lark (Feishu) OpenAPI surface without leaving their agent workflow.493k

Lark EventConsume real-time events from Lark/Feishu as structured NDJSON streams inside AI agent workflows.387k16k

Lark Openapi ExplorerWhen an existing Lark/Feishu skill or CLI command cannot fulfill a specific requirement and they need to discover and invoke the exact native OpenAPI endpoint.386k16k

Just ScrapeQuickly search, crawl, extract structured JSON, or monitor web pages without writing custom scraping code.245k41

Lark AppsQuery the current visibility and permission scope of a Lark (Feishu) app without writing HTTP client code.235k16k

Design An InterfaceGenerate multiple radically different interface or API designs in parallel before committing to one.188k198k

Backend & APIsbackendintegrations