@yigitysl/perfanalyticsjs NPM

PerfAnalyticsJS

PerfAnalyticsJS is a client-side library, which collects some performance related key metrics from browser and sends to the PerfAnalyticsAPI

Acceptance Criterias

It does not harm clients performance
It should measure TTFB, FCP, Dom Load, and Window Load events
It should measure Network timings for Document, Image, Font, JS, and CSS
It should work on all modern browsers Except Microsoft Products
It should send performance metrics to API in a proper way.
It should be generic and can be used in any web application (big plus)
It should smaller than 3KB Gzip (big plus)

Installation

npm install @yigitysl/perfanalyticsjs

How to use

PerfAnalyticsJS is designed to be used in the browser. Import and construct, will send perforamance analyticts to PerfAnalyticsAPI. You can enable debug.

import PerfAnalytics from '@yigitysl/perfanalyticsjs'

const perfAnalytics = new PerfAnalytics({
  perfAnalyticsId: 'xxxxxxxxxxxx'
  // debug: true
})

<script async src="https://yy-perf-analytics-dashboard.herokuapp.com/PerfAnalytics.js"/>

window.PerfAnalyticsJS({
   perfAnalyticsId: 'xxxxxxxxxxxx',
 //  debug: true
})

Summary

2.7K Gzipped PerfAnalytics.js.gz
Developed with typescript, exports its type definitions
CI & CD with github workflows
Npm library published https://www.npmjs.com/package/@yigitysl/perfanalyticsjs
using eslint with eslint-compat-plugin and browserslist to avoid browser support issues
Generates API types with swagger script from API docs
Send data using sendBeacon when possible, see https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon