Page performance metrics

README.md

Page performance metrics

Calculate load performance of a webpage, for any page you visit.

No libraries needed - this uses performance timings that are builtin to modern JS in the browser.

Based on Navigation Timing API doc.

Usage

1. In your browser, open the Dev Tools or right-click and Inspect a page.
2. Copy the JS below.
3. Paste it into the JS console.

Your output will be something like:

{
  "pageLoadTime": 2.868,
  "connectTime": 0.634,
  "renderTime": 1.834
}

navigationTiming.js

function logPerformance() {
  const perfData = window.performance.timing;
  const ms = 1000;
  
  const pageLoadTime = (perfData.loadEventEnd - perfData.navigationStart) / ms;
  const connectTime = (perfData.responseEnd - perfData.requestStart) / ms;
  const renderTime = (perfData.domComplete - perfData.domLoading) / ms;

  const results = {
    pageLoadTime,
    connectTime,
    renderTime
  };
  
  console.log(JSON.stringify(results, null, 2))
}

logPerformance()