mcpField
P
perf-astro

perf-astro

github.com/tech-leads-club开发7.1k284 次安装2 天前更新
代码仓库

关于 perf-astro

面向 Astro 网站性能优化的指南，适用于希望改善构建产物和页面加载的开发者。内容涵盖关键 CSS 内联、资源压缩、布局建议及 Lighthouse 测量。

主要功能

  1. 01提取并内联关键 CSS
  2. 02压缩 HTML、CSS 和 JavaScript
  3. 03Astro 布局建议
  4. 04使用 Lighthouse 测量性能

适用场景

  1. 01减少 Astro 页面中的阻塞渲染 CSS
  2. 02压缩生产构建中的资源
  3. 03使用 Lighthouse 测量移动端性能

安装

复制下面的命令，在终端中运行。

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

安装后在 Claude Code 中输入/perf-astro确认已加载。

详细介绍

Astro 性能优化手册

针对 Astro 的优化，助力 Lighthouse 得分达到 95+。

快速设置

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,
    }),
  ],
})

集成

astro-critters

自动提取并内联关键 CSS。无需配置。

功能：

  • 扫描渲染后的 HTML，查找首屏元素
  • 仅内联这些元素所需的 CSS
  • 延迟加载其余 CSS

构建输出会显示内联的内容：

Inlined 40.70 kB (80% of original 50.50 kB) of _astro/index.xxx.css.
@playform/compress

压缩最终构建中的 HTML、CSS 和 JavaScript。

选项：

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.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" />

    
    <style>
      @font-face {
        font-family: 'Inter';
        font-display: swap;
        src: local('Inter');
      }
    </style>

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

    
    <link rel="preload" as="image" href="/hero.png" fetchpriority="high">

    <title>{title}</title>

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

测量

npx lighthouse https://your-site.com --preset=perf --form-factor=mobile

另请参阅：

  • perf-lighthouse - 运行审计、阅读报告、设置预算
  • perf-web-optimization - Core Web Vitals、捆绑包大小、缓存策略

检查清单

  • 已安装并配置 astro-critters
  • 已安装并配置 @playform/compress
  • Google Fonts 使用 media="print" onload 模式
  • 第三方脚本延迟到用户交互时加载
  • 在 <head> 中预加载 LCP 图片

评论

支持 Markdown