核心页面指标三大项——LCP、CLS、FID

以下是 Core Web Vitals 的三个组成部分及其衡量的内容：

  • 最大内容绘制 (LCP) – 视觉负载
  • 累积布局偏移 (CLS) – 视觉稳定性
  • 首次输入延迟 (FID) – 交互性

查看网站指标的最简单方法是使用 Google Search Console 中的 Core Web Vitals 报告。 通过该报告，你可以轻松查看你的网页是否被归类为 “不良 URL”、“需要改进的 URL” 或“ 良好 URL”。

每个类别的阈值如下：

  • 良好的 需要改进的 不良
  • LCP <=2.5s <=4s >4s
  • FID <=100ms <=300ms >300ms
  • CLS <=0.1 <=0.25 >0.25
(Loading)
LCP
Largest Contentful Paint
GOOD
NEEDS IMPROVEMENT
POOR
union 2.5 sec
union 4.0 sec
最大内容绘制 (LCP)
最大的元素通常是特色图片或 <h1> 标签。 但也可能是以下任何一种：
<img> 元素
<svg> 元素内的 <image> 元素
<video> 元素内的图像
使用 url() 函数加载的背景图片
文本块
<svg> 和 <video> 可能会在未来被加入其中。
如何优化LCP？
  • 越小越快
  • 越近越快
  • 尽可能使用同一台服务器
  • 尽可能缓存
  • 资源的优先级
  • 预加载图像
  • 懒加载图像
  • 预加载 CSS
  • CSS懒加载
  • 字体
  • JAVASCRIPT 预加载
  • JAVASCRIPT 懒加载
>> 了解优化细节
(Interactivity)
FID
First lnput Delay
GOOD
NEEDS IMPROVEMENT
POOR
union 100 ms
union 300 ms
首次输入延迟 (FID)
FID 是从用户与你的页面交互到页面响应的时间。 你也可以将其视为 “响应性”。示例：
单击链接或按钮
在空白字段中输入文本
选择下拉菜单
单击复选框
滚动或缩放等一些事件不计算在内。
如何优化FID？
  • 大多数页面通过了 FID 检查。 但是，如果你需要处理 FID，那么你可以处理的项目很少。 如果你可以减少 JavaScript 的运行量，那就这样做吧。
  • 如果你使用的是 JavaScript 框架，则加载页面需要大量 JavaScript。 JavaScript 可能需要一段时间才能在浏览器中处理，这可能会导致延迟。 如果你使用预渲染或 (SSR)，你会将这个负担从浏览器转移到服务器。
  • 另一种方案是分解 JavaScript，使其运行时间更短。 你将那些延迟对用户输入的响应的长任务分解成更小的任务，这些任务阻塞的时间更短。 这是通过代码拆分来完成的，它将任务分成更小的块。
>> 了解优化细节
(Visual Stability)
CLS
Cumulative Layout Shift
GOOD
NEEDS IMPROVEMENT
POOR
union 0.1
union 0.25
累积布局偏移 (CLS)
CLS 测量元素如何移动或页面布局的稳定性。 它考虑了内容的大小和移动的距离。 Google 已经更新了 CLS 的测量方式。 以前，即使在初始页面加载之后，它也会继续测量。 但现在它被限制在发生最大变化的五秒时间范围内。CLS 的常见原因包括：
  • 没有尺寸的图像。
  • 没有尺寸的广告、嵌入和 iframe。
  • 使用 JavaScript 的内容注入。
在加载后期应用字体或样式。
如何优化CLS？
  • 图像
  • 字体
  • 注入内容
>> 了解优化细节
衡量 Core Web Vitals 的工具
现场数据
Chrome User Experlence Report
data
PageSpeed Insights
data
Google Search Console
data
Chrome User Experlence Report
data
PageSpeed Insights
data
Google Search Console
data
加载更多
实验室数据
Chrome User Experlence Report
data
PageSpeed Insights
data
Google Search Console
data
Chrome User Experlence Report
data
PageSpeed Insights
data
Google Search Console
data
加载更多

Core Web Vitals优化方案模板

search

On-page SEO优化方案模板
search

On-page SEO优化方案模板
search

On-page SEO优化方案模板
马上进行网站Core Web Vitals优化
助您优化网页用户体验！
马上进行网站
Core Web Vitals优化
助您优化网页用户体验！