Recipe 15.1

Measuring Page Load Performance

Demo

Page Load Time:

The total time taken by the page load process.

Time to First Byte:

The time it took the browser to receive the first byte of the response.

Time to Interactive:

The time taken before the DOM became interactive.

Code

JavaScript

// There is only one navigation performance entry.
const [navigation] = window.performance.getEntriesByType('navigation');

document.querySelector('#load-time').textContent = 
  `${(navigation.loadEventEnd - navigation.startTime).toFixed(2)}ms`;

document.querySelector('#ttfb').textContent = 
  `${(navigation.responseStart - navigation.startTime).toFixed(2)}ms`;

document.querySelector('#interactive').textContent =
  `${(navigation.domInteractive - navigation.startTime).toFixed(2)}ms`;

HTML

<h3>Page Load Time: <span id="load-time"></span></h3>
<p>The total time taken by the page load process.</p>

<h3>Time to First Byte: <span id="ttfb"></span></h3>
<p>The time it took the browser to receive the first byte of the response.</p>

<h3>Time to Interactive: <span id="interactive"></span></h3>
<p>The time taken before the DOM became interactive.</p>