perf-astro

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Astro Performance Playbook

Astro性能优化指南

Astro-specific optimizations for 95+ Lighthouse scores.

针对Astro的专属优化方案，助力获得95+的Lighthouse评分。

Quick Setup

快速设置

bash

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

bash

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.

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

功能说明：

扫描渲染后的HTML，识别首屏可见元素
仅内联这些元素所需的CSS
延迟加载剩余CSS

构建输出会显示内联情况：

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

在最终构建过程中压缩HTML、CSS和JavaScript。

配置选项：

compress({
  CSS: true,      // 压缩CSS
  HTML: true,     // 压缩HTML
  JavaScript: true, // 压缩JavaScript
  Image: false,   // 若使用外部图片优化工具则跳过
  SVG: false,     // 若SVG已优化则跳过
})

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>

为优化性能，结构化你的

Layout.astro

文件：

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

    <!-- 字体回退（避免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>

Measuring

性能测量

bash

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

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