What is a PerformanceEntry?

A PerformanceEntry is one timing record in the browser's performance timeline. Its entryType property names what it represents — navigation, resource, paint, mark, measure and so on — and each type has its own subclass with extra properties.

How do I read navigation and resource timing?

Call performance.getEntriesByType('navigation') or 'resource'. These types are buffered, so the entries are available after load. Navigation timing describes the document itself; resource timing covers every sub-resource the page fetched.

Which entry types power the Core Web Vitals?

largest-contentful-paint feeds LCP, layout-shift feeds CLS, and event and first-input feed INP and FID. These are delivered only through a PerformanceObserver, typically created with buffered: true to capture entries that occurred before the observer started.

What is a longtask entry?

A longtask entry marks a main-thread task that ran longer than 50 milliseconds, which can block input and cause jank. It is observer-only and includes attribution data pointing at the frame or container responsible.

Does this tool measure my page's performance?

No. It is a static, searchable reference of entry types. It does not collect any timing data, and nothing is uploaded or stored.

Performance Entry Types Reference

Email me this result

Get this tool's output sent to your inbox, plus one useful tool a week. No spam, unsubscribe any time.

A directory of the performance timeline

The browser records timing information as a stream of PerformanceEntry objects, each tagged with an entryType. Knowing which types exist, which interface each produces, and whether to read them with getEntriesByType() or a PerformanceObserver is the key to measuring real-user performance and the Core Web Vitals. This searchable reference lists them all.

How it works

Some entry types are buffered and read directly; the modern vitals are delivered through an observer:

// Buffered: available after load
const nav = performance.getEntriesByType("navigation")[0];
console.log(nav.loadEventEnd - nav.startTime);

// Observer: Core Web Vitals and long tasks
new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log(entry.entryType, entry.startTime, entry);
  }
}).observe({ type: "largest-contentful-paint", buffered: true });

Your own code can add mark and measure entries with performance.mark() and performance.measure(). Newer types — longtask, layout-shift, largest-contentful-paint, event — must be observed, and buffered: true recovers entries that fired before the observer was attached.

Tips and notes

Use mark/measure to instrument your own code, then read them back as entries.
Always observe vitals with buffered: true so you do not miss the earliest LCP or layout shifts.
resource entries expose transferSize and initiatorType for spotting heavy or slow assets.
A longtask over 50 ms is a yellow flag for input responsiveness — investigate its attribution.