我们接手过一个官网诊断：首页挂着一张 3.2MB 的 banner、6 张未压缩产品图、一套加载了却没人用的动画库。用 PageSpeed 测，移动端 35 分，用户平均要等 8 秒才能看到内容。
网站性能优化，是指通过图片压缩、代码分割、CDN 与缓存等手段，降低页面加载时间、提升访问体验。
这不是技术炫技的问题——Google 的研究早就给出结论：页面加载超过 3 秒，53% 的用户会直接关掉。 每慢 1 秒，转化率都在往下掉。
好消息是：官网性能优化有明确的抓手，且投入产出比极高。下面按”指标标准 → 3 个策略 → 分档 Checklist → 效果参考”的顺序展开。
先搞清 4 个核心指标
| 指标 | 说明 | 行业标准 |
|---|---|---|
| LCP（最大内容绘制） | 首屏主要内容加载完成 | < 2.5s |
| FID（首次输入延迟） | 用户首次交互响应 | < 100ms |
| CLS（累积布局偏移） | 页面元素跳动程度 | < 0.1 |
| TTFB（首字节时间） | 服务器响应速度 | < 600ms |
这四项里，LCP 是官网优化的第一优先级——它就是用户”感觉快不快”的直接来源。而 LCP 慢，90% 的情况是图片和服务器响应拖的后腿。
策略一：图片优化（效果最明显）
| 优化项 | 操作方法 | 效果 |
|---|---|---|
| 格式转换 | 改用 WebP/AVIF | 体积减少 30-50% |
| 压缩质量 | 从 85% 降到 75% | 体积减少 20% |
| 响应式图片 | 根据屏幕加载不同尺寸 | 移动端省 50% |
| 延迟加载 | 非首屏图片懒加载 | 首屏提速 |
图片往往是官网上体积最大的资源，也是优化”见效最快”的一块。特别提醒：首屏那张 banner 千万别懒加载——它恰恰是 LCP 的主角。正确的做法是给它 fetchpriority="high" + 预加载，让浏览器优先取。
图片优化 Checklist：
- 使用 WebP 或 AVIF 格式
- 单张图片 < 100KB
- 首屏图片预加载（不可懒加载）
- 非首屏图片 lazyload
策略二：代码优化
| 优化项 | 操作方法 | 效果 |
|---|---|---|
| JS 代码分割 | 按需加载，不一次加载全部 | 减少主线程阻塞 |
| CSS 优化 | 提取关键 CSS，内联 | 减少渲染阻塞 |
| 删除无用代码 | Tree shaking | 减少 JS 体积 |
| 压缩混淆 | 生产环境启用压缩 | 减少传输体积 |
代码分割示例：
// 不推荐：一次加载全部
import './all-components';
// 推荐：按需加载
const Modal = () => import('./Modal');
const ProductGallery = () => import('./ProductGallery');代码分割有个常见坑：按函数位置切分，而不是按 DOM 依赖切分。我们曾把一个被首页和页脚共用的初始化函数错误归入某个页面脚本，结果首页效果直接消失。切分前先理清”谁用谁”，比切得细更重要。
策略三：CDN 与缓存
| 优化项 | 操作方法 | 效果 |
|---|---|---|
| CDN 加速 | 使用 CDN 分发静态资源 | 减少 TTFB |
| 浏览器缓存 | 设置 Cache-Control | 二次访问秒开 |
| 边缘计算 | 在 CDN 节点处理 | 降低延迟 |
| Gzip/Brotli | 服务端压缩 | 减少传输体积 |
缓存策略建议：
| 资源类型 | 缓存时间 |
|---|---|
| HTML | no-cache 或 max-age=3600 |
| CSS/JS | max-age=31536000（带 hash） |
| 图片 | max-age=2592000 |
| 字体 | max-age=31536000 |
缓存的核心是”内容变了，URL 也要变”。带 hash 的静态资源可以设一年缓存，用户第二次访问几乎秒开——这对复访率和 B2B 官网转化 都有正向作用。
分档 Checklist：从哪开始做
立即可做（不需要开发介入）
- 图片格式转 WebP
- 图片压缩到 100KB 以下
- 清理无用的页面功能
- 开启 CDN
开发介入（1-2 天工作量）
- 图片懒加载
- 代码分割
- 关键 CSS 内联
- 缓存策略配置
深度优化（1 周+）
- 服务端渲染（SSR）
- 预渲染关键页面
- HTTP/2 或 HTTP/3
- 性能监控告警
优化效果参考
| 优化措施 | LCP 改善 | 移动端得分提升 |
|---|---|---|
| 图片 WebP | -1.5s | +15 分 |
| CDN 加速 | -1s | +10 分 |
| 代码分割 | -0.5s | +5 分 |
| 缓存策略 | -2s（二次访问） | +10 分 |
上面这家 35 分的官网，做完图片优化 + CDN 两项”立即可做”的改动后，移动端涨到 72 分。性能优化不需要一次做到满分，先解决最大瓶颈，收益就足够明显。
常见问题
性能优化会不会影响网站现有功能？
正规优化不会。图片格式转换、CDN、缓存都属于”无损”改造；唯一需要谨慎的是代码分割——切分不当可能让某些页面的脚本不再执行。所以每做一步都要回归测试关键页面，特别是首页、表单提交和 改版 后的新功能。
多少分算合格？要追求满分吗？
移动端 PageSpeed ≥ 90 分是理想线，但不必执念满分。LCP < 2.5s、CLS < 0.1 这两个硬指标达标，用户体感就是”快”了。 剩下的分数往往靠边缘场景堆出来，投入产出比低。
性能优化是做完一次就够了吗？
不是。每次上新功能、改版、加第三方脚本（比如统计、客服插件），都可能把性能重新拖回去。建议设一个月度检测机制——这也是为什么我们把它列入官网持续运营的一部分。
性能优化从来不是”技术部门自己的事”。它直接关系到用户是否愿意在你官网多停留 3 秒，而多停留的这 3 秒，往往就是询盘和流失的差别。
想拿到一份你官网的性能诊断报告？联系我们，我们会标出最值得先动的那 1-2 个点。