(字数：24字，略少于要求，调整如下)

如何快速定位网站加载速度瓶颈

当用户抱怨网站打开慢时，你需要一套系统的方法找出问题所在。以下是可立即操作的技术排查流程。

第一步：获取关键性能指标

不要依赖主观感觉，首先使用专业工具测量。推荐使用 Google PageSpeed Insights 或 WebPageTest。核心需记录以下数据：

• 首次内容绘制（FCP）
• 最大内容绘制（LCP）
• 首次输入延迟（FID）
• 累计布局偏移（CLS）

第二步：分析资源加载瀑布图

在测试工具的瀑布图中，关注以下阻塞性资源：

1. JavaScript 文件：检查是否未使用 async 或 defer 属性。
2. CSS 文件：检查是否放置在文档头部。
3. 第三方脚本：如分析工具、广告代码的加载时间。

第三步：核查服务器与网络配置

速度问题常源于后端。检查以下配置项：

第四步：优化前端资源

针对发现的资源问题，执行以下操作：

• 图片优化：
  • 转换为 WebP 格式。
  • 使用 <img srcset="..."> 实现响应式图片。
  • 指定图片的宽高属性以减少布局偏移。
• 代码拆分：
  • 使用 Webpack 的 import() 语法进行动态导入。
  • 将第三方库与业务代码分离打包。

第五步：验证优化结果

完成上述更改后，重新运行第一步的性能测试。对比优化前后的核心指标数据，确保每一项都有所改善。特别是 LCP 和 CLS，这两项直接影响用户体验和搜索引擎排名。如果某项指标未达标，返回瀑布图分析该资源链路的加载顺序和大小。

持续监控建议

将性能测试集成到持续集成（CI）流程中。可以使用 Lighthouse CI，为每次提交设置性能预算阈值，例如 LCP 不得低于 2.5 秒。当代码合并导致性能衰退时，CI 系统会自动发出警告。