用途:系统性改善 Largest Contentful Paint(LCP)、Interaction to Next Paint(INP)和 Cumulative Layout Shift(CLS),按优先级给出修复方向。
主要能力: LCP 优化(目标 <2.5s):优化图片、预加载 LCP 资源、内联关键 CSS、使用 CDN、启用 HTTP/2 或 HTTP/3。示例:<link rel="preload" as="image" href="/hero.webp" fetchpriority="high" />。 INP 优化(目标 <200ms):对昂贵交互做防抖、用 Web Worker 处理重任务、代码分割。示例:const handleSearch = debounce((query) => { fetchResults(query); }, 300);。 CLS 优化(目标 <0.1):为图片/广告预留空间、使用 CSS aspect-ratio、避免在已有内容上方注入内容。示例:.video-container { aspect-ratio: 16 / 9; }。
验证方式:使用 Lighthouse CI(npm run lighthouse -- --url=https://example.com)以及 web-vitals 在生产环境采集 getCLS、getFID、getLCP。
输出清单:LCP 已优化(<2.5s)、INP 已优化(<200ms)、CLS 已优化(<0.1)、监控已就位、性能回归测试。
限制:资料未提供具体安装命令、收费方式、支持平台及更多使用步骤。