Uxm

uxm

User Experience Metric

User Experience Metric aka uxm a tiny (1kb gzip) utility library for collecting web performance metrics that affect user experience. Graceful support of latest browser APIs like Performance Paint Timing, Network Information, or Device Memory, User Timing API and experimental Long Tasks support for interactivity metrics.

Get it: npm install uxm

Sample usage:

1
2
3
4
5
6
7
8
9
10
11
12
13

import { uxm } from 'uxm'

uxm().then(metrics => {
  console.log(metrics) // ->
  {
    "deviceType": "desktop",
    "effectiveConnectionType": "4g",
    "firstPaint": 1646,
    "firstContentfulPaint": 1646,
    "domContentLoaded": 1698,
    "onLoad": 2508
  }
})

1
2
3
4
5
6
7

import { getUrl, getFirstContentfulPaint, getDomContentLoaded } from 'uxm'

const metrics = {
  url: getUrl(),
  fcp: getFirstContentfulPaint(),
  dcl: getDomContentLoaded()
}

1
2
3
4
5
6
7

import { getDeviceType, getDeviceMemory, getEffectiveConnectionType } from 'uxm'

const device = {
  type: getDeviceType(),
  memory: getDeviceMemory(),
  connection: getEffectiveConnectionType()
}

GIF FTW!

umx

Suggest a module

Comments