PerfAnalytics JS is part of PerfAnalytics ecosystem which collects and criticizes web performance data.
Collect performance metrics with new Navigation Timing Level 2.
Collect TTFB, FCP, Dom Load, and Window Load events and Document Network timings with PerformanceNavigationTiming API (as know as Navigation Timing v2)
Metrics are sent with Beacon API if exist otherwise send with fetch API.
Add this line under HTML body to serve analytics metric with perfanalytics API.
<script src="https://hasantezcan.github.io/PerfAnalytics-Js/src/index.js"></script>Script size = 2.3 KiB
After add, this line to your project you can watch metric results from perfanalytics Dashboard.
If you want to customize this script. You can set backend url which are you using on top of the src/index.js file.
const BASEURL = "https://perfanalytics-api-ht.herokuapp.com";This script sends a JSON object parsed as a text.
JSON structure:
{
"UserAgent": string,
"URL": string,
"TTFB": number,
"DomLoad": number,
"WindowLoad": number,
"FCP": number,
"Entries": [
{
"name": string,
"initiatorType": string,
"responseEnd": number,
"transferSize": number
}
]
}JSON example:
{
"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
}
]
}You can reach my dev logs about this project!
I use this commit message conventions standard in this project.