JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 803
  • Score
    100M100P100Q101099F
  • 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 { navigation, paint } from 'page-timing';

window.addEventListener(
    'load',
    () => {
        const metrics = {
            ...paint(),
            ...navigation()
        };

        fetch('/browser-performance-metrics', {
          method: 'POST',
          body: JSON.stringify({
            page_name: 'my page',
            metrics
          }),
        });
    }
);

API endpoints

Metrics

Group Name Type Meaning
navigation navigation_start number Termination of previous document upon navigating
navigation unload_event_start number Previous document unload
navigation unload_event_end number
navigation redirect_start number Redirect from previous document
navigation redirect_end number
navigation fetch_start number Ready to fetch the document
navigation domain_lookup_start number
navigation domain_lookup_end number
navigation connect_start number Sent request to open a connection
navigation connect_end number
navigation secure_connection_start number Secure connection handshake
navigation request_start number Request the document
navigation response_start number Received the first byte of the response
navigation response_end number Received the last byte of the response
navigation dom_loading number Parser started work
navigation dom_interactive number Parser finished work on main document. Changed document readyState to "interactive"
navigation dom_content_loaded_event_start number Executed required scripts after parsing the document
navigation dom_content_loaded_event_end number
navigation dom_complete number Changed document readyState to "complete"
navigation load_event_start number Document fires "load" event
navigation load_event_end number
navigation transfer_size number Size (octets) of response headers and payload body
navigation encoded_body_size number Size (octets) of payload body
navigation decoded_body_size number Size (octets) of message body
paint first_paint number User agent first rendered after navigation
paint first_contentful_paint number Document contains at least one element that is paintable and contentful†
assets final_asset_javascript_count number Total number of Javascript resources
assets final_asset_javascript_load number Loading time spent on Javascript resources
assets final_asset_javascript_size number Total size of Javascript resources
assets final_asset_stylesheets_count number Total number of CSS resources
assets final_asset_stylesheets_load number Loading time spent on CSS resources
assets final_asset_stylesheets_size number Total size of CSS resources
assets final_asset_images_count number Total number of image resources
assets final_asset_images_load number Loading time spent on image resources
assets final_asset_images_size number Total size of image resources
assets final_asset_other_count number Total number of other resources
assets final_asset_other_load number Loading time spent on other resources
assets final_asset_other_size number Total size of other resources
connection connection_type string bluetooth, cellular, ethernet, none, wifi, wimax, other, unknown
connection effective_bandwidth number Mbps
connection effective_connection_type string slow-2g, 2g, 3g, 4g
connection effective_max_bandwidth number Mbps
connection reduced_data_usage boolean Vendor's "Data Saver" feature enables
connection round_trip_time number Estimated effective round-trip in ms
memory js_heap_size_limit number Maximum bytes available for JS heap
memory total_js_heap_size number Total allocated bytes for JS heap
memory used_js_heap_size number Currently active bytes of JS heap
display window_inner_height number Height of the window's layout viewport
display window_inner_width number Width of the window's layout viewport
display screen_color_depth number Color depth of the screen
display screen_pixel_depth number Bit depth of the screen
display screen_orientation_type string landscape-primary, landscape-secondary, portrait-primary, portrait-secondary
dom final_dom_node_count number Total number of nodes under the document object
dom final_dom_nest_depth number Highest nesting depth of DOM element under the document
dom final_html_size number Character count of the HTML document

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

More functions

fps

Measure page frame rate at a certain point in time

import { fps } from 'page-timing';

const frames_per_second = await fps();
console.log({ frames_per_second });

Increase sample rate by checking more than one second. (Result is still in frames per second)

const frames_per_second = await fps({ sample: 5 });
console.log({ frames_per_second });

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

Bonus

Also send web vitals, a simple example

import { all } from 'page-timing';
import { getLCP, getFID, getCLS } from 'web-vitals';

window.addEventListener(
    'load',
    () => {
        // Send metrics from browser performance API
        fetch('/browser-performance-metrics', {
          method: 'POST',
          body: JSON.stringify({
            page_name: 'my page',
            metrics: all()
          }),
        });

        // Send web vitals to the same endpoint
        [
            [getLCP, 'largest_contentful_paint'],
            [getFID, 'first_input_delay'],
            [getCLS, 'comulative_layout_shift'],
        ].forEach(
            ([ fn, name ]) => fn(
                ({ value }) => fetch('/browser-performance-metrics', {
                  method: 'POST',
                  body: JSON.stringify({
                    page_name: 'my page',
                    metrics: { [name]: value }
                  }),
                })
            )
        );
    }
);