性能优化三个主方向：图片用WebP格式+懒加载+Astro的<Image>组件自动优化；字体用font-display:swap+预连接Google Fonts；CF Pages自带全球CDN边缘部署。目标：PageSpeed Insights移动端≥80分，LCP<2.5s，CLS<0.1，INP<200ms。

性能优化：Core Web Vitals + 图片压缩 + 海外加载速度

一个在北京打开只需1秒的网站，在纽约可能需要4秒——因为服务器在亚洲，物理距离带来延迟。对外贸站来说，欧美用户的加载体验才是第一优先级。

Google 的 Core Web Vitals 是排名因素之一，但更重要的是：加载慢直接导致跳出，跳出意味着询盘丢失。

Core Web Vitals 三项指标

指标	全称	衡量什么	及格线	优秀线
LCP	Largest Contentful Paint	最大内容元素加载时间	< 2.5s	< 1.8s
CLS	Cumulative Layout Shift	页面布局稳定性（有没有乱跳）	< 0.1	< 0.05
INP	Interaction to Next Paint	交互响应速度	< 200ms	< 100ms

哪个最影响外贸站：LCP 最关键。产品页的 Hero 图片通常是 LCP 元素——图片加载慢，LCP 就差。

优化方向一：图片（影响最大）

图片通常占页面总体积的 60–80%。这里的优化空间最大。

格式：WebP 优先

WebP 比 JPEG 小 25–35%，比 PNG 小 25–50%，同时几乎没有视觉损失。现代浏览器全部支持。

Astro 的 <Image> 组件自动处理：

---
import { Image } from 'astro:assets';
import heroImg from '../assets/pump-hero.jpg';
---

<!-- Astro 自动转换为 WebP，自动生成多尺寸，自动添加 width/height 防 CLS -->
<Image
  src={heroImg}
  alt="CP-100 centrifugal pump for industrial applications"
  width={800}
  height={600}
  loading="eager"   <!-- Hero 图片用 eager，其他用 lazy -->
  format="webp"
/>

非 Astro 项目的手动处理：

# 用 Sharp 批量转换
npx sharp -i ./public/images/*.jpg -o ./public/images/ --format webp

懒加载（Lazy Loading）

除第一屏可见的图片外，其余全部懒加载：

<!-- 第一屏以下的图片 -->
<img src="product.webp" alt="..." loading="lazy" width="600" height="400">

重要：必须指定 width 和 height，否则浏览器不知道图片占多大空间，导致 CLS 升高。

Hero 图片：LCP 优化

Hero 图片是最常见的 LCP 元素，需要特殊处理：

<!-- 1. 预加载 Hero 图片 -->
<link rel="preload" as="image" href="/images/hero.webp">

<!-- 2. Hero 图片不用懒加载，用 eager -->
<img src="/images/hero.webp" alt="..." loading="eager" fetchpriority="high">

优化方向二：字体

Google Fonts 加载不当会造成字体闪烁（FOUT），影响 CLS 和用户体验。

正确的 Google Fonts 加载方式

<head>
  <!-- 1. 预连接 Google Fonts 服务器 -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

  <!-- 2. 加载字体，加 &display=swap -->
  <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@600;700&family=Inter:wght@400;500&display=swap" rel="stylesheet">
</head>

display=swap 的作用：先用系统字体显示文字，字体文件加载完后替换——用户能立刻看到内容，不会等字体加载完才显示空白文字。

更好的方案：自托管字体

把字体文件下载到项目里，避免外部 DNS 解析延迟：

# 用 fontsource 下载字体
npm install @fontsource/inter @fontsource/space-grotesk

---
// 在 BaseLayout.astro 中导入
import '@fontsource/inter/400.css';
import '@fontsource/inter/500.css';
import '@fontsource/space-grotesk/600.css';
import '@fontsource/space-grotesk/700.css';
---

自托管字体：消除了 Google 服务器的 DNS 解析时间，通常能节省 100–300ms。

优化方向三：Cloudflare Pages 的边缘优势

CF Pages 会把你的静态文件部署到全球 300+ 个 PoP（接入点）。美国的访客从美国的节点获取文件，德国的访客从德国的节点获取——无需任何额外配置。

Cloudflare 自动处理的优化

Brotli 压缩：自动对 HTML/CSS/JS 进行 Brotli 压缩（比 Gzip 快 20%）
HTTP/2：自动启用，多路复用减少请求延迟
HSTS Preload：在 Cloudflare SSL 设置里可以开启

需要手动配置的优化

Cache-Control Headers（在项目根目录的 _headers 文件）：

# Cloudflare Pages _headers 文件
/assets/*
  Cache-Control: public, max-age=31536000, immutable

/*.html
  Cache-Control: public, max-age=0, must-revalidate

/images/*
  Cache-Control: public, max-age=2592000

静态资产（JS/CSS/图片）设置长期缓存，HTML 设置不缓存（每次获取最新内容）。

测试工具与目标分数

工具	地址	用途
PageSpeed Insights	pagespeed.web.dev	Google 官方，给出 Core Web Vitals 实测数据
WebPageTest	webpagetest.org	可选择从美国/欧洲节点测试，更接近真实用户体验
GTmetrix	gtmetrix.com	综合报告，适合快速诊断
Lighthouse	Chrome DevTools	本地测试，开发时快速验证

目标：

PageSpeed Insights 移动端：≥ 80 分
LCP：< 2.5s（从美国节点测试）
CLS：< 0.1
INP：< 200ms
首字节时间（TTFB）：< 200ms（CF Pages 边缘节点应该轻松达到）

快速优化 Checklist

图片
□ 所有图片转为 WebP 格式
□ Astro <Image> 组件或 lazy loading 属性
□ 每张图片有 width 和 height 属性（防 CLS）
□ Hero 图片用 <link rel="preload"> + fetchpriority="high"
□ 图片 alt 文本包含关键词（SEO + 可访问性）

字体
□ Google Fonts 使用 preconnect + display=swap
□ 或改用 fontsource 自托管字体

Cloudflare
□ _headers 文件配置缓存策略
□ Brotli 压缩已开启（CF 默认开启）
□ Always Use HTTPS 已开启

测试
□ PageSpeed Insights 移动端 ≥ 80
□ 从美国节点测试 LCP < 2.5s
□ CLS < 0.1