0.7.0 • Published 1 year ago
metrical-client-script v0.7.0
Metrical Client
Metrical Client is a web performance monitoring library. It can be used to send RUM data to an analytics tool of your choice.
- Supports the latest and greatest Web Performance APIs
- Works across modern browsers
Getting Started
Load the library from UNPKG.
<!DOCTYPE html>
<html>
...
<script src="https://unpkg.com/metrical-client-script@0.7.0/dist/metrical-client.min.js"></script>
<script>
window.createMetricalClient({
apiKey: 'YOUR_API_KEY',
apiUrl: 'https://api.metrical-app.co.uk/collect',
});
</script>
</html>Supported Metrics
Metadata ✅
path: string
sw_enabled: boolean
browser_type: string
browser_version: stringDevice Metrics ✅
device_resolution: string
device_memory: string
device_concurrency: stringNetwork Metrics ✅
network_downlink: number
network_effective_type: string
network_rtt: number
network_save_data: booleanResource Metrics ✅
resource_protocol: string
resource_type: string
resource_url: string
resource_duration: number
resource_encoded_size: number
resource_transfer_size: number
resource_redirect_time: number
resource_dns_lookup: number
resource_tcp_handshake: number
resource_response_time: numberNavigation Metrics ✅
navigation_page_load: number
navigation_transfer_size: number
navigation_encoded_body_size: number
navigation_dom_interactive: number
navigation_dns_lookup_time: number
navigation_compression_ratio: number
navigation_page_render: number
navigation_connect_time: number
navigation_ttfb: number
navigation_type: stringPaint Metrics ✅
metric_fp: number
metric_fcp: numberDocument Metrics ✅
document_script_count: number
document_stylesheet_count: number
document_blocking_resource_count: number
document_dom_depth: numberWeb Vitals Metrics ✅
metric_cls: number
metric_fid: number
metric_lcp: numberExperimental
These are under the experimental section due to lack of browser support. In other words, they don't work consistently in Firefox or Safari.
event_target: string
event_name: string
event_interactionId: number
event_duration: number
event_delay: number
event_handler_time: number
long_task_name: string
long_task_duration: number
long_task_start: numberContributing
There are a few scripts available.
npm run dev- This will build the script in development & watch modenpm run build- This will build a modern esmodule bundlenpm run test- This will run headless cypress tests against Chrome in production mode