Methods

string

The name of the metric. This value will always be "TTFB".

number

The time to first byte in milliseconds.

number

The change in time between navigation events. This value applies to client-side routing and will always be 0 for sever-side rendered websites.

PerformanceNavigationTiming[]

The Performance Navigation Timing records used to determine this metric.

entries[0].

name

string

The documents address (URL).

entries[0].

type

number

The navigation type.

navigateA typical navigation.
reloadA page reload.
back_forwardA back/forward navigation.
prerenderA pre-render navigation.

entries[0].

entryType

string

This value will always be "navigation".

entries[0].

startTime

number

This value will always be "0".

entries[0].

duration

number

The difference between the "loadEventEnd" and "startTime" properties in milliseconds.

entries[0].

initiatorType

number

This value will always be "navigation".

entries[0].

nextHopProtocol

string

The negotiated protocol.

entries[0].

workerStart

number

The service worker start time.

entries[0].

redirectStart

number

The start time of the fetch that initiates the redirect.

entries[0].

redirectEnd

number

The end time of the fetch that initiates the redirect.

entries[0].

fetchStart

number

The time immediately before the browser starts to fetch the page.

entries[0].

domainLookupStart

number

The time immediately before the browser starts the domain name lookup.

entries[0].

domainLookupEnd

number

The time immediately after the browser finishes the domain name lookup.

entries[0].

connectStart

number

The time immediately before the user agent starts establishing the connection to the server to retrieve the resource.

entries[0].

connectEnd

number

The time immediately after the browser finishes establishing the connection to the server to retrieve the resource. The timestamp value includes the time interval to establish the transport connection, as well as other time intervals such as SSL handshake and SOCKS authentication.

entries[0].

secureConnectionStart

number

The time immediately before the browser starts the handshake process to secure the current connection. If a secure connection is not used, the property returns zero.

entries[0].

requestStart

number

The time immediately before the user agent starts requesting the resource from the server, or from relevant application caches or from local resources.

entries[0].

responseStart

number

The time immediately after the user agent's HTTP parser receives the first byte of the response from relevant application caches, or from local resources or from the server.

entries[0].

responseEnd

number

The time immediately after the browser receives the last byte of the resource or immediately before the transport connection is closed, whichever comes first.

entries[0].

transferSize

number

entries[0].

encodedBodySize

number

The size in bytes received from the fetch (HTTP or cache), of the payload body, before removing any applied content-codings.

entries[0].

decodedBodySize

number

The size (in bytes) received from the fetch (HTTP or cache) of the message body, after removing any applied content-codings. If the resource is retrieved from an application cache or local resources, it returns the size of the payload after removing any applied content-codings.

entries[0].

serverTiming

PerformanceServerTiming[]

The size (in bytes) of the fetched resource. The size includes the response header fields plus the response payload body.

entries[0].

unloadEventStart

number

The previous document's unload event start time.

If the previous document and the current document have the same origin, this timestamp is measured immediately before the user agent starts the unload event of the previous document. If there is no previous document or the previous document has a different origin than the current document, this attribute will return zero.

entries[0].

unloadEventEnd

number

The previous document's unload event end time.

If the previous document and the current document have the same origin, this timestamp is measured immediately before the user agent starts the unload event of the previous document. If there is no previous document or the previous document has a different origin than the current document, this attribute will return zero.

entries[0].

domInteractive

number

The time immediately before the user agent sets the current document readiness of the current document to interactive.

entries[0].

domContentLoadedEventStart

number

The time immediately after the current document's DOMContentLoaded event completes.

entries[0].

domContentLoadedEventEnd

number

The time immediately before the user agent fires the DOMContentLoaded event at the current document.

entries[0].

domComplete

number

A time value equal to the time immediately before the browser sets the current document readiness of the current document to complete.

entries[0].

loadEventStart

number

The time immediately before the load event of the current document is fired.

entries[0].

loadEventEnd

number

The time when the load event of the current document is completed.

entries[0].

redirectCount

number

A number representing the number of redirects since the last non-redirect navigation under the current browsing context. If there was no redirect, or if the redirect was from another origin, and that origin does not permit it's timing information to be exposed to the current origin then the value will be 0.

Get Time to First Byte

edgemesh.metrics.getTTFB()

Example Return

