用户等一个网页的耐心是 3 秒。图片没优化的网站，首屏动辄 5MB，移动端加载十几秒，跳出率直接起飞。

这篇讲不换服务器、不加带宽前提下，把网站加载速度提上去的所有手段：图片格式、压缩、懒加载、浏览器缓存、资源合并。全部可实操。

需要云服务器可以看看财富云计算：NAT 型无独立公网 IP，价格比独立 IP 机型省一半以上，一键开服面板，主流游戏快速部署。

一、先诊断：网站到底慢在哪

优化前先量，别凭感觉。三个工具：

# 1. 命令行看加载瀑布
curl -w "@curl-format.txt" -o /dev/null -s https://你的域名

# curl-format.txt 内容:
#   DNS: %{time_namelookup}s\n
#   连接: %{time_connect}s\n
#   TLS: %{time_appconnect}s\n
#   首字节: %{time_starttransfer}s\n
#   总耗时: %{time_total}s\n
#   下载速度: %{speed_download} B/s\n

# 2. 看页面总大小和请求数
curl -s https://你的域名 | grep -oE '(src|href)="[^"]+\.(jpg|png|css|js)"' | wc -l

更直观的：浏览器 F12 → Network 面板，或者 Google PageSpeed Insights / -web.dev/measure 打分。

常见病因排序：

1. 图片没压缩（占 80% 的流量）
2. 没用浏览器缓存（老访客每次全量下载）
3. 请求数太多（几十个 CSS/JS 单独加载）
4. 没开 Gzip/Brotli
5. 没上 CDN

二、图片优化：收益最大的一步

1. 选对格式

策略：用 <picture> 标签做渐进增强，支持 WebP 的浏览器用 WebP，不支持的兜底 JPEG：

<picture>
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="示例" loading="lazy" width="800" height="600">
</picture>

2. 压缩：上传前先瘦身

本地批量压缩工具链：

# 安装 imagemin(Node 生态)
npm install -g imagemin-cli imagemin-webp imagemin-mozjpeg

