Perf Astro

作者 tech-leads-club120b67676388無授權條款收錄於 2026年10月8日更新於 2026年10月8日

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

僅含說明Software Development
AI 產生的概覽

針對 Astro 的效能最佳化手冊，透過關鍵 CSS、壓縮、字型與 LCP 調校達到 95+ 的 Lighthouse 分數。

功能
提供 Astro 效能最佳化手冊，涵蓋使用 astro-critters 內嵌關鍵 CSS、使用 @playform/compress 壓縮建置產物、字型載入模式，以及 LCP 圖片預先載入。內容包含 astro.config.mjs 設定片段、以效能為導向的 Layout.astro 模式、量測指令與檢查清單。產出為指引與設定程式碼，而非產生的檔案。
適用情境
適用於最佳化 Astro 網站效能、提升 Astro 的 Lighthouse 分數，或設定 astro-critters 的情境。不適用於非 Astro 網站，也不用於執行 Lighthouse 稽核。
執行需求
需要一個 Astro 專案，並以 npm 安裝 astro-critters 與 @playform/compress；量測步驟透過 npx lighthouse 存取線上 URL，因此需要網路連線。此技能未附帶指令碼。

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>

來源與署名

來源：tech-leads-club/agent-skills位於packages/skills-catalog/skills/(performance)/perf-astro提交120b676

授權條款： 無授權條款

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架

更多來自 tech-leads-club/agent-skills 的技能

Nx Workspace

tech-leads-club

指導設定、探索與最佳化 Nx 單體倉庫工作區，包含受影響專案分析與 CI/CD 設定。

DevOps & Cloud2026年10月8日

Nx Run Tasks

tech-leads-club

在 Nx 工作區中使用 run、run-many 和 affected 指令執行建置、測試、lint、serve 等任務。

Software Development2026年10月8日

Nx Generate

tech-leads-club

引導代理探索、驗證、執行並檢查 Nx 產生器，以便在單體儲存庫中產生程式碼。

Software Development2026年10月8日

Nx Ci Monitor

tech-leads-club

監控 Nx Cloud CI 管線狀態，並協調自癒修復，直到 CI 通過或達到限制。

DevOps & Cloud2026年10月8日

Excalidraw Studio

tech-leads-club

依自然語言描述產生 Excalidraw 的 .excalidraw JSON 圖表檔案。

包含腳本
Design & Creative2026年10月8日

Chrome Devtools

tech-leads-club

透過 chrome-devtools MCP 伺服器控制執行中的 Chrome 瀏覽器，用於除錯、檢查、自動化與效能分析。

Software Development2026年10月8日

更多Software Development技能

Playground

anthropics

精選

建立自成一體的互動式 HTML 遊樂場，包含控制項、即時預覽與可複製的提示詞輸出。

Software Development37K今天更新

M5 Onboard

anthropics

精選

透過 USB 偵測 M5Stack ESP32 開發板，燒錄 UIFlow 2.0 韌體並安裝 MicroPython 應用程式套件。

Software Development37K今天更新

Cardputer Buddy

anthropics

精選

指導迭代 Cardputer-Adv 的 MicroPython 應用程式套件：新增應用程式、透過 USB 序列埠推送檔案、查看日誌並執行 REPL 指令。

Software Development37K今天更新

Dpop Adoption

google

精選

指導為 Google OAuth 平台實作 OAuth 2.0 DPoP（RFC 9449）傳送方約束的更新權杖。

Software Development21K今天更新

Gemini Live Api

google

精選

產生 Gemini Live API WebSocket 用戶端類別、測試、文件，以及用於雙向串流的示範介面。

Software Development21K今天更新

Gemini Api

google

精選

說明如何在 Google Agent Platform 上使用 Gen AI SDK 呼叫 Gemini API，涵蓋多種語言與多項功能。

Software Development21K今天更新