{
  name: "TTFB",
  value: 87,
  delta: 0,
  entries: [{
    name: "https://example.com/",
    entryType: "navigation",
    startTime: 0,
    duration: 2350.7999999523163,
    initiatorType: "navigation",
    nextHopProtocol: "h2",
    workerStart: 0,
    redirectStart: 0,
    redirectEnd: 0,
    fetchStart: 7.400000095367432,
    domainLookupStart: 7.400000095367432,
    domainLookupEnd: 7.400000095367432,
    connectStart: 7.400000095367432,
    connectEnd: 7.400000095367432,
    secureConnectionStart: 7.400000095367432,
    requestStart: 25,
    responseStart: 87.10000014305115,
    responseEnd: 90.40000009536743,
    transferSize: 8993,
    encodedBodySize: 8693,
    decodedBodySize: 32501,
    serverTiming: [
      {
        name: "ems-cache-hit",
        duration: 0,
        description: "Cache Hit"
      },
      {
        name: "ems-parse-url",
        duration: 0,
        description: "Parse URL"
      },
      {
        name: "ems-get-config",
        duration: 0,
        description: "Get Config"
      },
      {
        name: "ems-cache-lookup",
        duration: 11,
        description: "Cache Lookup"
      }
    ],
    unloadEventStart: 102.20000004768372,
    unloadEventEnd: 102.20000004768372,
    domInteractive: 663.4000000953674,
    domContentLoadedEventStart: 663.4000000953674,
    domContentLoadedEventEnd: 673.4000000953674,
    domComplete: 2347.7999999523163,
    loadEventStart: 2347.9000000953674,
    loadEventEnd: 2350.7999999523163,
    type: "reload",
    redirectCount: 0
  }]
}

Cumulative Layout Shift (CLS) is an important, user-centric metric for measuring visual stability because it helps quantify how often users experience unexpected layout shifts—a low CLS helps ensure that the page is delightful.

CLS is a measure of the largest burst of layout shift scores for every unexpected layout shift that occurs during the entire lifespan of a page. A layout shift occurs any time a visible element changes its position from one rendered frame to the next.

More about Cumulative Layout Shift can be found here.

Signature

public getCLS (): IMetric

Returns

string

The name of the metric. This value will always be "CLS".

number

The aggregated CLS score. A good CLS score is below 0.1.

number

The change in score between navigation events. This value applies to client side routing and will always be 0 for sever-side rendered websites.

LayoutShift[]

The Layout Shift entries that were used to calculate this metric.

Get Cumulative Layout Shift

edgemesh.metrics.getCLS()

Example Return

{
  name: "CLS",
  value: 0.014961858712264948,
  delta: 0,
  entries: [{
    name: "",
    entryType: "layout-shift",
    startTime: 3268.5,
    duration: 0,
    value: 0.0008666364169288759,
    hadRecentInput: false,
    lastInputTime: 1993.4000000953674,
    sources: [
      {
        previousRect: {
          x: 1890,
          y: 1936,
          width: 32,
          height: 32,
          top: 1936,
          right: 1922,
          bottom: 1968,
          left: 1890
        },
        currentRect: {
          x: 1722,
          y: 1776,
          width: 200,
          height: 192,
          top: 1776,
          right: 1922,
          bottom: 1968,
          left: 1722
        }
      }
    ]
  }, {
    name: "",
    entryType: "layout-shift",
    startTime: 3465.4000000953674,
    duration: 0,
    value: 0.014095222295336073,
    hadRecentInput: false,
    lastInputTime: 1993.4000000953674,
    sources: [
      {
        previousRect: {
          x: 1722,
          y: 1776,
          width: 200,
          height: 192,
          top: 1776,
          right: 1922,
          bottom: 1968,
          left: 1722
        },
        currentRect: {
          x: 1370,
          y: 1428,
          width: 552,
          height: 540,
          top: 1428,
          right: 1922,
          bottom: 1968,
          left: 1370
        }
      }
    ]
  }]
}

First Contentful Paint (FCP) is an important, user-centric metric for measuring perceived load speed because it marks the first point in the page load timeline where the user can see anything on the screen—a fast FCP helps reassure the user that something is happening.

The FCP metric measures the time from when the page starts loading to when any part of the page's content is rendered on the screen. For this metric, "content" refers to text, images (including background images), <svg> elements, or non-white <canvas> elements. To provide a good user experience, sites should strive to have a First Contentful Paint of 1.8 seconds or less.

More about First Contentful Paint can be found here.

Signature

public getFCP (): IMetric

Returns

string

The name of the metric. This value will always be "FCP".

number

The FCP time in milliseconds.

number

