浏览器LCP多次触发的判定规则及官方标准问询

测试代码 #

<!DOCTYPE html>
<html>
<head>
  <title>test LCP</title>
</head>
<body>
<h1>Title</h1>
<div></div>
  <script>
    setTimeout(()=>{

      document.querySelectorAll('div')[0].textContent = 'Test LCP ...Test LCP ...Test LCP ...Test LCP ...Test LCP ...Test LCP ...Test LCP ...Test LCP ...Test LCP ...Test LCP ...Test LCP ...Test LCP ...Test LCP ...Test LCP ...Test LCP ...Test LCP ...Test LCP ...Test LCP ...Test LCP ...Test LCP ...Test LCP ...Test LCP ...Test LCP ...Test LCP ...Test LCP ...Test LCP ...Test LCP ...Test LCP ...Test LCP ...Test LCP ...';
    }, 1000)
    
  </script>
</body>
</html>

测试场景与现象 #

这是一个极简页面，包含一个<h1>标签和一个空<div>，JS会在延迟一段时间后为该<div>渲染文本。

通过Web Vitals扩展输出的控制台日志显示：

• 第一次LCP触发于<h1>标签显示时；
• 第二次LCP触发于<div>渲染文本时。

原本以为单页中LCP只会触发一次，但实际出现了两次触发的情况，因此有以下疑问：

核心疑问 #

1. CrUX会如何记录该页面的LCP值？是取较大的那个吗？
2. 测试发现当setTimeout延迟超过某个阈值时，不会触发第二次LCP：
   • 延迟值较小时，会触发第二次LCP日志；
   • 延迟值设为60000ms（一分钟）时，有时会触发第二次LCP，有时不会；
   • 延迟值设为180000ms（三分钟）时，仍会触发第二次LCP。
     想了解该行为对应的官方标准文档。

解答 #

关于CrUX的LCP统计规则 #

CrUX记录的是页面生命周期里最后一次有效的LCP值——也就是页面加载过程中出现的最大LCP时间点。因为LCP的定义就是视口内最大内容元素绘制完成的时间，如果后续有更大的内容元素被渲染（比如你例子里延迟加载的长文本div），只要这个更新在浏览器的LCP观测窗口内，就会替换之前的LCP值，CrUX最终会保留这个最新的、最大的数值。

关于LCP的观测时间阈值 #

根据Web Vitals官方标准，浏览器默认会在页面加载后的25秒内持续监测LCP变化，但这个窗口会和用户交互绑定：

• 如果25秒内没有用户交互，浏览器就会停止监测；
• 如果有用户操作（点击、滚动等），监测窗口会被延长，最长到页面生命周期结束（比如关闭标签、切换页面）。

你测试里遇到的一分钟、三分钟仍能触发的情况，大概率是因为页面处于活跃标签页（没被浏览器冻结），所以监测窗口被延长了；而一分钟偶尔不触发的情况，可能是浏览器对后台标签的资源限制导致监测提前终止。

内容的提问来源于stack exchange，提问作者AGamePlayer