> ## Documentation Index
> Fetch the complete documentation index at: https://docs.germainux.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Element and Mark Performance Monitoring

> GermainUX can collect application-specific browser performance measurements that are not included in standard page-load monitoring.

Components
[`JS Profiler`](https://docs.germainux.com/main/germain-ux-js-profiler)
[`RUM JS`](https://docs.germainux.com/main/germain-ux-rum-js)
[`RUM Extension`](https://docs.germainux.com/main/germain-ux-rum-extension)

Availability
2022.1 or later

Browser support
only latest Chrome, Edge and Opera

> **[Capabilities](#capabilities)**
>
> Stored as browser transactions

> **[Application instrumentation](#application-instrumentation)**
>
> Add timing marks to code

> **[Advanced configuration](#advanced-configuration)**
>
> Filter or transform entries

> **[Deployment and configuration](#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.

> [!NOTE]
>
> 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.

```text theme={null}
<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.

```text theme={null}
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.

![Performance Measures on Drill-through](https://mintcdn.com/germain-ux/8KX3c-GSSWR99tdN/images/main/element-and-mark-performance-monitoring/image-20230327-095202.png?fit=max\&auto=format\&n=8KX3c-GSSWR99tdN\&q=85\&s=b9f17c3e7dbc7fa39905651f8148478c)

## Enable element monitoring

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

```javascript theme={null}
const settings = germainApm.getDefaultSettings();

settings.plugins.performance.elementMonitoringEnabled = true;

germainApm.start(settings);
```

## Enable custom-measure monitoring

Enable User Timing measure collection:

```javascript theme={null}
const settings = germainApm.getDefaultSettings();

settings.plugins.performance.measureMonitoringEnabled = true;

germainApm.start(settings);
```

To collect only selected measures, specify their exact names:

```javascript theme={null}
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](https://docs.germainux.com/main/browser-monitoring.md).
* [Deploy Browser Monitoring](https://docs.germainux.com/main/deployment-for-browser-monitoring.md) with the appropriate GermainUX browser component.
* Review the available [Browser Monitoring configuration](https://docs.germainux.com/main/configuration-for-browser-monitoring.md).
* Review the [KPIs for User Monitoring and Replay](https://docs.germainux.com/main/user-monitoring-and-replay-kpis.md).
* Review the available Browser Monitoring KPIs.
* Review the [Browser Monitoring APIs](https://docs.germainux.com/main/apis-for-browser-monitoring.md).

## Get Help

> **[Contact GermainUX Support](https://docs.germainux.com/main/support.md)**
>
> 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.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.