起因
博客部署在新加坡的 VPS 上，国内用户访问时总觉得卡顿得厉害。打开浏览器 F12 调试工具一看，问题暴露得很明显：首页竟然有 29.3 MB / 120 个请求，加载时间长达 6 秒。
带宽已经优化为国内 ECS 反代回源新加坡服务器，链路本身基本上接近优化极限了，要进一步加快速度，只能从网站自身的资源优化入手。
一张图直击问题所在
打开 Network 标签，几个“大户”立刻暴露出来：
| 资源类型 | 大小 |
|---|---|
| 自动播放的背景音乐 | 6 MB |
| 一张文章封面 PNG | 1.5 MB |
| 默认中文字体 ttf | 5.4 MB |
| 全屏壁纸原图 PNG | 1.4 MB |
| 8 张未使用的 banner 图 | 1.5 MB |
实际的流量大头并非“上百个请求”，而是集中在少数几个本不该如此大的资源上。
优化措施
字体直接“清零”
后台字体设置新增了一个“系统默认”选项，将 CJK 和 ASCII 字体全部改用系统默认字体。浏览器自动选用 PingFang、微软雅黑或 SF Pro，字体文件实现零下载，且渲染效果极佳。
音乐改为用户点击后再加载
播放器组件原先默认进入首页时就会预加载 6 MB 的背景音乐，现在改成 preload="none"，用户点击播放按钮后才会真正发起下载请求。
用户上传图片统一通过 Sharp 优化
增加了一个 /api/image-preview 接口，传入参数如 ?w=1600&format=webp&q=85，服务端按需缩放并转换为 WebP 格式，优化后的图片缓存落盘保存 30 天。这样文章封面由原本的 1.5 MB PNG 降至 200-300 KB WebP，肉眼几乎看不出任何差别。
图片尺寸精确按需调用
封面需要 1600px 宽度，头像只需 400px，音乐封面给 200px，导航 logo 也只需要 200px——以前所有缩略图都是直接调用原图。
全屏壁纸单独使用更小尺寸
区分文章封面和背景图两种用途，全屏背景壁纸统一压缩到 1920px，并采用更高压缩率，视觉效果基本不受影响。
Banner 图使用懒加载
如果用户未默认启用 banner 模式，则所有 banner 图资源均被放置于 <template> 标签内。浏览器对 <template> 中的内容完全不发起请求，直到用户切换到 “Banner” 模式时才动态加载实例化图片。
优化前后对比
优化前：
优化后：
通过以上优化手段，网站首页体积从 29.3 MB 降至 约 5 MB，加载速度提升了近一个数量级。即便在国内 3 Mbps 带宽环境下，也能做到秒级打开，大幅提升用户体验。
如果这篇文章对你有帮助，欢迎分享给更多人！
部分信息可能已经过时