perf-analytics-tool

Install

npm install performance-metrics-analyser

Performance analytic tools is a library to measure / calculate

• FCP (First Contentful Paint)
• TTFB (Time to First Byte),
• DOM_LOAD
• WINDOW_LOAD
• RESOURCES

FCP (First Contentful Paint)

The First Contentful Paint (FCP) metric measures the time from when the page starts loading to when any part of the page's content is rendered on the screen

const getFCP = () => {
    const contentPaint = performance
        .getEntries()
        .find(entry => entry.name === 'first-contentful-paint');

    return contentPaint ? contentPaint.startTime : 0;
}

TTFB(Time to First Byte)

Time to first byte (TTFB) is a metric for determining the responsiveness of a web server. It measures the amount of time between creating a connection to the server and downloading the contents of a web page.

const getTTFB = (timing) => timing.responseStart - timing.requestStart

DOM LOAD

Dom Load Time represents the time from page initialization to the DomContentLoaded event or, for older Internet Explorer browsers, to the time the DOM is "interactive".

const getDomLoad = (timing) => Math.round(timing.domContentLoadedEventEnd - timing.navigationStart)

WINDOW LOAD

The load event is fired when the whole page has loaded, including all dependent resources such as stylesheets and images. This is in contrast to DOMContentLoaded , which is fired as soon as the page DOM has been loaded, without waiting for resources to finish loading.

const getWindowLoad = (timing) => Math.round(timing.loadEventStart - timing.navigationStart);

RESOURCE LOAD

The Resource load measures the metrics of static files uploaded in/by web page .

const getResourceLoad = () => {
    const resourceLoad = performance
        .getEntriesByType('resource')
        .reduce((acc, resource) => acc + (resource.responseEnd - resource.startTime), 0);

    return Math.round(resourceLoad);
};

PERFORMANCE ANALYSER

Performance Analyser accept and endpoint which represents url to store calculated metrics of the web page. it's triggered by window:onLoad event and consumes the dynamic endpoint which is defined by it's own initialization with calculated metrics .

const performanceAnalyser = (endpoint) => ({
    analyse() {
        window.onload = () => {
            const {performance: {timing}} = window
            const values = {
                resource_load: getResourceLoad(),
                files: getFiles(),
                fcp: getFCP(),
                ttfb: getTTFB(timing),
                dom_load: getDomLoad(timing),
                window_load: getWindowLoad(timing),
                domain: window.location.hostname
            }
            sendData(endpoint, values).then(response => response);
        };
    }
});