White Meta
Theme: ...

返回文章列表

【基础】Core Web Vitals（核心指标）

由三项组成：LCP + INP + CLS

按 F12 → Performance 页签可看到这三个指标。

LCP（Largest Contentful Paint）最大内容绘制

📎 文档

指视窗内最大的可见元素（通常是大图、视频或大段文本）完全渲染出来需要的时间。

工作原理

浏览器持续监听屏幕上出现的元素，不断更新「当前最大的那个元素」是谁，直到用户开始交互。一旦用户进行了交互（点击、滚动、按键），或者页面被隐藏，浏览器就会停止寻找，并把最后一次确定的最大元素的渲染时间记为 LCP 时间。

常见优化策略

  • 大图压缩后使用，用更友好的格式（WebP）

  • 提高下载优先级（fetchpriority="high"）关于下载优先级：MDN 文档

  • 图片放 CDN 托管

  • 考虑使用 SSR — 让图片或其他内容第一时间呈现，否则需要等待 JS 加载完毕才会绘制

  • 关于预加载方案后边会具体讲解

INP（Interaction to Next Paint）下次绘制交互

📎 文档

指用户与页面进行交互（点击按钮、输入文字等）到浏览器通过下一帧绘制做出视觉反馈的延迟时间。

工作原理

INP 会监测页面生命周期内所有的交互，然后取耗时最长的那次交互时间作为最终分数。

INP 主要分三块：

  1. 输入延迟时间 — JS 是单线程，主线程可能有别的任务，不能第一时间响应操作。例如鼠标点击某个按钮，从用户手指按下到 JS 事件回调函数真正开始运行之前的时间就是输入延迟时间。

  2. 处理时间 — 事件回调函数的执行所需时间。

  3. 呈现延迟 — 代码执行完后，浏览器需要重新计算样式、布局并把像素画到屏幕上（Paint）。这段时间叫呈现延迟。

如果你之前了解过性能指标，可能听说过 FID（First Input Delay）。
INP 已于 2024 年 3 月 正式取代了旧指标 FID。INP 比 FID 更严格——它监测页面整个生命周期内的所有交互延迟，而不仅仅是第一次。

CLS（Cumulative Layout Shift）累积布局偏移

📎 文档

用来衡量视觉稳定性。

layout shift score = impact fraction × distance fraction

简单来说：越大的元素，布局时被挤占偏移的距离越远，该指标越差。

常见原因及优化

  1. 图片元素没定义尺寸 — 图片加载慢，加载出来整个文档都要偏移。如果宽高不好确定，可以这样写：

.card-image {
  width: 100%;
  aspect-ratio: 16 / 9; /* 锁定 16:9 宽高比 */
  object-fit: cover;    /* 确保图片不拉伸 */
}

浏览器根据宽高比始终预留高度，避免文档偏移。

  1. 动态插入的内容 — 比如一些网站为了盈利植入 Google AdSense，广告插入时导致元素偏移。正确做法是给广告预留一个设置了高度的容器（骨架屏）。

  2. 错误使用动画 — 使用 margin-top 或 top/left 做动画，每次位移都会触发重排，浏览器在每一帧都要重新计算布局从而产生偏移。正确方法是用 transform: translateY()。