网站加载速度完整优化方案

优化分为：前端资源、图片、JS/CSS、服务端、网络、数据库、缓存、服务器配置，同时可以结合 Lighthouse 做跑分检测，核心目标降低首屏 LCP、减少阻塞资源、降低 TTFB。

一、图片优化（占页面体积大头）

1. 格式替换：优先 WebP / AVIF，降级 jpg/png；不要直接上传原图。

2. 尺寸适配：使用 srcset，移动端加载小图，避免大图缩放显示。

3. 图片压缩：tinypng、Squoosh 无损压缩；关闭图片元信息 EXIF。

4. 懒加载：<img loading="lazy">，首屏外图片延迟加载；首屏关键图片禁止懒加载。

5. 使用 CDN 图片服务：自动转格式、裁剪、质量压缩。

6. 小图标用 SVG，替代 png 图标，矢量体积小。

二、JS & CSS 优化（渲染阻塞重点）

JS

1. 代码压缩混淆：Terser，去除注释、空格、未使用代码。

2. 分包、按需加载，路由懒加载，不把全部 JS 打在一个 bundle。

3. 非关键脚本：添加 defer / async，避免阻塞 HTML 解析。

   • defer：顺序执行，后台下载；async：下载完立刻执行，无序

4. 删除未使用 JS，Tree‑Shaking；移除第三方无用 SDK（统计、广告、组件）。

5. 大第三方库考虑按需导入，例如替换完整 lodash 为 lodash‑es 按需函数。

CSS

1. CSS 压缩，移除无用样式；开启 Tree‑Shaking（PurgeCSS）删掉页面没用到的 css。

2. 关键 CSS 内联到 HTML head，首屏必须样式直接写 html，剩余 css 异步加载。

3. 避免大量 @import，改用 link 标签；不要把全部 CSS 都放在头部阻塞渲染。

三、HTML 优化

1. 压缩 HTML，去除多余换行、注释。

2. 减少 DOM 节点数量，DOM 太大会加重重排重绘。

3. 尽量减少重定向，每一次 301/302 都会增加网络往返。

四、网络传输优化

1. 开启 Gzip / Brotli 压缩（Brotli 压缩率优于 gzip），Nginx/Apache/Caddy 配置开启，文本类 html/js/css 压缩。

图片、视频不要 gzip，不会变小还耗 CPU。

2. 使用 HTTP/2 或 HTTP/3 (QUIC)，多路复用，解决 http1.1 并发限制。

3. 部署 CDN：静态资源（js、css、图片、字体）全部走 CDN，就近访问，降低延迟。

4. DNS 预解析 rel="dns‑prefetch"，预连接 rel="preconnect"，提前建立连接。

<link rel="preconnect" href="shturl.cc/wbSFDpyLZ">
<link rel="dns-prefetch" href="shturl.cc/wbSFDpyLZ">

五、缓存策略（非常关键，减少重复下载）

HTTP Cache‑Control + ETag / Last‑Modified

1. 静态不变资源（js/css/img/ 字体）：强缓存 Cache‑Control: public, max‑age=31536000, immutable 文件名带上 hash（app.abc123.js），内容变更 hash 变化，自动更新缓存。

2. HTML 页面：不设置长强缓存，使用协商缓存 no‑cache。

禁止对 html 设置 max‑age 一年，会导致页面改了用户看不到。

Nginx 示例片段

# 静态资源长缓存
location ~* \.(js|css|png|jpg|jpeg|webp|svg|woff2)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}
# html协商缓存
location ~* \.html$ {
    expires -1;
    add_header Cache-Control "no-cache";
}

六、服务端 & TTFB 优化（首字节时间）

TTFB 过高代表后端处理慢，前端再怎么优化也没用。

1. 开启服务端页面缓存：页面静态化、Redis 缓存渲染结果，避免每次请求查库渲染。

2. 数据库优化：索引、避免慢 SQL，减少查询次数；大列表分页。

3. 减少接口请求，合并接口，避免前端串行多次 fetch。

4. PHP/Java/Python 应用调优，合理设置连接池，不要阻塞。

5. 尽量把动态页面做静态化输出，CMS 生成静态 html 优先。

七、字体优化

1. 字体用 woff2，体积最小；放弃 ttf/otf。

2. 子集字体，只保留网站用到的汉字字符，大幅缩小字体文件。

3. font‑display: swap，避免文字闪烁 FOIT。

@font-face {
  font-family: 'MyFont';
  src: url('font.woff2') format('woff2');
  font-display: swap;
}

八、避免性能坑

1. 谨慎引入第三方脚本：埋点、广告、聊天客服，第三方 JS 是拖慢网站头号元凶。尽量异步加载、延迟到 onload 后再加载第三方。

2. 视频不要直接用 img 标签，使用 video 标签，视频做压缩，首屏视频用封面图懒加载。

3. 避免大型动画滥用 transform、opacity；尽量用 GPU 加速属性，减少重排 reflow。

九、工具检测指标

• Lighthouse（Chrome 开发者工具）：重点看 LCP 最大内容绘制、FID/INP 交互、CLS 布局偏移

• WebPageTest：看瀑布图，找到慢资源

• Chrome Network：看资源大小、加载顺序、阻塞资源

十、简单落地优先级（从收益高到低）

1. 图片压缩 + WebP + CDN（收益最大）

2. 开启 Brotli 压缩 + HTTP2

3. 合理 HTTP 缓存，静态资源 hash 命名

4. JS/CSS 压缩、分包，推迟非关键脚本

5. 关键 CSS 内联

6. 优化 TTFB 后端 / 数据库

7. 字体子集优化，清理第三方脚本

本文原创作者：易君召，详见：https://www.yijunzhao.cn/authors/yijunzhao，转载请注明出处。

原文链接 https://www.yijunzhao.cn/archives/website-loading-speed-optimization-guide

欢迎访问 小易撩挨踢