The change in time between navigation events. This value applies to client-side routing and will always be 0 for sever-side rendered websites.

PerformancePaintTiming[]

The Performance Paint Timing entries that were used to calculate this metric.

Get First Contentful Paint

edgemesh.metrics.getFCP()

Example Return

{
  name: "FCP",
  value: 997.3000001907349,
  delta: 0,
  entries: [{
    name: "first-contentful-paint",
    entryType: "paint",
    startTime: 997.3000001907349,
    duration: 0
  }]
}

First Input Delay (FID) is an important, user-centric metric for measuring load responsiveness because it quantifies the experience users feel when trying to interact with unresponsive pages. A low FID helps ensure that the page is usable.

FID measures the time from when a user first interacts with a page (i.e. when they click a link, tap on a button, or use a custom, JavaScript-powered control) to the time when the browser can begin processing event handlers in response to that interaction. To provide a good user experience, sites should strive to have a First Input Delay of 100 milliseconds or less.

More about First Input Delay can be found here.

Signature

public getFID (): IMetric

Returns

string

The name of the metric. This value will always be "FID".

number

The FID time in milliseconds.

number

The change in time between navigation events. This value applies to client-side routing and will always be 0 for sever-side rendered websites.

PerformanceEventTiming[]

The Performance Event Timing entries that were used to calculate this metric.

Get First Input Delay

edgemesh.metrics.getFID()

Example Return

{
  name: "FID",
  value: 6.3999998569488525,
  delta: 0,
  entries: [{
    name: "keydown",
    entryType: "first-input",
    startTime: 1038.6000001430511,
    duration: 16,
    processingStart: 1045,
    processingEnd: 1045.1000001430511,
    cancelable: true,
    target: body
  }]
}

Largest Contentful Paint (LCP) is an important, user-centric metric for measuring perceived load speed because it marks the point in the page load timeline when the page's main content has likely loaded—a fast LCP helps reassure the user that the page is useful.

The Largest Contentful Paint (LCP) metric reports the render time of the largest image or text block visible within the viewport, relative to when the page first started loading. To provide a good user experience, sites should strive to have a largest contentful Paint of 2.5 seconds or less.

More about Largest Contentful Paint can be found here.

Signature

public getLCP (): IMetric

Returns

string

The name of the metric. This value will always be "LCP".

number

The LCP time in milliseconds.

number

The change in time between navigation events. This value applies to client-side routing and will always be 0 for sever-side rendered websites.

LargestContentfulPaint[]

The Largest Contentful Paint entries that were used to calculate this metric.

Get Largest Contentful Paint

edgemesh.metrics.getLCP()

Example Return

{
  name: "LCP",
  value: 997.4,
  delta: 0,
  entries: [{
    name: "",
    element img.banner#hero,
    entryType: "largest-contentful-paint",
    startTime: 997.4,
    duration: 0,
    size: 119957,
    renderTime: 997.4,
    loadTime: 0,
    id: "hero",
    url: "https://example.com/image.png"
  }]
}

Total Blocking Time (TBT) is an important metric for measuring load responsiveness because it helps quantify the severity of how non-interactive a page is before it becomes reliably interactive. A low TBT helps ensure that the page is usable.

The TBT metric measures the total amount of time between First Contentful Paint (FCP) and Time to Interactive (TTI) where the main thread was blocked for long enough to prevent input responsiveness. To provide a good user experience, sites should strive to have a Total Blocking Time of less than 200 milliseconds when tested on average mobile hardware.

More about Total Blocking Time can be found here.

Signature

public getTBT (): IMetric

Returns

string

The name of the metric. This value will always be "TBT".

number

The TBT in milliseconds.

number

The change in time between navigation events. This value applies to client-side routing and will always be 0 for sever-side rendered websites.

PerformanceLongTaskTiming[]

The Performance Long Task Timing entries that were used to calculate this metric.

entries[0].

name

string

This value will return one of the following strings:

unknown: The long task originated from work that the user agent performed outside of the event loop.
self: The long task originated from an event loop task within this browsing context.
same-origin-ancestor: The long task originated from an event loop task within a same-origin ancestor browsing context.
same-origin-descendant: The long task originated from an event loop task within a same-origin descendant browsing context.
same-origin: The long task originated from an event loop task within a same-origin browsing context that is not an ancestor or descendant.
cross-origin-ancestor: The long task originated from an event loop task within a cross-origin ancestor browsing context.
cross-origin-descendant: The long task originated from an event loop task within a cross-origin descendant browsing context.
cross-origin-unreachable: The long task originated from an event loop task within a cross-origin browsing context that is not an ancestor or descendant.
multiple-contexts: The long task originated from an event loop task involving multiple browsing contexts.

