用途
perf-astro 是一个 Astro 专用性能优化工作流技能,适用于需要对 Astro 站点做性能调优、提升 Lighthouse 评分的场景。资料说明其目标为 95 分以上的 Lighthouse 分数,覆盖关键 CSS 内联、压缩、字体加载与 LCP 优化。
主要能力
技能包含以下上游导入内容:
- 关键 CSS 内联:使用
astro-critters,无需配置即可自动扫描渲染后的 HTML,仅内联首屏元素所需的 CSS,其余延迟加载,并在构建输出中显示内联结果。 - 构建压缩:使用
@playform/compress对最终构建中的 HTML、CSS、JavaScript 进行压缩,可按需关闭图片与 SVG 压缩。 - Layout 模式:提供 Layout.astro 的性能结构示例,包括字体回退
font-display: swap、非阻塞 Google Fonts 加载(media="print"配合onload)、noscript兜底、LCP 图片预加载及第三方脚本按用户交互延迟加载。 - 度量:给出 Lighthouse 命令行测量方式。
- 检查清单:涵盖 critters 与 compress 的安装配置、字体加载模式、第三方脚本延迟、LCP 图片预加载等条目。
使用方式
快速安装与配置示例:
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,
}),
],
})
工作流要求:先确认用户目标与任务范围;在加载任何上游支持文件前读取概览与来源文件(metadata.json、ORIGIN.md);仅加载对当前结果有实质影响的参考、示例或脚本;执行时在工作记录中保持来源与边界清晰;依据上游预期和可指认的证据验证结果;当任务超出该工作流核心范围时交接给相关技能。
测量命令示例:
npx lighthouse https://your-site.com --preset=perf --form-factor=mobile
适用场景
- 优化 Astro 站点性能与 Lighthouse 分数。
- 需要保留上游工作流细节与来源可审计性的评审或 PR 场景。
- 在公开导入仓库中做可复核的使用前检查。
限制
该技能是围绕上游仓库的可审阅打包层,不应用来源无法支撑的步骤。资料中的示例被视为脚手架,执行前需按具体任务调整。当架构、调试、设计或安全成为主要问题时,应转用更强的专项技能。其他功能、平台支持与效果数据暂未提供。