perfanalytics-lib

Simple library that has no dependencies.

FCP: First Contentful Paint, or FCP, measures the time take to render the first element of a webpage.

TTFB: 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.

Dom Load: The first HTML document is fully loaded and parsed without waiting for style sheets, images, and subframes to finish loading.

Window Load: The entire page load, including all dependent resources such as style sheets and images.

The following API's are used:

• PerformanceObserver (observe)
• Performance (timing)
• Navigator.sendBeacon()

All of them has enough support to use. Besides, First Contentful Paint is measured using the PerformanceObserver (observe) API and is supported in Blink-based browsers, such as Chrome, Edge, Android, and Opera. Other browsers, including Chrome on iOS, Safari, and Firefox, cannot report FCP metrics.

Integration

npm install @cengizhanaydin/[email protected]

Add the following snippet to head tag of your web app:

<script src="https://unpkg.com/@cengizhanaydin/[email protected]/app/index.js"></script>
<script>
  init("YOUR END POINT FOR INFOS");
</script>

It will send the metrics info when you leave the app.