网站速度优化三板斧：图片、缓存、CDN

手机 4G 下打开首页，转圈转了四秒，用户早就退回搜索结果去点第二条了。网站速度优化不是等有空再说的加分项，而是技术 SEO 的地基：加载慢两秒，跳出率明显上升，排名也会被慢慢拖下去。

快速结论：三板斧按顺序打——图片转 WebP、静态资源加一年浏览器缓存、再套一层 CDN，绝大多数站点能砍掉一半以上的加载时间。顺序别乱：图片不压先上 CDN，只是把大文件送得更快而已。每完成一步复测一次 PageSpeed Insights，才知道钱花在哪一步上。

1. 压图片体积：把图片批量转成 WebP 并保留原图备份，补 width/height、loading=”lazy” 与 srcset，单图目标控制在 100KB 以内。
2. 配静态资源缓存：静态文件设 Cache-Control 一年加哈希指纹，页面缓存与 Redis 对象缓存双管齐下，把 TTFB 压到百毫秒级。
3. 套一层 CDN：打开 Brotli 压缩、回源必须走 HTTPS，缓存键忽略 utm 追踪参数，静态资源平均延迟从两百毫秒降到几十毫秒。
4. 每步复测：每完成一斧用 PageSpeed Insights 复测一次，记录 LCP、CLS、INP 三组数据，确认钱花在了哪一步。
5. 上线前六项抽查：确认主要图片已是 WebP 且带宽高属性、缓存有效期不小于一年、curl 抽查状态码与缓存头、移动 4G 首屏 3 秒内。

第一斧：把图片体积压到三分之一

一张 400KB 的 PNG 转成 WebP 往往只剩 80KB 左右，肉眼几乎看不出差别；AVIF 还能再小两成，代价是老浏览器兼容性差一点。WordPress 上装 Imagify、ShortPixel 这类插件可以批量转换并保留原图备份，改坏了随时能回滚。

格式只是一半，标签写法是另一半。给 img 补上 width 与 height 属性，配合 loading=”lazy” 懒加载，能防止图片加载完把下方内容顶下去造成的布局抖动（CLS）。再用 srcset 提供多档尺寸，手机只下载适配屏幕宽度的那一版，桌面端不浪费流量。

• 上传前先用压缩工具过一遍，目标是单图控制在 100KB 以内
• 装饰性图形改用 SVG 或纯 CSS 实现，省掉一次网络请求
• 首屏关键图用 preload 提前加载，其余图片延迟到进入视口再取
• 用 picture 标签做兜底，不支持 WebP 的浏览器自动回退 JPEG
• 后台上传的原图别超过 2000px 宽，超过的先在本地裁一刀

第二斧：浏览器缓存加对象缓存双管齐下

在 Nginx 里给静态文件配 Cache-Control: public, max-age=31536000, immutable，让浏览器一整年不再重复下载 CSS、JS 与字体。前提是文件名带哈希指纹，改版时文件名变了才能自动失效，否则用户会一直看到旧样式。

页面级缓存交给 WP Rocket 或 W3 Total Cache，把动态生成的 HTML 存成静态文件直接吐给访客。对象缓存则用 Redis 或 Memcached 接进来，把重复的数据库查询命中内存，TTFB 从几百毫秒降到百毫秒以内是常见结果，后台编辑也会顺很多。

三类缓存别搞混

• 浏览器缓存：省的是回访用户的下载量，对首次访问没帮助
• 页面缓存：省的是 PHP 渲染时间，直接压 TTFB
• 对象缓存：省的是数据库查询，站点越复杂收益越明显

三类缓存都要留一个手动清除入口。发文、改价、换导航之后忘了清缓存，用户看到的还是半小时前的旧页面，这类问题排查起来最费时间。

第三斧：用 CDN 把内容推到用户身边

主流 CDN 都支持边缘缓存，静态资源的平均延迟能从两百毫秒级降到几十毫秒。接入时记得打开 Brotli 压缩，文本类资源比 Gzip 再小 15%–20%，这部分收益几乎零成本。

两个必踩的坑：回源一定要走 HTTPS，否则会出现混合内容告警；缓存键要忽略 utm 这类追踪参数，不然同一个页面会被存成上千份副本，命中率暴跌、回源压力反而更大。移动端的表现要单独验一遍，判断标准可以对照移动优先索引的检查点。

优化前后拿数据对照

指标	优化前	优化后	主要来自哪一斧
首页体积	3.2 MB	1.1 MB	图片转 WebP
LCP	4.1 s	1.8 s	图片 + CDN
TTFB	620 ms	90 ms	页面与对象缓存
请求数	148	62	合并资源 + SVG 替换

上面是一个典型企业站改版前后的实测区间：图片格式换掉之后体积掉到三分之一，加上缓存和 CDN，LCP 从超标的 4.1 秒回到优秀线内。这几个指标的判定阈值和采集口径，可以对照核心网页指标实操校准，别用实验室数据糊弄自己——真实用户数据（CrUX）才是排名参考的那一份。

，具体可参考图片SEO三件套

上线前的六项抽查

• 跑一次 PageSpeed Insights 和 WebPageTest，分别记录 LCP、CLS、INP
• 确认主要图片已是 WebP，并带宽高属性与懒加载
• 静态资源的 Cache-Control 有效期不小于一年，且文件名带指纹
• CDN 已开启 Brotli，覆盖范围包含 JS 与 CSS
• 用 curl -I 抽查几个 URL，确认状态码与缓存头正确
• 模拟移动 4G 网络，首屏完成时间控制在 3 秒以内

这六项建议做成固定检查表，每次改版前跑一遍。想把速度纳入更完整的上线流程，可以并到技术 SEO 审计清单里一起执行，避免速度优化做完却被别的技术问题抵消。

下一步 / 行动清单

• 用 PageSpeed Insights 测出首页与最重要落地页当前的 LCP，记下基线
• 批量把媒体库图片转成 WebP，重点先处理首屏大图
• 配好静态资源一年缓存，并确认文件名带哈希指纹
• 接入 CDN 并打开 Brotli，缓存键忽略追踪参数
• 每完成一步复测一次，把三组数据存进同一张对比表

常见问题（FAQ）

网站速度优化先做哪一步？

先压图片，转成 WebP 体积常能掉到三分之一，收益最大。顺序别乱：图片不压先上 CDN，只是把大文件送得更快，每完成一步复测一次 PageSpeed。

图片转 WebP 会影响画质吗？

肉眼几乎看不出差别，400KB 的 PNG 转 WebP 往往只剩 80KB。用 Imagify、ShortPixel 批量转换并保留原图备份，老浏览器用 picture 标签兜底。

缓存有效期设多久合适？

静态资源配 Cache-Control: public, max-age=31536000, immutable 一整年不重下，前提是文件名带哈希指纹，改版时文件名变了才能自动失效。

CDN 接入有哪些必踩的坑？

回源必须走 HTTPS 避免混合内容告警；缓存键要忽略 utm 追踪参数，不然同页被存成上千份副本命中率暴跌；记得开 Brotli，文本类比 Gzip 再小 15%–20%。

评估速度看实验室数据还是真实数据？

以真实用户数据（CrUX）为准，实验室 90 分、现场不及格很常见。判定阈值是 LCP 小于 2.5 秒、CLS 小于 0.1、INP 小于 200 毫秒。

---