Unlock Browser Speed: Measure Page Load Times with HTML5 Performance Timing API

The HTML5 Performance Timing API records timestamps for each step from unloading the current page to the complete loading of the target page, allowing developers to calculate detailed performance metrics.

Key timing calculations

Preparation of new page: timing.fetchStart - timing.navigationStart Redirect duration: timing.redirectEnd - timing.redirectStart AppCache duration: timing.domainLookupStart - timing.fetchStart Unload of previous page: timing.unloadEventEnd - timing.unloadEventStart DNS lookup time: timing.domainLookupEnd - timing.domainLookupStart TCP connection time: timing.connectEnd - timing.connectStart Request time: timing.responseEnd - timing.requestStart Time from request completion to DOM interactive: timing.domInteractive - timing.responseEnd DOM parsing time: timing.domComplete - timing.domInteractive Load event time: timing.loadEventEnd - timing.loadEventStart Total time from navigation start to load: timing.loadEventEnd - timing.navigationStart A useful JavaScript implementation that computes these values is available on GitHub at https://github.com/CraryPrimitiveMan/performance-tool.