# 批量转 WebP + 压缩
imagemin photos/*.jpg --plugin=webp --outdir=photos/webp/
imagemin photos/*.jpg --plugin=mozjpeg --outdir=photos/compressed/

在线/图形工具：TinyPNG、Squoosh（Google 出品，可调质量实时预览）。

质量参数建议：照片类 JPEG 质量 75–80，肉眼几乎无损，体积减半；WebP 质量 80。

3. 响应式图片：别给手机发 4K 图

<img src="photo-800.jpg"
     srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
     sizes="(max-width: 600px) 400px, 800px"
     alt="示例" loading="lazy" width="800" height="600">

浏览器根据屏幕宽度选最合适的尺寸，移动端流量直接省 75%。

4. 懒加载

首屏以下的图片全部延迟加载，用户滚到哪加载到哪：

<!-- 原生懒加载,现代浏览器全部支持,零 JS -->
<img src="photo.jpg" loading="lazy" alt="示例">

<!-- 背景图懒加载(用 IntersectionObserver) -->
<div class="lazy-bg" data-bg="bg.jpg"></div>
<script>
const obs = new IntersectionObserver((es) => {
  es.forEach(e => {
    if (e.isIntersecting) {
      e.target.style.backgroundImage = `url(${e.target.dataset.bg})`;
      obs.unobserve(e.target);
    }
  });
});
document.querySelectorAll('.lazy-bg').forEach(el => obs.observe(el));
</script>

5. 一定要写 width 和 height

<!-- 反例: 没写尺寸,加载时页面跳动(CLS),影响 SEO -->
<img src="photo.jpg">

<!-- 正例 -->
<img src="photo.jpg" width="800" height="600">

这是 Google Core Web Vitals 的硬指标，不写会被搜索引擎扣分。

三、CSS / JS 优化

1. 压缩混淆

# 用 terser 压 JS
npx terser app.js -o app.min.js -c -m

# 用 csso 压 CSS
npx csso style.css -o style.min.css

通常能减 30–60% 体积。Nginx 也可以开 Gzip（见下文），双保险。

2. 减少请求数

• 多个小图标合并成雪碧图，或者干脆用 SVG symbol
• 首屏关键 CSS 内联到 HTML，非关键的异步加载
• 第三方脚本（统计、广告）能合并的合并，不能合并的放 defer

<!-- defer: 不阻塞 HTML 解析,按顺序执行 -->
<script src="analytics.js" defer></script>

<!-- async: 不阻塞,下载完立即执行,适合无依赖的独立脚本 -->
<script src="ad.js" async></script>

3. 浏览器缓存：老访客秒开

Nginx 配置（这是核心，抄走就能用）：

# 静态资源长缓存
location ~* \.(jpg|jpeg|png|webp|gif|svg|ico|css|js|woff2?)$ {
    expires 30d;
    add_header Cache-Control "public, immutable";
    access_log off;
}

# HTML 不缓存(内容要实时)
location ~* \.html$ {
    expires -1;
    add_header Cache-Control "no-cache, must-revalidate";
}

immutable 告诉浏览器「这资源一年内不会变，别来问」，配合文件名带 hash（app.a3f2b1.css）是业界标准做法。

4. 开 Gzip / Brotli

# nginx.conf 的 http 块
gzip on;
gzip_comp_level 5;          # 1-9,建议 4-6,再高 CPU 不划算
gzip_min_length 1k;         # 小于 1k 不压
gzip_types text/plain text/css application/json application/javascript 
           text/xml application/xml image/svg+xml;

# Brotli 更优(需装 ngx_brotli 模块)
brotli on;
brotli_comp_level 5;
brotli_types text/plain text/css application/javascript image/svg+xml;

Gzip 对文本类压缩率 70%+，一行配置的事，收益巨大。

四、协议层优化

HTTP/2 或 HTTP/3

Nginx 开 HTTP/2（需要 HTTPS）：

server {
    listen 443 ssl http2;
    # HTTP/3(需 nginx 1.25+ 且编译 quic)
    # listen 443 quic reuseport;
}

HTTP/2 的多路复用让「多个请求不用排队」，请求多的网站收益明显。

开启 HTTPS 并强制跳转

不仅为安全，HTTP/2 和 Brotli 都要求 HTTPS。配置见 HTTPS 强制跳转与安全响应头。

上 CDN

静态资源走 CDN，用户就近访问，这是把「服务器带宽」问题变成「CDN 厂商」问题。配置见静态网站部署与 CDN 加速。

五、优化效果验收

每项改完都量一次，用数据说话：

服务器带宽监控：优化前后对比 iftop 峰值，带宽降 50% 以上是常态。

六、常见问题

Q：图片压狠了糊怎么办？
质量别一刀切。 Banner 图质量 85，缩略图 70，背景图可以 60。用 Squoosh 实时对比画质和体积。

Q：WebP 兼容性还有问题吗？
2026 年的今天，主流浏览器全部支持 WebP（包括 Safari 16.4+）。用 <picture> 做兜底，零风险。

Q：CDN 缓存导致改了 CSS 不生效？
文件加 hash 版本号（构建工具自动做），或者手动刷新 CDN 缓存。

Q：Gzip 开了但没效果？
检查 gzip_types 是否包含你的资源类型；确认响应头有 Content-Encoding: gzip；Nginx 默认只压 text/html，其他类型要显式声明。

Q：这些优化和服务器配置有关吗？
Gzip、缓存头、HTTP/2 都在 Nginx 层，和机器性能无关；但 CPU 弱的机器开 Brotli level 6 以上会明显吃 CPU，小机器用 level 4。

小结

网站提速的性价比排序：图片压缩 > 浏览器缓存 > CDN > Gzip > 懒加载 > 协议升级。前三项做完，大多数网站能快一倍以上，而且一分钱不花。

更多网站优化内容见财富云计算知识库：Nginx 配置、静态资源分离、网站变慢排查、性能压测全系列。需要云服务器可以看看财富云计算：一键开服面板，NAT 型无独立公网 IP，价格比独立 IP 机型省一半以上。

延伸阅读

1. 网站环境怎么选：LNMP 手动 / 宝塔面板 / Docker / 云开发
2. 问卷表单系统搭建：SurveyKing / Formbricks，数据自己收
3. 图床搭建：Lsky Pro / Lychee，自托管图片托管方案
4. 邮件列表搭建：listmonk 自托管 Newsletter，把读者握在自己手里
5. 文档站点搭建：MkDocs / VuePress / Docsify，产品文档与技术手册方案
6. RSS 阅读器搭建：FreshRSS 自托管，把信息流拿回自己手里
7. 短链接服务搭建：Shlink 自托管，链接数据自己掌握
8. 网站状态监控页搭建：Uptime Kuma，服务器挂了第一时间知道

更多阅读

1. 上一篇：对象存储分离静态资源：给服务器减负的标配方案
2. 下一篇：Typecho 主题选择与插件推荐：轻量博客的正确玩法