metrical-client-script

v0.7.0

Published

3 years ago

A performance metrics library for the modern web

0High
0Medium
0Low

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/[email protected]/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: string

Device Metrics ✅

    device_resolution: string
    device_memory: string
    device_concurrency: string

Network Metrics ✅

    network_downlink: number
    network_effective_type: string
    network_rtt: number
    network_save_data: boolean

Resource 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: number

Navigation 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: string

Paint Metrics ✅

    metric_fp: number
    metric_fcp: number

Document Metrics ✅

    document_script_count: number
    document_stylesheet_count: number
    document_blocking_resource_count: number
    document_dom_depth: number

Web Vitals Metrics ✅

    metric_cls: number
    metric_fid: number
    metric_lcp: number

Experimental

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: number

Contributing

There are a few scripts available.

npm run dev - This will build the script in development & watch mode
npm run build - This will build a modern esmodule bundle
npm run test - This will run headless cypress tests against Chrome in production mode