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

应用介绍

概述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-timingChrome 平台文档与实践说明：相关性能采集资料