近期将博客迁移至阿里云 Docker 环境后，网站出现流量激增与首页加载缓慢的问题。
经排查，瓶颈主要集中于图片资源与服务端缓存配置。通过一系列针对性优化，页面首次加载流量由 7 MB 显著优化至 500KB 以下，性能得到大幅提升。
1. 概述
本次优化的核心技术手段包括：图片懒加载、WebP 格式转换、Nginx 缓存策略配置、前端资源压缩。
2. 图片优化
2.1. 图片懒加载
通过 Chrome 开发者工具分析发现，首页 24 张图片在加载时被全部请求，其中多数位于屏外（不可视区域），造成了不必要的流量消耗。为此引入图片 懒加载机制，通过 loading=”lazy” 属性实现按需加载。
优化后，页面初始预加载图片数量降至 3 张，从根源解决了关键问题。
1
<div align=center><img src="/images/2025/2025-04-17-00-46-32.webp" loading="lazy"/></div>
2.2. 图片压缩
传统 PNG/JPG 图片追求画质却体积臃肿。全站图片批量转码为 WebP：视觉几乎无损，体积缩小 50-70%，图片传输流量瞬间减半，瘦身效果肉眼可见。
1
2
3
4
5
6
7
# 批量转换 PNG 到 WebP 格式
find . -name "*.png" -type f | xargs -I {} -P 4 bash -c 'cwebp -q 80 "$1" -o "${1%.*}.webp"' _ {}
# 图片压缩对比：
➜ ls -lh 2023-10-16-04-06-23.* | awk '{print $5, $9}'
492K 2023-10-16-04-06-23.jpg
180K 2023-10-16-04-06-23.webp
2.3. 其它
网站图标等小尺寸图片，将 ICO 格式转换为 SVG 矢量格式，进一步减小文件体积：
1
2
3
4
➜ convert favicon.ico favicon.svg
➜ ls -lh favicon.* | awk '{print $5, $9}'
7.2K favicon.ico
1.1K favicon.svg
3. nginx 缓存配置优化
图片优化初见成效后，发现另一个关键问题：浏览器缓存失效，即使开启缓存设置，每次刷新页面仍会重新加载大量资源。通过排查发现，问题根源在于 Nginx 代理层的缓存配置。针对性修改 Nginx 配置后，浏览器缓存机制终于恢复正常。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
server {
...
# 静态资源长期缓存（JS/CSS/图片/字体）
location ~* \.(js|css|png|jpg|jpeg|gif|webp|ico|svg|woff|woff2|ttf|eot)$ {
expires 1y;
add_header Cache-Control "public, immutable";
}
# HTML文件短期缓存
location ~* \.html$ {
expires 1h;
add_header Cache-Control "public, must-revalidate";
}
# 搜索相关资源中期缓存
location /search/ {
expires 7d;
add_header Cache-Control "public";
}
# 动态内容不缓存
location @proxy {
add_header Cache-Control "no-cache, no-store, must-revalidate";
}
...
}
4. 前端资源压缩
对前端开发过程中引入的 JS/CS 等调试代码进行清理和压缩，虽然单个文件影响有限，积少成多也能提升整体性能：
1
2
3
➜ ls -lh zoom-* | awk '{print $5, $9}'
33K zoom-init.js
21K zoom-init.min.js
5. 后记
原本只想给图片上个懒加载就收工，后面的各种优化确实不在计划之内，强迫症使然。虽然花了不少时间，但也有不少收获！时间有限，还有很多优化的空间，后面有时间再优化。
