SuperAPI AI 工具集

perf-astro

前端与建站

查看项目

更新于 10-17 03:23

技能介绍

用途

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 场景。
  • 在公开导入仓库中做可复核的使用前检查。

限制

该技能是围绕上游仓库的可审阅打包层,不应用来源无法支撑的步骤。资料中的示例被视为脚手架,执行前需按具体任务调整。当架构、调试、设计或安全成为主要问题时,应转用更强的专项技能。其他功能、平台支持与效果数据暂未提供。