"Element Timing API：关键元素性能采集与 Hero 指标"

---

title: "Element Timing API：关键元素性能采集与 Hero 指标"

keywords:

• Element Timing
• elementtiming
• PerformanceObserver
• Hero Element
• LCP 协作

description: "介绍 Element Timing 的采集机制与 elementtiming 属性，如何对关键元素（Hero）采集呈现时间，与 LCP/用户体验协作分析，提供示例与参考。"

categories:

• 文章资讯
• 技术教程

---

概述

Element Timing 允许为关键元素（如首屏图片/标题）标注 elementtiming 属性，浏览器在绘制时生成性能条目，可通过 PerformanceObserver 采集用于分析与优化。

示例

<img src="/hero.jpg" elementtiming="hero" alt="首屏图" width="1200" height="800">
<script>
const obs = new PerformanceObserver(list => {
  for (const e of list.getEntries()) {
    if (e.identifier === 'hero') {
      console.log('hero paint at', e.startTime)
    }
  }
})
obs.observe({ type: 'element', buffered: true })
</script>

工程建议

• 标注策略：选择真正影响用户感知的关键元素；避免过多标注。
• 与 LCP：对比 LCP 与自定义 Hero 时间；结合图片解码与优先级策略优化。
• 兼容与隐私：仅在支持平台启用；遵循隐私边界与报告策略。

参考与验证

• web.dev Element Timing 介绍：https://web.dev/articles/element-timing
• Chrome 平台文档与实践说明：相关性能采集资料