Element and Mark Performance Monitoring

ComponentsJS ProfilerRUM JSRUM Extension

Availability2022.1 or later

Browser supportonly latest Chrome, Edge and Opera

Capabilities

Stored as browser transactions

Application instrumentation

Add timing marks to code

Advanced configuration

Filter or transform entries

Deployment and configuration

Rollout and settings

Overview

GermainUX can collect application-specific browser performance measurements that are not included in standard page-load monitoring. These measurements help teams understand when important content becomes visible and how long custom application operations take for real users.

This monitoring is disabled by default and must be enabled for each applicable User Monitoring Profile.

Capabilities

Capability	What GermainUX monitors
Element performance	Rendering of image or text elements annotated by the application developer with the HTML `elementtiming` attribute.
Custom performance measures	Durations created by the application between custom performance marks through the browser User Timing API.

Each collected entry is stored as a GermainUX UX transaction with the type Browser:Performance Measure, making it available for analysis alongside the associated application, page, user, browser, and session context.

Common use cases

Use element and mark performance monitoring to:

Measure when important images or text become visible.
Track application-specific operations that standard browser timings do not represent.
Compare performance across pages, application versions, browsers, locations, or user populations.
Identify slow or unusual measurements affecting real users.
Analyze measurements through GermainUX KPIs, drill-through views, dashboards, SLAs, and session context.

Application instrumentation

Element timing

Add the elementtiming attribute to each supported image or text element that the browser should report.

<img loading="lazy"
  src="/images/product.jpg"
  elementtiming="product-image"
  alt="Product"
/>

The browser’s Element Timing API determines which elements and properties are supported.

Custom measures

Instrument the application with browser performance marks and create a measure representing the duration between them.

performance.mark("search-start");

// Application operation

performance.mark("search-complete");
performance.measure(
  "search-duration",
  "search-start",
  "search-complete"
);

GermainUX collects the resulting measure, such as search-duration. Performance marks alone do not contain a duration; the application must create a performance measure from the relevant marks.

Enable element monitoring

Enable Element Timing collection in the GermainUX RUM JS initialization settings:

const settings = germainApm.getDefaultSettings();

settings.plugins.performance.elementMonitoringEnabled = true;

germainApm.start(settings);

Enable custom-measure monitoring

Enable User Timing measure collection:

const settings = germainApm.getDefaultSettings();

settings.plugins.performance.measureMonitoringEnabled = true;

germainApm.start(settings);

To collect only selected measures, specify their exact names:

const settings = germainApm.getDefaultSettings();

settings.plugins.performance.measureMonitoringEnabled = true;
settings.plugins.performance.measureMonitoringEntryNames = [
  "search-duration",
  "checkout-duration"
];

germainApm.start(settings);

If measureMonitoringEntryNames is not specified, GermainUX collects all available performance-measure entries.

Advanced configuration

Setting	Purpose	Default
`elementMonitoringEnabled`	Collect entries reported through the Element Timing API.	`false`
`measureMonitoringEnabled`	Collect measures reported through the User Timing API.	`false`
`measureMonitoringEntryNames`	Restrict collection to the specified measure names. If omitted, all measures are eligible for collection.	`undefined`
`factProcessor`	Modify or filter generated performance data before it is sent to GermainUX.	Not configured

Use factProcessor only when application-specific filtering or transformation is required.

Browser support

Measurement	Supported browsers
Custom performance measures	Recent versions of Chrome, Edge, Firefox, Opera, and Safari
Element timing	Recent versions of Chrome, Edge, and Opera

Browser support depends on the browser’s implementation of the relevant web-performance API. Unsupported browsers do not produce the corresponding entries.

Deployment and configuration

Review Browser Monitoring.
Deploy Browser Monitoring with the appropriate GermainUX browser component.
Review the available Browser Monitoring configuration.
Review the KPIs for User Monitoring and Replay.
Review the available Browser Monitoring KPIs.
Review the Browser Monitoring APIs.

Get Help

Contact GermainUX Support

The Germain Team can help you set this up.

Can't find what you need?

Search all GermainUX docs with Ctrl + K, or use the feedback buttons at the bottom of this page to tell us what is missing.

The content of this document is proprietary to GERMAIN SOFTWARE LLC.

Capabilities

Application instrumentation

Advanced configuration

Deployment and configuration

​Overview

​Capabilities

​Common use cases

​Application instrumentation

​Element timing

​Custom measures

​Enable element monitoring

​Enable custom-measure monitoring

​Advanced configuration

​Browser support

​Deployment and configuration

​Get Help

Contact GermainUX Support

Can't find what you need?

Overview

Capabilities

Common use cases

Application instrumentation

Element timing

Custom measures

Enable element monitoring

Enable custom-measure monitoring

Advanced configuration

Browser support

Deployment and configuration

Get Help