ChiroPhy’s Wiki照片墙部署优化清单
type
Post
status
Published
date
Jun 10, 2026
slug
photowall-list
summary
tags
category
个人文档
icon
password
# 照片墙 · 服务器部署调优清单
针对这个纯静态站点（HTML + CSS + JS + 大量 WebP 图片）的访问速度优化。
代码层面已做「按需懒加载 + 按相册构建」，本清单是服务器/部署层面的配合优化，按收益从高到低排列。
---
## 1. 开启 HTTP/2（或 HTTP/3）—— 收益最大
照片墙是「大量小文件（图片）」的典型场景。HTTP/1.1 每个域名只能并发约 6 个连接，几百张图会排长队；HTTP/2 在单条连接上多路复用，能同时高效传输大量图片，几乎是为这种站点量身定做的。
- Nginx：`listen 443 ssl http2;`（需配 HTTPS，HTTP/2 实际都跑在 TLS 上）
- 有条件再开 HTTP/3：`listen 443 quic reuseport;` + `add_header Alt-Svc 'h3=":443"; ma=86400';`
- 验证：浏览器 DevTools → Network → 右键表头勾选「Protocol」，应显示 `h2` 或 `h3`。
---
## 2. 设置缓存头（Cache-Control）—— 回访几乎零等待
图片和库文件内容基本不变，应让浏览器长期缓存，回访时直接读本地、不再请求服务器。
| 资源 | 建议策略 |
|---|---|
| 图片 `*.webp`、`*.jpg`、`*.svg` | `Cache-Control: public, max-age=31536000, immutable`（一年） |
| `script.js`、`styles.css` | 一年长缓存，但**更新后需改文件名**（见下方「缓存失效」） |
| `index.html` | `Cache-Control: no-cache` 或很短（如 5 分钟），保证改动能及时生效 |
**缓存失效（重要）**：把 JS/CSS 设成长缓存后，将来改了内容浏览器不会重新拉。解决办法是引用时带版本号，例如 `styles.css?v=20260523`，每次改动改一下这个值即可。
Nginx 示例：
```nginx
# 图片：长缓存 + immutable
location ~* \.(webp|jpg|jpeg|png|gif|svg|ico)$ {
expires 1y;
add_header Cache-Control "public, immutable";
access_log off;
}
# JS/CSS：长缓存（配合 ?v= 版本号）
location ~* \.(js|css)$ {
expires 1y;
add_header Cache-Control "public";
}
# HTML：不缓存，保证更新即时可见
location = /index.html {
add_header Cache-Control "no-cache";
}
```
---
## 3. 压缩（gzip / brotli）—— 只压文本，别压图片
- **要压**：`index.html`、`script.js`、`styles.css`（文本能压掉 60%~80%）。
- **不要压**：`.webp` / `.jpg` 本身已是压缩格式，再压几乎没效果，还白白浪费 CPU。
Nginx 示例（注意 types 里不含图片）：
```nginx
gzip on;
gzip_comp_level 5;
gzip_min_length 1024;
gzip_types text/plain text/css application/javascript image/svg+xml;
# 如装了 ngx_brotli 模块，优先 brotli（压缩率更高）
# brotli on;
# brotli_comp_level 5;
# brotli_types text/plain text/css application/javascript image/svg+xml;
```
---
## 4. 自托管第三方库 + preconnect
目前 `index.html` 还从 unpkg / cdnjs 加载 Masonry 和 Font Awesome。跨域加载要额外做 DNS 解析 + TLS 握手，且这些公共 CDN 偶尔会慢或被墙。
**两个选择，二选一：**
**A. 自托管（推荐，最稳）**：把 `masonry.pkgd.min.js` 和 Font Awesome 下载到本地目录，改成相对路径引用。这样所有资源同源，HTTP/2 下一并多路复用，也不依赖外网。
**B. 保留 CDN 但加 preconnect**：在 `<head>` 顶部加预连接，提前完成握手：
```html
<link rel="preconnect" href="https://unpkg.com" crossorigin>
<link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin>
```
> 备注：当前页面只用了 Font Awesome 的左右箭头图标，其实可以用内联 SVG 或 Unicode 箭头替代，从而**整包移除 Font Awesome**，省一个较大的外部请求。需要的话我可以帮你换。
---
## 5. 用 CDN 分发图片（访问量大或用户分布广时）
把 `gz/ sz/ son/ son100/ son1year/` 等图片目录交给 CDN（Cloudflare、又拍云、七牛、阿里云 OSS+CDN 等）边缘节点就近分发。用户离边缘节点近，图片首字节时间显著下降。静态站点本身也可整体托管到 Cloudflare Pages / Vercel / Netlify，自带全球 CDN 和 HTTP/2。
---
## 6. 确保正确的 MIME 类型与传输优化
- 确认 `.webp` 返回 `Content-Type: image/webp`（个别老服务器默认没有这条，会导致下载而非显示）。Nginx 在 `mime.types` 里确认含 `image/webp webp;`。
- 开启 `sendfile on;`、`tcp_nopush on;`（Nginx 默认），提升大文件/多文件传输效率。
---
## 7. 进阶（可选，收益视情况）
- **响应式图片**：为不同屏幕再生成几档尺寸，用 `srcset` 让手机只下小图。工作量较大，仅在移动端流量敏感时考虑。
- **首屏优先**：当前懒加载已只取「接近视口」的图。若想更快出首屏，可对第一屏的几张图去掉懒加载、直接预加载。
- **监控**：用 Lighthouse / PageSpeed Insights 跑一次，重点看 LCP（最大内容绘制）和图片相关建议。
---
## 一句话总结
**最关键三步：开 HTTP/2 + 图片长缓存 + 文本压缩。** 这三项配置成本低、收益最大，配合代码里已经做好的按需懒加载，访问速度问题基本能解决。自托管第三方库和上 CDN 作为第二梯队，按需要再做。
上一篇
照片墙使用说明
下一篇
Linux系统配置
Loading...