网站打开速度慢怎么办？ 先排查瓶颈：服务器、代码、资源、 *** 四环节，再针对性优化。 ---

一、先定位：到底是哪一步拖慢了网页？

**1. 用工具测速，别凭感觉** - WebPageTest：输入网址，选择接近目标用户的节点，看瀑布图里哪一条资源耗时最长。 - Lighthouse：Chrome DevTools 一键跑分，FCP、LCP、T *** 三个指标红了就重点盯。 - 阿里云 ARMS、腾讯云 RUM：线上真实用户采样，比实验室数据更可信。 **2. 自问自答：常见瓶颈在哪？** - 首包时间（TTFB）> 200 ms？多半是服务器或后端接口慢。 - 白屏> 1.5 s？可能是阻塞 *** /CSS 太多。 - 图片> 1 MB？压缩没做或用了错误格式。 - 静态资源域名过多？浏览器并发数被占满。 ---

二、服务器层：让首包飞起来

**1. 选离用户近的机房** - 国内业务直接上 BGP 三线机房，海外用户走 CDN。 - 云厂商“全站加速”一键把动态请求也缓存到边缘节点，TTFB 能降 30% 以上。 **2. 开启 HTTP/2 或 HTTP/3** - 多路复用，一个连接并行传所有资源，减少三次握手。 - Nginx 1.25+ 编译 `--with-http_v3_module` 即可启用 QUIC。 **3. 后端接口加速三板斧** - 数据库加索引、Redis 缓存热点查询、对象存储直传 OSS，别让 PHP/Java 每次算一遍。 ---

三、资源层：把体积砍到最小

**1. 图片** - 格式：照片用 WebP，图标用 SVG，动图用 MP4。 - 工具：imagemin、Squoosh 在线压缩，肉眼无差异体积降 60%。 - 响应式：`srcset` 按屏幕宽度加载 1x/2x 图，移动端不背 4K 锅。 **2. *** /CSS** - 打包：Webpack/Rollup 开 `production` 模式，Tree-Shaking 去掉死代码。 - 分割：路由级懒加载，首屏只留 50 KB 以内。 - 压缩：Terser 压缩 *** ，cssnano 压缩 CSS，Gzip/Brotli 再压一次。 **3. 字体** - 只留用到的字符，Font-Spider 自动子集化，中文字体从 3 MB 变 80 KB。 - `font-display: swap` 先渲染系统字体，再异步替换，避免 FOIT 白屏。 ---

四、 *** 层：让传输像高铁

**1. CDN 不是摆设** - 把静态资源丢到七牛、又拍、Cloudflare，边缘缓存命中率> 90%。 - 设置 `Cache-Control: max-age=31536000, immutable`，文件名带 hash，更新即换 URL。 **2. DNS 预解析** - `` 提前解析域名，减少 20-120 ms。 - 对关键第三方域名用 `preconnect`，TLS 握手也提前做。 **3. 减少重定向链** - 一次 301 就多一次 RTT，能用 Nginx 内部 rewrite 就别让浏览器跳转。 ---

五、浏览器层：让渲染更丝滑

**1. 关键渲染路径优化** - CSS 放 ``， *** 放底部或加 `defer`，避免阻塞 DOM。 - 内联关键 CSS（Critical CSS），首屏样式直接塞进 HTML，剩余异步加载。 **2. 预加载与懒加载** - `` 告诉浏览器高优先级加载。 - `loading="lazy"` 原生懒加载图片，IntersectionObserver 监听滚动，节省 30% 流量。 **3. 避免回流重绘** - 动画用 `transform: translateZ(0)` 触发合成层，减少主线程压力。 - 批量 DOM 操作先 `display:none`，改完再显示，一次回流解决。 ---

六、实战案例：从 8 秒到 1.5 秒的全过程

**背景**：某电商活动页，首屏 8 MB，Lighthouse 评分 23。 **步骤**： 1. 服务器迁到阿里云上海节点，开全站加速，TTFB 从 600 ms 降到 120 ms。 2. 图片批量转 WebP，再用 CDN 缓存，体积从 5 MB 降到 1.2 MB。 3. 拆分 *** ：把非首屏的 React 组件做懒加载，首屏 *** 从 1.8 MB 降到 180 KB。 4. 关键 CSS 内联，剩余样式异步加载，FCP 从 4.2 s 降到 1.1 s。 5. 开启 HTTP/2 + Brotli，整体再快 15%。 **结果**：Lighthouse 评分 92，转化率提升 17%。 ---

七、常见疑问快答

**Q：用了 CDN 还是慢？** A：检查缓存命中率，低于 80% 就是回源太多，把动态参数去掉或用边缘规则忽略 `?v=`。 **Q：WebP 兼容性怎么办？** A：`` 标签兜底，不支持自动回退 JPG，代码示例： ```html ``` **Q：如何持续监控？** A：接入 Sentry Performance 或阿里 ARMS，设置 LCP> 2.5 s 自动报警，每周 Review 一次慢日志。 ---

八、一份可落地的检查清单

- [ ] 服务器 TTFB < 200 ms - [ ] 所有图片 < 100 KB，格式 WebP/SVG - [ ] 首屏 *** < 50 KB，CSS < 20 KB - [ ] CDN 缓存命中率 > 90% - [ ] 开启 HTTP/2 或 HTTP/3 - [ ] 关键资源 preload，非关键懒加载 - [ ] 每周跑一次 Lighthouse，分数 > 85 照着清单逐项打钩，网站打开速度慢的问题基本解决。