JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 798
  • Score
    100M100P100Q100912F
  • License MIT

⏱ Collect and measure browser performance metrics

Package Exports

  • page-timing

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (page-timing) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

page-timing

⏱ Collect and measure browser performance metrics

All metrics are converted to snake_case

import { paint } from 'page-timing';

window.addEventListener('load', () => {
    const results = paint();

    fetch('/send-metrics', {
      method: 'POST',
      body: JSON.stringify(results),
    });
});

API endpoints (TOC)

Name Type
connect_end number
connect_start number
decoded_body_size number
domain_lookup_end number
domain_lookup_start number
dom_complete number
dom_content_loaded_event_end number
dom_content_loaded_event_start number
dom_interactive number
dom_loading number
encoded_body_size number
fetch_start number
load_event_end number
load_event_start number
navigation_start number
redirect_end number
redirect_start number
request_start number
response_end number
response_start number
secure_connection_start number
transfer_size number
unload_event_end number
unload_event_start number

paint

Name Type Meaning
first_paint number User agent first rendered after navigation
first_contentful_paint number Document contains at least one element that is paintable and contentful†

† contentful element: A visible element which contains non empty text, media content or input.

assets

Name Type Meaning
asset_javascript_count number Total number of Javascript resources
asset_javascript_load number Loading time spent on Javascript resources
asset_javascript_size number Total size of Javascript resources
asset_stylesheets_count number Total number of CSS resources
asset_stylesheets_load number Loading time spent on CSS resources
asset_stylesheets_size number Total size of CSS resources
asset_images_count number Total number of image resources
asset_images_load number Loading time spent on image resources
asset_images_size number Total size of image resources
asset_other_count number Total number of other resources
asset_other_load number Loading time spent on other resources
asset_other_size number Total size of other resources

connection

Name Type Meaning
connection_type string bluetooth, cellular, ethernet, none, wifi, wimax, other, unknown
effective_bandwidth number Mbps
effective_connection_type string slow-2g, 2g, 3g, 4g
effective_max_bandwidth number Mbps
reduced_data_usage boolean Vendor's "Data Saver" feature enables
round_trip_time number Estimated effective round-trip in ms

memory

Name Type Meaning
js_heap_size_limit number Maximum bytes available for JS heap
total_js_heap_size number Total allocated bytes for JS heap
used_js_heap_size number Currently active bytes of JS heap

display

Name Type Meaning
screen_avail_height number Height of space available for content
screen_avail_width number Width of space available for content
window_inner_height number Height of the window's layout viewport
window_inner_width number Width of the window's layout viewport
screen_color_depth number Color depth of the screen
screen_pixel_depth number Bit depth of the screen
screen_orientation_type string landscape-primary, landscape-secondary, portrait-primary, portrait-secondary

dom

Name Type Meaning
dom_node_count number Total number of nodes under the document object
dom_nest_depth number Highest nesting depth of DOM element under the document
html_size number Character count of the HTML document

measure

Wrap a function and measure it's execution time in milliseconds into a performance measure entry.

import { measure } from 'page-timing';

async function myFunction(
    await wait(50);
    doSomethingElse();
}

await measure(myFunction, 'my-function');

// Example: Convert entries to a named array
Object.assign(
    ...performance.getEntriesByType('measure').map(
        ({ name, duration }) => ({[name]: duration})
    )
);
// {my-function: 53.35999990347773}

// Example: Retrieve a specific entry
const { duration } = performance.getEntriesByName('my-function');
// 53.35999990347773

Illustration of navigation events