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
})

or

<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