什么是Webperf Core Web Vitals
Webperf Core Web Vitals 是一款专为 Chrome DevTools 设计的 JavaScript 性能分析工具集，专注于自动化测量和深度诊断网页核心性能指标。该工具通过集成多个专用脚本，能够精准捕获 Largest Contentful Paint (LCP)、Cumulative Layout Shift (CLS) 和 Interaction to Next Paint (INP) 三大关键指标，为前端开发者提供从数据采集到问题定位的一站式解决方案。其核心优势在于采用智能决策树机制，可根据初步检测结果自动触发后续调试流程，显著提升性能排查效率。所有脚本均通过标准 DevTools 接口执行，支持控制台输出结构化数据，便于开发者快速理解页面性能瓶颈所在。
核心功能特点
- 自动化执行 LCP、CLS、INP 三大核心网页指标的实时测量
- 基于决策树的智能诊断流程，自动推荐并执行针对性调试脚本
- 支持 LCP 候选元素类型识别（图片/视频），分别提供深度分析路径
- 集成子阶段拆解功能，可细化分析 TTFB、资源加载、渲染延迟等关键环节
- 跨技能联动机制，当检测到特定问题时自动调用其他专业模块（如 loading/media/interaction）进行协同分析
- 提供 CLS 与 INP 专项调试工作流，精准分离布局偏移与交互延迟的成因
适用场景
该工具特别适合需要系统化优化网页性能的团队和个人开发者。对于刚接触 Core Web Vitals 的团队而言，它提供了一个标准化的审计流程：只需依次运行三个基础脚本即可完成初步评估，极大降低了学习成本和技术门槛。当遇到具体性能问题时，例如首页加载缓慢或用户反馈操作卡顿，开发者可利用其引导式调试能力快速定位根源——比如通过 LCP-Sub-Parts.js 发现 TTFB 耗时过长，再结合 webperf-loading 技能中的 Service-Worker-Analysis.js 检查服务端响应策略。对于电商、内容平台等高流量网站，该工具还能有效识别因懒加载图片尺寸缺失或字体异步加载导致的布局抖动问题，帮助维持稳定的视觉体验。此外，在移动端适配场景中，通过 INP 调试流程可发现主线程阻塞脚本，从而优化触控响应速度，提升整体可用性。