博客加速

博客上线那会儿，我发给朋友看，朋友回了一句：“你的站怎么转半天才出来？“我自己在美国打开觉得还行，可朋友在国内，点开一篇文章，封面图要等好几秒。我查了一下：一张手机直出的原图就有 2–4MB，文章列表页一次加载 10 张封面，全是原图的话就是几十 MB，不慢才怪。 那之后我把加速这件事认真做了一遍。结论先说在前面：静态博客的加速，八成功夫都在图片上，剩下的才是懒加载和 CDN。三件事做完，单张封面压到 60–300KB，/posts/ 列表页 10 张图合计约 1MB，打开速度肉眼可见地变快。这篇就是实操记录，照着做就行。 先测再动：慢在哪儿，得有数 动手之前先测速，不然你都不知道自己在修什么。我常用的就两个免费工具： PageSpeed Insights（Google 出的）。输入网址，等半分钟，给出手机端和桌面端的分数，还有 LCP（最大内容绘制时间）这种核心指标。分数不用追求满分，90 分以上就挺好了。 GTmetrix。能看到每个资源的加载时间，一眼看出是哪张图、哪个 JS 在拖后腿。 拿 PageSpeed 测，报告里最显眼的一项就是图片：几张封面图单张 2–4MB，全在打开时一起下载。问题定位了，再动手。 顺便说一句：测速多测两次，取个平均。网络波动大，单次结果别太当真。 图片压缩：八成功夫都在这儿 图片是静态博客最大的负担，没有之一。我的处理标准很简单： 最长边 1600px，JPEG 质量 80 左右。 博客封面图在页面上显示也就 800px 宽，1600px 的原图在视网膜屏上也够清晰了。再大，就是纯浪费流量。一张手机直出的 4000px 照片，4MB 左右，压到 1600px、质量 80，基本在 150–200KB，体积直接砍掉 95%。 我用的工具分两种情况： 批量处理用命令行。 服务器上有 ImageMagick 的话，一条命令搞定一个文件夹： mogrify -resize 1600x1600\> -quality 82 -strip *.jpg -resize 1600x1600> 的意思是只缩小不放大，小图不会被强行拉大；-strip 去掉 EXIF 信息，又能省一点，还能顺手去掉拍照地点这些隐私信息。 单张精修用 Squoosh（Google 的免费在线工具）。拖进去，拉动质量滑杆，实时看压缩前后的对比，满意了再下载。封面图这种门面，值得花一分钟精修。 WebP 要不要上？ WebP 同样画质下比 JPEG 小 25%–35%，听着很香。但我的做法是：封面图先用 JPEG 保证兼容性，等全站图片都压完了，再考虑统一转 WebP。饭一口一口吃，别为了追极致把自己绕进去。Hugo 自带图片处理功能，模板里用 .Resize 就能自动生成多尺寸，需要的话以后再上。 ...