entries[0].

entryType

string

This value will always be "longtask".

entries[0].

startTime

number

The time when the task started.

entries[0].

duration

number

The elapsed time between the start and end of task, with a 1 ms granularity.

entries[0].

attribution

TaskAttributionTiming[]

A frozen array of TaskAttributionTiming entries.

Get Total Blocking Time

edgemesh.metrics.getTBT()

Example Return

{
  name: "TBT",
  value: 5,
  delta: 0,
  entries: [{
    name: "self",
    entryType: "longtask",
    startTime: 433.2000000476837,
    duration: 55,
    attribution: [{
      name: "unknown",
      entryType: "taskattribution",
      startTime: 0,
      duration: 0,
      containerType: "window",
      containerSrc: "",
      containerId: "",
      containerName: ""
    }]
  }]
}

Time to Interactive (TTI) is an important metric for measuring load responsiveness. It helps identify cases where a page looks interactive but is not. A fast TTI helps ensure that the page is usable.

The TTI metric measures the time from when the page starts loading to when its main sub-resources have loaded and it is capable of reliably responding to user input quickly. To provide a good user experience, sites should strive to have a Time to Interactive of less than 5 seconds when tested on average mobile hardware.

More about Time to Interactive can be found here.

Signature

public getTTI (): IMetric

Returns

string

The name of the metric. This value will always be "TTI".

number

The time to interactive in milliseconds.

number

The change in time between navigation events. This value applies to client-side routing and will always be 0 for sever-side rendered websites.

PerformanceNavigationTiming[]

The Performance Navigation Timing records used to determine this metric.

entries[0].

name

string

The documents address (URL).

entries[0].

type

number

The navigation type.

navigateA typical navigation.
reloadA page reload.
back_forwardA back/forward navigation.
prerenderA pre-render navigation.

entries[0].

entryType

string

This value will always be "navigation".

entries[0].

startTime

number

This value will always be "0".

entries[0].

duration

number

The difference between the "loadEventEnd" and "startTime" properties in milliseconds.

entries[0].

initiatorType

number

This value will always be "navigation".

entries[0].

nextHopProtocol

string

The negotiated protocol.

entries[0].

workerStart

number

The service worker start time.

entries[0].

redirectStart

number

The start time of the fetch that initiates the redirect.

entries[0].

redirectEnd

number

The end time of the fetch that initiates the redirect.

entries[0].

fetchStart

number

The time immediately before the browser starts to fetch the page.

entries[0].

domainLookupStart

number

The time immediately before the browser starts the domain name lookup.

entries[0].

domainLookupEnd

number

The time immediately after the browser finishes the domain name lookup.

entries[0].

connectStart

number

The time immediately before the user agent starts establishing the connection to the server to retrieve the resource.

entries[0].

connectEnd

number

The time immediately after the browser finishes establishing the connection to the server to retrieve the resource. The timestamp value includes the time interval to establish the transport connection, as well as other time intervals such as SSL handshake and SOCKS authentication.

entries[0].

secureConnectionStart

number

The time immediately before the browser starts the handshake process to secure the current connection. If a secure connection is not used, the property returns zero.

entries[0].

requestStart

number

The time immediately before the user agent starts requesting the resource from the server, or from relevant application caches or from local resources.

entries[0].

responseStart

number

The time immediately after the user agent's HTTP parser receives the first byte of the response from relevant application caches, or from local resources or from the server.

entries[0].

responseEnd

number

The time immediately after the browser receives the last byte of the resource or immediately before the transport connection is closed, whichever comes first.

entries[0].

transferSize

number

entries[0].

encodedBodySize

number

The size in bytes received from the fetch (HTTP or cache), of the payload body, before removing any applied content-codings.

entries[0].

decodedBodySize

number

The size (in bytes) received from the fetch (HTTP or cache) of the message body, after removing any applied content-codings. If the resource is retrieved from an application cache or local resources, it returns the size of the payload after removing any applied content-codings.

entries[0].

serverTiming

PerformanceServerTiming[]

The size (in bytes) of the fetched resource. The size includes the response header fields plus the response payload body.

entries[0].

unloadEventStart

number

The previous document's unload event start time.

If the previous document and the current document have the same origin, this timestamp is measured immediately before the user agent starts the unload event of the previous document. If there is no previous document or the previous document has a different origin than the current document, this attribute will return zero.

