Languages
[Edit]
EN

JavaScript - how to measure website load / speed time?

2 points
Created by:
Root-ssh
115700

Solution 1 

window.performance.getEntriesByType("navigation")

Example output:

PerformanceNavigationTiming
connectEnd: 229.59999999403954
connectStart: 229.59999999403954
decodedBodySize: 136266
domComplete: 1087.8999999761581
domContentLoadedEventEnd: 1048.5999999940395
domContentLoadedEventStart: 1047.8999999761581
domInteractive: 1047.699999988079
domainLookupEnd: 229.59999999403954
domainLookupStart: 229.59999999403954
duration: 1089.199999988079
encodedBodySize: 27486
entryType: "navigation"
fetchStart: 229.59999999403954
initiatorType: "navigation"
loadEventEnd: 1089.199999988079
loadEventStart: 1087.8999999761581
name: "https://dirask.com/posts/Node-js-PostgreSQL-Select-last-row-1AqP01"
nextHopProtocol: "h2"
redirectCount: 2
redirectEnd: 229.59999999403954
redirectStart: 3.5
requestStart: 232.39999997615814
responseEnd: 343.59999999403954
responseStart: 325.5
secureConnectionStart: 229.59999999403954
serverTiming: [PerformanceServerTiming]
startTime: 0
transferSize: 28777
type: "navigate"
unloadEventEnd: 332.19999998807907
unloadEventStart: 332
workerStart: 0

 

Measure all resources loaded on the webpage

window.performance.getEntries()

Example output:

0: PerformanceNavigationTiming {unloadEventStart: 332, unloadEventEnd: 332.19999998807907, domInteractive: 1047.699999988079, domContentLoadedEventStart: 1047.8999999761581, domContentLoadedEventEnd: 1048.5999999940395, …}
1: PerformanceResourceTiming {initiatorType: "link", nextHopProtocol: "h2", workerStart: 0, redirectStart: 0, redirectEnd: 0, …}
2: PerformanceResourceTiming {initiatorType: "script", nextHopProtocol: "h2", workerStart: 0, redirectStart: 0, redirectEnd: 0, …}
3: PerformanceResourceTiming {initiatorType: "img", nextHopProtocol: "h2", workerStart: 0, redirectStart: 0, redirectEnd: 0, …}
4: PerformanceResourceTiming {initiatorType: "img", nextHopProtocol: "h2", workerStart: 0, redirectStart: 0, redirectEnd: 0, …}
5: PerformanceResourceTiming {initiatorType: "script", nextHopProtocol: "h2", workerStart: 0, redirectStart: 0, redirectEnd: 0, …}
6: PerformancePaintTiming {name: "first-paint", entryType: "paint", startTime: 648.5999999940395, duration: 0}
7: PerformancePaintTiming {name: "first-contentful-paint", entryType: "paint", startTime: 648.5999999940395, duration: 0}
8: PerformanceResourceTiming {initiatorType: "img", nextHopProtocol: "h2", workerStart: 0, redirectStart: 0, redirectEnd: 0, …}
9: PerformanceResourceTiming {initiatorType: "img", nextHopProtocol: "h2", workerStart: 0, redirectStart: 0, redirectEnd: 0, …}
10: PerformanceResourceTiming {initiatorType: "xmlhttprequest", nextHopProtocol: "h2", workerStart: 0, redirectStart: 0, redirectEnd: 0, …}
11: PerformanceResourceTiming {initiatorType: "xmlhttprequest", nextHopProtocol: "h2", workerStart: 0, redirectStart: 0, redirectEnd: 0, …}
12: PerformanceResourceTiming {initiatorType: "xmlhttprequest", nextHopProtocol: "h2", workerStart: 0, redirectStart: 0, redirectEnd: 0, …}
13: PerformanceResourceTiming {initiatorType: "xmlhttprequest", nextHopProtocol: "h2", workerStart: 0, redirectStart: 0, redirectEnd: 0, …}
14: PerformanceResourceTiming {initiatorType: "img", nextHopProtocol: "h2", workerStart: 0, redirectStart: 0, redirectEnd: 0, …}
15: PerformanceResourceTiming {initiatorType: "img", nextHopProtocol: "h2", workerStart: 0, redirectStart: 0, redirectEnd: 0, …}
16: PerformanceResourceTiming {initiatorType: "img", nextHopProtocol: "h2", workerStart: 0, redirectStart: 0, redirectEnd: 0, …}
17: PerformanceResourceTiming {initiatorType: "img", nextHopProtocol: "h2", workerStart: 0, redirectStart: 0, redirectEnd: 0, …}
18: PerformanceEventTiming {processingStart: 1342.3999999761581, processingEnd: 1344.199999988079, cancelable: true, target: body, name: "keydown", …}
length: 19

 

Solution 3

window.performance

Example output:

eventCounts: EventCounts
size: 36
__proto__: EventCounts
memory: MemoryInfo
jsHeapSizeLimit: 4294705152
totalJSHeapSize: 21881456
usedJSHeapSize: 16685568
__proto__: MemoryInfo
navigation: PerformanceNavigation
redirectCount: 2
type: 0
__proto__: PerformanceNavigation
onresourcetimingbufferfull: null
timeOrigin: 1624304452160.4
timing: PerformanceTiming
connectEnd: 1624304452389
connectStart: 1624304452389
domComplete: 1624304453248
domContentLoadedEventEnd: 1624304453208
domContentLoadedEventStart: 1624304453208
domInteractive: 1624304453208
domLoading: 1624304452501
domainLookupEnd: 1624304452389
domainLookupStart: 1624304452389
fetchStart: 1624304452389
loadEventEnd: 1624304453249
loadEventStart: 1624304453248
navigationStart: 1624304452160
redirectEnd: 1624304452389
redirectStart: 1624304452163
requestStart: 1624304452392
responseEnd: 1624304452503
responseStart: 1624304452485
secureConnectionStart: 0
unloadEventEnd: 1624304452492
unloadEventStart: 1624304452492
__proto__: PerformanceTiming
__proto__: Performance

 

Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join