上一课讲了 Core Web Vitals 的三个指标是什么，这一课讲怎么把它们做绿。速度是排名的硬门槛，更是转化门槛——页面加载每慢 1 秒，询盘转化率都会明显下降。买家在 Google 点你之前，可能已经关掉了 3 个慢站。
先诊断，再动手
直接答案：先用 PageSpeed Insights 跑一次真实数据，看三项指标各自多少、LCP 元素是哪个。外贸站 80% 的速度问题集中在首屏大图——先治它，别平均用力。
诊断时注意三点：① 用「实验室数据」定位问题，用「真实用户数据（Field Data）」确认实际体验；② 分别测首页、产品分类页、文章页三类模板，问题往往不同；③ 让海外朋友或用海外节点测一次——你在国内访问快不代表买家访问快。
图片：占外贸站体积的大头
直接答案：首屏主图决定 LCP。全部图片转 WebP（或 AVIF）、首图压缩到 200KB 以内、非首屏图懒加载、给首图加 preload，四步做完 LCP 通常直接达标。
| 动作 | 怎么做 | 收益 |
|---|---|---|
| 格式升级 | JPG/PNG → WebP/AVIF，同画质体积减 30–70% | 最大 |
| 尺寸匹配 | 按显示尺寸出图，别用 4000px 原图缩放显示 | 大 |
| 懒加载 | 非首屏 img 加 loading="lazy"；首屏图不要懒加载 | 中 |
| 首图预载 | <link rel="preload" as="image"> 指向首屏主图 | LCP 直接受益 |
| 写死宽高 | img 标注 width/height，防 CLS 布局跳动 | CLS 直接受益 |
CDN 与服务器选址
直接答案：节点跟着买家走。主做欧美就选 Cloudflare 这类全球 CDN（免费档就够），服务器/源站也在目标市场附近；千万别用「国内访问快、海外绕路」的方案。
- CDN 必开：静态资源（图片/CSS/JS）走边缘节点，海外买家就近加载。
- 开启 Brotli 压缩：文本资源压缩率比 Gzip 再高 15–20%。
- 检查第三方资源：字体、客服插件、统计代码若托管在访问慢的地区，换 CDN 或本地化。Google Fonts 这类在海外没问题，但国内打包的字体文件要留意。
- TTFB 控制：首字节时间争取 <800ms；超标先查主机性能与缓存配置。
代码与缓存
直接答案：能缓存的都缓存，能延后的 JS 都延后，用不到的插件都删掉。CMS 站速度差十有八九是插件堆太多。
- 缓存：浏览器缓存 + 页面缓存全开；静态资源 max-age 至少 1 个月。
- JS 精简：非关键 JS 加 defer/async；删掉闲置插件、合并重复脚本。
- CSS：首屏关键 CSS 内联，其余异步加载。
- 字体：中文字体文件巨大，外贸站正文用系统字体栈即可，标题字体做子集化。
⚠️ 注意：SEO 站自己的速度就是简历。你教别人优化速度，自己 LCP 3 秒会直接毁掉 E-E-A-T。本站的页面全部做了以上优化，可以直接看源码对照。
速度优化清单（可直接抄）
| 优先级 | 动作 | 对应指标 |
|---|---|---|
| P0 | 首屏图 WebP + 压缩 + preload | LCP |
| P0 | 全球 CDN + Brotli 压缩 | TTFB / LCP |
| P1 | 非首屏图懒加载 + 写死宽高 | LCP / CLS |
| P1 | 非关键 JS defer，删闲置插件 | INP |
| P2 | 页面缓存 + 静态资源长缓存 | 回访体验 |
| P2 | 字体子集化 / 系统字体 | LCP |
常见问题（FAQ）
- 外贸独立站速度优化的第一步做什么？
- 先用 PageSpeed Insights 跑真实数据确认 LCP 元素。外贸站 80% 的 LCP 问题在首屏大图：转 WebP、压到 200KB 内、加 CDN，通常一步就把 LCP 压进 2.5 秒。
- 国内做的外贸站，海外访问慢怎么办？
- 节点跟买家走：选全球 CDN（如 Cloudflare）、源站放目标市场附近，并检查字体和第三方脚本是否在海外访问慢，全部本地化或换 CDN。
- 速度优化到多少就够了？
- 三项 Core Web Vitals 全绿即可（LCP<2.5s、INP<200ms、CLS<0.1），之后继续抠 0.1 秒收益很小，精力应转向内容和外链。