Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hasantezcan/perfanalytics-js
PerfAnalytics JS is collect performance metrics with Performance Navigation Timing API and send them to the PerfAnalytics API
https://github.com/hasantezcan/perfanalytics-js
analytics javascript metrics performace
Last synced: 22 days ago
JSON representation
PerfAnalytics JS is collect performance metrics with Performance Navigation Timing API and send them to the PerfAnalytics API
- Host: GitHub
- URL: https://github.com/hasantezcan/perfanalytics-js
- Owner: hasantezcan
- License: mit
- Created: 2021-07-18T11:02:02.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2021-07-25T10:53:11.000Z (over 3 years ago)
- Last Synced: 2024-10-24T21:59:35.932Z (2 months ago)
- Topics: analytics, javascript, metrics, performace
- Language: JavaScript
- Homepage: https://hasantezcan.github.io/PerfAnalytics-Js/src/index.js
- Size: 1.08 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# PerfAnalytics JS
**PerfAnalytics JS** is part of PerfAnalytics ecosystem which collects and criticizes web performance data.
## How it works
Collect performance metrics with new [Navigation Timing Level 2](https://w3c.github.io/navigation-timing/).
**Collect** *`TTFB`*, *`FCP`*, *`Dom Load`*, and *`Window Load`* events and *`Document Network timings`* with [PerformanceNavigationTiming API `(as know as Navigation Timing v2)`](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigationTiming)
Metrics are sent with [Beacon API](https://developer.mozilla.org/en-US/docs/Web/API/Beacon_API) if exist otherwise send with [fetch API.](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
> - [Navigator.sendBeacon()](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon)
## Installation
Add this line under **HTML body** to serve analytics metric with perfanalytics API.
```html
```
> Script size = **2.3 KiB**
After add, this line to your project you can watch metric results from [perfanalytics Dashboard.](https://hasantezcan.github.io/PerfAnalytics-Dashboard/)
## For custom usage
If you want to customize this script. You can set backend url which are you using on top of the `src/index.js` file.
```bash
const BASEURL = "https://perfanalytics-api-ht.herokuapp.com";
```
This script sends a JSON object parsed as a text.
**JSON structure:**
```js
{
"UserAgent": string,
"URL": string,
"TTFB": number,
"DomLoad": number,
"WindowLoad": number,
"FCP": number,
"Entries": [
{
"name": string,
"initiatorType": string,
"responseEnd": number,
"transferSize": number
}
]
}
```
**JSON example:**
```json
{
"UserAgent": "Mozilla/5.0 (X11; Linux x86_64; rv:88.0) Gecko/20100101 Firefox/88.0",
"URL": "http://127.0.0.1:5502/.Test%20sites/index.html",
"TTFB": 0.002,
"DomLoad": 1.141,
"WindowLoad": 1.141,
"FCP": 0.589,
"Entries": [
{
"name": "http://127.0.0.1:5502/.Test%20sites/style.css",
"initiatorType": "other",
"responseEnd": 0.88,
"transferSize": 0
}
]
}
```
## Dev Logs
You can reach my [**`dev logs`**](DEVLOGS.md) about this project!
## Commit message convention
I use [this](https://www.conventionalcommits.org) commit message conventions standard in this project.
> https://www.conventionalcommits.org
## License
[MIT](/LICENSE)