Astro性能优化指南：实现Lighthouse 95+分数的专属方案与插件配置

perf-astro by tech-leads-club/agent-skills

73 周安装量

1,800 GitHub Stars

GitHub

安装命令

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

前端优化 JavaScript 框架性能优化

🇨🇳中文介绍

Astro 性能优化指南

针对 Lighthouse 95+ 分数的 Astro 专属优化方案。

快速设置

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, // 压缩 CSS
  HTML: true, // 压缩 HTML
  JavaScript: true, // 压缩 JS
  Image: false, // 如果使用外部图片优化则跳过
  SVG: false, // 如果 SVG 已优化则跳过
})

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

相关 Skills

Node.js后端模式指南：构建可扩展REST API、微服务与实时应用

20,000 周安装

Next.js 16+ 缓存组件指南：实现部分预渲染（PPR）与混合内容缓存

17,000 周安装

Vue 3 调试指南：解决响应式、计算属性与监听器常见错误

11,900 周安装

Genkit JS 开发指南：AI 应用构建、错误排查与最佳实践

7,700 周安装

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

    <!-- 字体回退（防止 FOIT） -->
    <style>
      @font-face {
        font-family: 'Inter';
        font-display: swap;
        src: local('Inter');
      }
    </style>

    <!-- 非阻塞的 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>

    <!-- 预加载 LCP 图片 -->
    <link rel="preload" as="image" href="/hero.png" fetchpriority="high">

    <title>{title}</title>

    <!-- 延迟加载第三方脚本 -->
    <script>
      let loaded = false;
      function loadAnalytics() {
        if (loaded) return;
        loaded = true;
        // 加载 GTM、分析工具等
      }
      ['scroll', 'click', 'touchstart'].forEach(e => {
        document.addEventListener(e, loadAnalytics, { once: true, passive: true });
      });
      setTimeout(loadAnalytics, 5000);
    </script>
  </head>
  <body>
    <slot />
  </body>
</html>

🇺🇸English

Astro Performance Playbook

Astro-specific optimizations for 95+ Lighthouse scores.

Quick Setup

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

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:

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:

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

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

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>

Weekly Installs

Repository

tech-leads-club…t-skills

GitHub Stars

1.8K

First Seen

Feb 5, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

github-copilot70

opencode70

gemini-cli69

codex69

cursor66

amp65

Astro性能优化指南：实现Lighthouse 95+分数的专属方案与插件配置

🇨🇳中文介绍

Astro 性能优化指南

快速设置

集成插件

astro-critters

@playform/compress

相关 Skills

布局模式

性能测量

检查清单

🇺🇸English

Astro Performance Playbook

Quick Setup

Integrations

astro-critters

@playform/compress

Layout Pattern

Measuring

Checklist

最新 Skills