Browser - Page and User Performance API

About

The performance timeline ¹⁾ is an API to measure user or browser page load performance.

Example

User script Perf

performance.mark("startWork");
doWork(); // Some developer code
performance.mark("endWork");

Page Load

Page load performance

<img src="/_media/lenna.png" width="200px"/>

window.addEventListener("load", function(){
      performance
        .getEntries()
        .map(entry => JSON.stringify(entry, null, 2))
        .forEach(json => console.log(json));
})

Performance Metrics Observer

Example with Largest ContentFul Paint (LCP)

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log('LCP candidate: '+entry.startTime);
  }
}).observe({type: 'largest-contentful-paint', buffered: true});

By entry types:

new PerformanceObserver(list => {
        list.getEntries().forEach(entry => {
            // Display each reported measurement on console
            console.log("Name: "       + entry.name      +
                        ", Type: "     + entry.entryType +
                        ", Start: "    + entry.startTime +
                        ", Duration: " + entry.duration  + "\n");
            });
}).observe({entryTypes: ['resource', 'mark', 'measure']});