Browser - Page and User Performance API



The performance timeline 1) is an API to measure user or browser page load performance.


User script Perf

doWork(); // Some developer code

Page Load

Page load performance

<img src="/_media/lenna.png" width="200px"/>
window.addEventListener("load", function(){
        .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: "       +      +
                        ", Type: "     + entry.entryType +
                        ", Start: "    + entry.startTime +
                        ", Duration: " + entry.duration  + "\n");
}).observe({entryTypes: ['resource', 'mark', 'measure']});

Discover More
Largest ContentFul Paint (LCP)

is a web core vital metrics of page load that measures the time: from navigation to the time when the browser renders the largest image or text block visible within the viewport (ie above the fold)...
Page (Load|Speed) Metric - First Contentful Paint (FCP)

First Contentful Paint (FCP) : is a page load timing metrics that measures the time: from navigation to the time when the browser renders the first bit of content from the DOM (which may be text,...
Page Loading Key Moment
Web - Timeline of a page load (Page Speed|Page Latency)

Page load is the latency performance metrics that cumulates: TCP latency (ie how fast, the network will receive the HTTP request and send back the HTTP response ) HTTP latency (ie how fast the web...

Share this page:
Follow us:
Task Runner