☰

Page Load Time

Display the page load time using the Level 2 Navigation Timing API.

  1.   // ==UserScript==
  2.   // @name        Page Load Time
  3.   // @match       *://*/*
  4.   // @grant       none
  5.   // @version     1.0.0
  6.   // @author      NoUser
  7.   // @description Display the page load time using the Level 2 Navigation Timing API.
  8.   // @namespace   https://greasyfork.org/users/1016720
  9.   // @homepage    https://greasyfork.org/en/scripts/493805-page-load-time
  10.   // @license     MIT
  11.   // ==/UserScript==
  12.  
  13. // https://w3c.github.io/navigation-timing/
  14. //
  15. // Note:
  16. // Initial loads show results which are longer than what the browser's console shows
  17. // Subsequent loads are consistent with what the browser's console shows
  18.  
  19. (function() {
  20.     'use strict';
  21.     window.addEventListener('load', function() {
  22.         setTimeout(() => {
  23.             const [navigationTiming] = performance.getEntriesByType('navigation');
  24.  
  25.             if (navigationTiming) {
  26.                 const loadTime = navigationTiming.loadEventEnd - navigationTiming.startTime;
  27.                 let loadTimeText;
  28.  
  29.                 // Check if load time is less than 1 second
  30.                 if (loadTime < 1000) {
  31.                     // Display in milliseconds
  32.                     loadTimeText = loadTime.toFixed(0) + 'ms';
  33.                 } else {
  34.                     // Display in seconds
  35.                     loadTimeText = (loadTime / 1000).toFixed(2) + 's';
  36.                 }
  37.  
  38.                 const loadTimeDiv = document.createElement('div');
  39.                 loadTimeDiv.textContent = 'Page Load Time: ' + loadTimeText;
  40.                 Object.assign(loadTimeDiv.style, {
  41.                     position: 'fixed',
  42.                     bottom: '0px',
  43.                     left: '50%',
  44.                     transform: 'translateX(-50%)',
  45.                     backgroundColor: 'rgba(0,0,0,0.5)',
  46.                     color: 'white',
  47.                     padding: '5px 10px',
  48.                     fontSize: '14px',
  49.                     zIndex: '10000',
  50.                     borderRadius: '4px',
  51.                     boxShadow: '0 2px 4px rgba(0,0,0,0.3)'
  52.                 });
  53.                 document.body.appendChild(loadTimeDiv);
  54.             } else {
  55.                 console.warn('Level 2 Navigation Timing API may not be supported in this browser.');
  56.             }
  57.         }, 10);
  58.     });
  59. })();