Web Perf

Web Perf 是什么

基于 Chrome DevTools 协议与 MCP 工具生态的深度前端性能审计与专项调优技能。系统专注于精准测量 Core Web Vitals 核心性能指标（FCP、LCP、TBT、CLS、Speed Index），快速定位渲染阻塞瓶颈与网络级联依赖。

核心应用场景

适用于电商大促前关键页面首屏加载性能冲刺、优化企业官网在 Google 搜索引擎的 Core Web Vitals 评分以提升 SEO 排名、解决复杂单页应用交互卡顿与内存泄漏，以及排查字体与图片引起的布局抖动。

关键功能特性

支持网络请求瀑布流（Waterfall）依赖链分析、主线程长任务（Long Tasks）堆栈归因、渲染阻塞 CSS 与 JavaScript 资源定位、静态资源强缓存与压缩策略诊断，并提供立竿见影的代码级重构方案。

标准操作流程

用户提供目标网站 URL 或性能录制日志，系统调度 Chrome 协议接口展开全生命周期性能分析；采集关键时间节点数据并生成指标评分雷达；针对失分最严重的项目给出具体的代码优化指导。

输入与输出规范

输入包括待分析的网页 URL 地址、Lighthouse 审计报告数据或网络请求 HAR 归档；输出包括详尽的性能诊断分析报告、指标瓶颈归因定位及代码优化实施清单。

环境依赖与权限要求

配合支持 Chrome DevTools MCP 的智能体环境运行效果最佳，支持直接驱动无头浏览器抓取真实加载指标，也可基于用户提供的静态性能日志完成推演。

边界限制与避坑指南

若目标网站部署在受严格内网防火墙保护的私有网络中，需确保测试智能体具备对应的网络访问权限或通过导入本地导出的 Performance Trace 日志进行分析。

目标适用人群

前端资深开发工程师、全栈性能架构师、网站运维（SRE）工程师、SEO 优化专家，以及对网站首屏加载速度有严苛追求的技术管理者。

安装与启用指引

挂载技能后提供待测网址，输入分析该页面 LCP 指标过高的原因并给出优化建议，系统将启动深入分析并输出详细的排查报告与优化补丁。

来源背景与开源协议

本技能源自官方注册表认证收录，具有完备的元数据规范定义与清晰的版权授权，遵循 MIT 许可协议。在提供高效专业能力的同时严守数据安全边界，为用户的数字化与智能化业务提供稳固可靠的技术支持。

常见问题答疑

1. Web Perf 技能通过何种方式对网页真实性能展开体检？

基于 Chrome DevTools 协议与性能录制日志，深度采集页面全生命周期中网络请求瀑布流、主线程执行堆栈及各项渲染耗时指标。

2. 在性能评估中重点追踪 Core Web Vitals 的哪三项核心指标？

核心追踪最大内容绘制时间（LCP）、首次输入延迟或交互到下次绘制（INP/TBT），以及累积布局偏移（CLS）三项黄金性能指标。

3. 当网页 LCP 指标过长时助手能给出哪些针对性的排障建议？

排查关键路径上的大图资源压缩率、CDN 节点分发延迟、服务端渲染直出（SSR）瓶颈以及关键 CSS 与 JS 脚本的渲染阻塞问题。

4. 页面在加载过程中出现文字抖动或图片跳跃（CLS 恶化）如何治理？

指导为所有图片和广告容器预设明确的宽高宽高比属性，优化自定义 Web 字体加载策略（font-display: swap）杜绝抖动发生。

5. 面对用户点击响应迟缓的问题如何定位主线程长任务？

深入分析耗时超过 50 毫秒的长任务（Long Tasks）调用栈，提供使用 Web Worker 离线计算或时间切片分批处理的长效优化方案。

6. 是否支持对多网络环境（如慢速 4G）与移动端设备降级测算？

支持配置网络节流（Network Throttling）与 CPU 算力限制参数，真实模拟在弱网与中低端安卓手机环境下的极端性能表现数据。

7. 输出的性能审计报告包含了哪些便于研发跟进的内容？

包含性能雷达得分、失分项目根因穿透定位、代码修改补丁示例，以及优化实施前后预期的性能提升对比量化预测分析数据。

8. 技术团队发起一次性能优化专项治理的标准操作是什么？

提供目标网站线上链接或导出的 Trace JSON 文件，指定需要重点提升的指标，系统将输出一份由重到轻的性能专项治理路线图。