entries[0].

unloadEventEnd

number

The previous document's unload event end time.

If the previous document and the current document have the same origin, this timestamp is measured immediately before the user agent starts the unload event of the previous document. If there is no previous document or the previous document has a different origin than the current document, this attribute will return zero.

entries[0].

domInteractive

number

The time immediately before the user agent sets the current document readiness of the current document to interactive.

entries[0].

domContentLoadedEventStart

number

The time immediately after the current document's DOMContentLoaded event completes.

entries[0].

domContentLoadedEventEnd

number

The time immediately before the user agent fires the DOMContentLoaded event at the current document.

entries[0].

domComplete

number

A time value equal to the time immediately before the browser sets the current document readiness of the current document to complete.

entries[0].

loadEventStart

number

The time immediately before the load event of the current document is fired.

entries[0].

loadEventEnd

number

The time when the load event of the current document is completed.

entries[0].

redirectCount

number

A number representing the number of redirects since the last non-redirect navigation under the current browsing context. If there was no redirect, or if the redirect was from another origin, and that origin does not permit it's timing information to be exposed to the current origin then the value will be 0.

Get Time to Interactive

edgemesh.metrics.getTTI()

Example Return

{
  name: "TTI",
  value: 663,
  delta: 0,
  entries: [{
    name: "https://example.com/",
    entryType: "navigation",
    startTime: 0,
    duration: 2350.7999999523163,
    initiatorType: "navigation",
    nextHopProtocol: "h2",
    workerStart: 0,
    redirectStart: 0,
    redirectEnd: 0,
    fetchStart: 7.400000095367432,
    domainLookupStart: 7.400000095367432,
    domainLookupEnd: 7.400000095367432,
    connectStart: 7.400000095367432,
    connectEnd: 7.400000095367432,
    secureConnectionStart: 7.400000095367432,
    requestStart: 25,
    responseStart: 87.10000014305115,
    responseEnd: 90.40000009536743,
    transferSize: 8993,
    encodedBodySize: 8693,
    decodedBodySize: 32501,
    serverTiming: [
      {
        name: "ems-cache-hit",
        duration: 0,
        description: "Cache Hit"
      },
      {
        name: "ems-parse-url",
        duration: 0,
        description: "Parse URL"
      },
      {
        name: "ems-get-config",
        duration: 0,
        description: "Get Config"
      },
      {
        name: "ems-cache-lookup",
        duration: 11,
        description: "Cache Lookup"
      }
    ],
    unloadEventStart: 102.20000004768372,
    unloadEventEnd: 102.20000004768372,
    domInteractive: 663.4000000953674,
    domContentLoadedEventStart: 663.4000000953674,
    domContentLoadedEventEnd: 673.4000000953674,
    domComplete: 2347.7999999523163,
    loadEventStart: 2347.9000000953674,
    loadEventEnd: 2350.7999999523163,
    type: "reload",
    redirectCount: 0
  }]
}

Both First CPU Idle and Time to Interactive measure when the page is ready for user input. First CPU Idle occurs when the user can start to interact with the page; TTI occurs when the user is fully able to interact with the page.

First CPU Idle measures how long it takes a page to become minimally interactive. A page is considered minimally interactive when most (but not necessarily all) UI elements on the screen are interactive and the page responds, on average, to most user input in a reasonable amount of time. To provide a good user experience, sites should strive to have a First CPU Idle of 4.7 seconds or less.

More about First CPU Idle can be found here.

Signature

public getCPUIdle (): IMetric

Returns

string

The name of the metric. This value will always be "FirstCPUIdle".

number

The First CPU Idle time in milliseconds.

number

The change in time between navigation events. This value applies to client-side routing and will always be 0 for sever-side rendered websites.

void[]

This array will always be empty.

Get First CPU Idle

edgemesh.metrics.getCPUIdle()

Example Return

{
  name: "FirstCPUIdle",
  value: 1146.6000001430511,
  delta: 0,
  entries: []
}

Load time measures how long it takes a page to become "fully loaded". A page is considered fully loaded when the onload event is emitted. To provide a good user experience, sites should strive to have a load time of 3 seconds or less.

Signature

public getLoadTime (): IMetric

Returns

string

The name of the metric. This value will always be "OnLoad".

number

The load time in milliseconds.

number

The change in time between navigation events. This value applies to client-side routing and will always be 0 for sever-side rendered websites.