``` ## 5. 避坑指南：新手最易忽略的细节 - **忘记备份**：修改配置文件前必须备份 Nginx 配置文件和网站代码 - **HTTPS 混合内容**：如果使用 CDN 后页面图片加载异常，检查是否全站 HTTPS，CDN 后台开启自动转 HTTPS - **过度压缩**：Gzip / Brotli 级别不要超过 6，否则增加 CPU 负担而收益递减 - **图片转 WebP 兼容性**：部分老旧浏览器（如 iOS Safari 13 以下）不支持 WebP，需要保留 fallback 图片。可以在 `` 标签里添加 `` 和 `` - **CDN 缓存未清理**：CDN 节点缓存过期时间太长可能导致用户看到旧版本，发布更新后记得手动刷新 CDN 缓存（例如 Cloudflare 的「Purge Cache」） ## 6. 效果验证：如何确认优化已经生效 **方法一：Google PageSpeed Insights** 1. 访问 https://pagespeed.web.dev/ 2. 输入你的网站网址，点击「分析」 3. 查看 **移动端** 评分，重点观察 LCP、FID、CLS 的数值 **方法二：Chrome DevTools 的 Lighthouse** 1. 用 Chrome 打开网站，按 F12 打开开发者工具 2. 点击 Lighthouse 标签页，选择「移动端」 3. 点击「分析网页加载」按钮，等待几秒后查看报告 **方法三：WebPageTest（多地点测试）** 1. 打开 https://www.webpagetest.org/ 2. 输入网址，选择移动设备（如 Motorola Moto G4）和地点（国内可选上海/北京） 3. 开始测试，关注 **Speed Index**（速度指数）和 **Time to Interactive**（可交互时间） 对比优化前后的数据：如果页面的 **总大小减少 50% 以上**、**LCP 低于 2.5 秒**，说明优化效果明显。 如果你正在处理**网站移动端速度专项优化**，建议先按本文步骤完整执行，再根据自己的环境做微调；遇到异常时优先回看避坑和高频问题部分。持续监控移动端性能数据，定期复查。