首页提速实录：横幅从 2.18 MB 缩小到约 45 KB，实际改善了什么？

2026 年 9 月 7 日，我们完成了一次首页图片加载优化。最直接的变化，是为原先约 2.18 MB 的手机横幅生成了多种尺寸的 WebP 文件，其中 768 像素版本约 45 KB。浏览器现在可以按显示条件选择图片，而不必始终下载同一张大图。

这篇记录公开改动范围、测试结果和仍然存在的限制。它不是对所有网络环境的速度保证，也不代表网站的每张图片都已经完成优化。

为什么先处理横幅，而不是升级服务器

最初的移动端 PageSpeed 测试显示，首页顶部横幅是明显的图片传输瓶颈。原图文件为 2,180,720 字节，即约 2.18 MB。页面上的显示区域远小于原图尺寸，但手机仍需要传输较大的文件。

当一张首屏图片占据大量流量时，仅增加服务器内存不会直接消除这部分下载开销。因此，本次先处理可以明确测量的图片体积，而不是把所有加载问题归结为服务器配置。

这里的 MB 和 KB 按十进制近似换算；某些测速工具使用 KiB，因此读数可能略有不同。

这次具体改了什么

手机与桌面使用的横幅并不是同一张构图。我们保留了这种区别，为两张原图分别生成 480、768、1280、1920 像素宽度的 WebP 版本，再通过浏览器支持的响应式图片机制提供选择。

1. 手机原图为 2,180,720 字节；768 像素版为 44,810 字节，文件体积减少约 97.9%。
2. 桌面原图为 2,046,835 字节；1280 像素版为 51,554 字节，文件体积减少约 97.5%。
3. 原图继续保留，兼容回退也保留。原图发生修改后，页面不会继续套用旧图对应的优化版本。
4. 首屏横幅仍优先加载，没有把它改成需要滚动后才出现的延迟图片。

这些数字比较的是指定文件，不是整个首页的流量下降比例。高像素密度设备可能选择更大的候选版本，因此并不是每部手机都会下载 45 KB 的图片。

复测结果如何理解

2026 年 9 月 6 日的移动端基线测试，性能分数为 75，最大内容绘制时间 LCP 为 14.2 秒。9 月 7 日最终配置的复测，性能分数为 83，LCP 约 4.0 秒，总阻塞时间约 40 毫秒，布局偏移 CLS 为 0。

你可以查看优化前的公开报告和优化后的公开报告。报告采用模拟手机和低速网络的实验室条件，单次分数会受到运行环境影响，不应把分数差全部视为某一个改动的精确因果结果。

LCP 描述的是页面主要可见内容的呈现时间，不等于全部资源下载结束，也不是其他功能的启动时间。分数提高意味着这次测试中体验指标有所改善，仍需结合多次测试和真实用户数据判断长期效果。

为什么有人仍然觉得慢

网络波动、浏览器状态、其他图片和脚本都会影响打开页面的感受。此次只优化了当前首页横幅，没有承诺解决全站所有加载问题。

此外，报告中的“最近 28 天真实用户数据”包含优化前的访问，不能在上线当天就用它证明新改动已经生效。我们优先确认的是新文件可正常访问、页面确实提供了响应式资源，以及主要入口仍然返回正常响应。

本次检查中，首页、热门首页和分类分页均正常返回，8 个新图片文件均能访问，验证期间没有新增网站错误日志。

接下来怎样判断优化是否有效

如果你想比较前后体验，尽量保持设备、网络、页面和浏览器一致，区分首次访问与再次访问，不要只凭一次刷新做结论。清缓存也会改变测试条件。

如果图片文字不清或某一屏仍然异常，可以按网页问题反馈清单记录现象。关于为什么手机不一定下载最小图片，可以继续阅读手机图片清晰度与流量说明。

本文依据本站 2026 年 9 月的部署与测试记录整理。有关 LCP 指标的定义，可参考Chrome 开发者文档。