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今天更新

Testing Strategy

anthropics

精选

设计测试策略与测试计划，涵盖测试类型、覆盖率目标与示例测试用例。

Software Development27K今天更新

Tech Debt

anthropics

精选

识别、分类并排序技术债务，产出评分后的待办清单与分阶段整改计划。

Software Development27K今天更新

System Design

anthropics

精选

通过需求、高层设计、深入设计、扩展与权衡分析来指导系统与架构设计。

Software Development27K今天更新