SuperAPI AI 工具集

core-web-vitals

通用与其它

查看项目

更新于 10-15 20:04

技能介绍

用途:面向 Core Web Vitals 的性能测量与问题诊断,聚焦指标获取与原因定位,不含优化实现本身;优化模式需参考 vercel-react-best-practices。

主要能力:给出五项指标的目标阈值。LCP 良好<2.5s、需改进 2.5–4.0s、差>4.0s;INP 良好<200ms、需改进 200–500ms、差>500ms;CLS 良好<0.1、需改进 0.1–0.25、差>0.25;FCP 良好<1.8s、需改进 1.8–3.0s、差>3.0s;TTFB 良好<800ms、需改进 800–1800ms、差>1800ms。

使用方式:Lighthouse CLI 可执行桌面、移动与无障碍检测,例如 npx lighthouse https://example.com --view --preset=desktop、npx lighthouse https://example.com --view --preset=perf --emulated-form-factor=mobile、npx lighthouse http://localhost:3000 --only-categories=accessibility --view,以及以 JSON 输出并用 jq 查看具体审计项。Bundle Analyzer 提供 Next.js 用法 npm run build 与 npx @next/bundle-analyzer,通用方案 npx source-map-explorer 'dist/**/*.js'。Vercel Speed Insights 在仪表盘 Analytics > Speed Insights 查看。

问题诊断:LCP 慢可经 JSON 输出查 largest-contentful-paint-element,常见原因包括主图过重、Web 字体加载、服务器响应慢、阻塞渲染 JS;INP 慢可用 DevTools Performance 的 Interactions 定位,原因如事件处理沉重、过度重渲染、长任务;CLS 高查 layout-shift-elements,原因如图片未标尺寸、动态内容插入、字体切换、广告嵌入;FCP 慢涉及初始 HTML 体积与阻塞渲染 CSS;TTFB 慢则指向服务器优化。

检查清单:Lighthouse 移动与桌面均测、实机验证、生产环境测量;并配置 Vercel Speed Insights、告警阈值与定期报告。限制:具体实施细节、各框架完整配置与代码未在资料中给出。