Example of utilizing the resource entry type from Performance Api

resource-monitoring.js

function calculateResourceMetrics() {
    let resources = window.performance.getEntriesByType('resource');
    // Iterate through each resource
    resources.forEach(function(resource) {
        let transferedOverNetworkSize = `${resource.transferSize/1000}kb`;
        let dnsLookupTime = `${resource.domainLookupEnd - resource.domainLookupStart}ms`;
        let tcpHandshakeTime = `${resource.connectEnd - resource.connectStart}ms`;
        let sslHandshakeTime = 0;
        if (resource.secureConnectionStart > 0) {
            sslHandshakeTime = resource.connectEnd - resource.secureConnectionStart;
        }
        sslHandshakeTime = `${sslHandshakeTime}ms`
        let ttfb = `${resource.responseStart - resource.requestStart}ms`;
        let totalDuration = `${resource.duration}ms (including resource scheduling time by the browser)`;
        console.log({
            deliveryType: resource.deliveryType,
            renderBlockingStatus: resource.renderBlockingStatus,
            resourceName: resource.name,
            transferedOverNetworkSize,
            tcpHandshakeTime,
            sslHandshakeTime,
            dnsLookupTime,
            ttfb,
            totalDuration
        });
    });
}

window.addEventListener('load', function() {
    calculateResourceMetrics();
});