w3c / charter-webperf

Web Performance Group charter
https://w3c.github.io/charter-webperf/
27 stars 11 forks source link

Element Timing API: added to DOM, painted, ... #30

Open igrigorik opened 8 years ago

igrigorik commented 8 years ago

(discussed at TPAC 2016; rough notes and summary of discussed ideas below)

Read Hero Element Timing API doc for motivation and use cases. In addition to "painted", it might be useful to expose other points in the element lifecycle (e.g. added to DOM) and generalize this proposal to support different metrics. For example...

<div timing="dom, paint" id="super-important-header">
  <img src="/header.jpg" alt="why we're awesome">
  <p>...</p>
</div>

Which could result in multiple PerformanceEntries: one for added to DOM, one for when element is painted... or some such. Related questions and discussions at TPAC:

note: if this mechanism is available and developers annotate their pages, then it could enable us to define "first meaningful paint" as the time when the "hero element(s)" contained in the initial viewport are painted.

igrigorik commented 6 years ago

There's been a few attempts at tackling this space over the last few years.

Current focus is on investigating "Hero Text Element Timing". Relevant docs: