SuperAPI AI 工具集

frontend-perf-core-web-vitals-inp

前端与建站

查看项目

更新于 10-16 08:09

技能介绍

用途:面向前端性能优化,提供测量与改进 LCP、INP、CLS 的操作参考。INP 自 2024 年 3 月取代 FID,因此本文重点覆盖其三个阶段(输入延迟、处理时长、呈现延迟)以及 yield 阶梯。不覆盖动画专项性能、CSS 容器查询或 RUM 工具集成(Datadog、Cloudflare、Vercel)。

主要能力:给出 75 分位绑定阈值——LCP 良好≤2.5s、待改进 2.5–4.0s、差>4.0s;INP 良好≤200ms、待改进 200–500ms、差>500ms;CLS 良好≤0.1、待改进 0.1–0.25、差>0.25,且需按移动端与桌面端分别统计。提供四棵决策树:LCP 受损原因排查、INP 超 200ms 归因、yield API 选择、Speculation Rules eagerness 选择。

必要用法:LCP 图像始终设置 fetchpriority="high" 与显式 width/height,不用 loading="lazy";预加载字体使用 font-display: swap 并配合 size-adjust/ascent-override/descent-override 匹配回退字体;长任务用 await scheduler.yield() 并保留 setTimeout(_,0) 回退;事件处理先做视觉更新,再通过 requestAnimationFrame(() => setTimeout(work, 0)) 延后计算;为迟加载内容预留空间(宽高、aspect-ratio、min-height);content-visibility: auto 必须搭配 contain-intrinsic-size: auto Npx;Speculation Rules 须排除 /logout、?add-to-cart=、[rel~=nofollow]、登录与 OTP 等破坏性 URL;scheduler.yield() 与 Speculation Rules 均为 Chromium 限定可用,使用前必须特性检测;所有三项指标须在 p75 且区分设备后才可宣称通过。

适用场景:图像或字体拖慢 LCP、渲染阻塞 JS、点击处理超 100ms、点击响应慢、typeahead 卡顿、离屏列表卡顿、图片无尺寸导致 CLS、广告位回流、滚动注入横幅、下一页导航慢。

限制:PerformanceScriptTiming 仅同源可归因,跨源 iframe、Web Worker 与 Service Worker 归因返回 null;requestAnimationFrame 与 requestIdleCallback 不可当作通用 yield;Speculation Rules 为 Chromium 限定可用。缺失信息:具体安装命令与包管理方式暂未提供。