How Google Web Vitals Generates and Reuses Metric IDs

This document explains how the Google Web Vitals library generates metric IDs and how those IDs are reused across metric updates (deltas). This behavior is important when implementing RUM or telemetry instrumentation.

Reference implementation:
https://github.com/GoogleChrome/web-vitals/blob/main/src/lib/generateUniqueID.ts

1. How the Web Vitals ID is Generated

The web-vitals library generates a unique ID using the following logic:

const generateUniqueID = () =>
  `v${version}-${Date.now()}-${Math.floor(Math.random() * 1e13)}`;

Source: https://github.com/GoogleChrome/web-vitals/blob/main/src/lib/generateUniqueID.ts

Structure of the Generated ID

v<libraryVersion>-<timestampMs>-<randomNumber>

Example:

v3-1709328323456-4829384923849

Components Explained

Component	Example	Purpose
Version	`v3`	Version of the web-vitals library
Timestamp	`1709328323456`	`Date.now()` ensures temporal uniqueness
Random number	`4829384923849`	Prevents collisions when multiple metrics occur in the same millisecond

This combination guarantees that the ID is globally unique for the metric instance.

2. How the Metric ID is Used

When a Web Vital metric (for example LCP or CLS) is first detected, the library creates a metric object with a generated ID.

Simplified internal structure:

const metric = {
  name: 'LCP',
  value: 0,
  delta: 0,
  id: generateUniqueID()
};

Example metric:

{
  "name": "LCP",
  "value": 2100,
  "delta": 2100,
}

How Google Web Vitals Generates and Reuses Metric IDs

Reference implementation:
https://github.com/GoogleChrome/web-vitals/blob/main/src/lib/generateUniqueID.ts

1. How the Web Vitals ID is Generated

The web-vitals library generates a unique ID using the following logic:

const generateUniqueID = () =>
  `v${version}-${Date.now()}-${Math.floor(Math.random() * 1e13)}`;

Source: https://github.com/GoogleChrome/web-vitals/blob/main/src/lib/generateUniqueID.ts

Structure of the Generated ID

v<libraryVersion>-<timestampMs>-<randomNumber>

Example:

v3-1709328323456-4829384923849

Components Explained

Component	Example	Purpose
Version	`v3`	Version of the web-vitals library
Timestamp	`1709328323456`	`Date.now()` ensures temporal uniqueness
Random number	`4829384923849`	Prevents collisions when multiple metrics occur in the same millisecond

This combination guarantees that the ID is globally unique for the metric instance.

2. How the Metric ID is Used

When a Web Vital metric (for example LCP or CLS) is first detected, the library creates a metric object with a generated ID.

Simplified internal structure:

const metric = {
  name: 'LCP',
  value: 0,
  delta: 0,
  id: generateUniqueID()
};

Example metric:

{
  "name": "LCP",
  "value": 2100,
  "delta": 2100,
  "id": "v3-1709328323456-4829384923849"
}

The ID is generated once when the metric instance is created.

3. How the ID is Reused for Future Metric Updates

Many Web Vitals metrics can update multiple times during the page lifecycle.

Example: Largest Contentful Paint (LCP) may change as larger elements render.

Instead of creating new IDs, the library updates the same metric object.

Initial metric

{
  "name": "LCP",
  "value": 2100,
  "delta": 2100,
  "id": "v3-1709328323456-4829384923849"
}

Later update

{
  "name": "LCP",
  "value": 2450,
  "delta": 350,
  "id": "v3-1709328323456-4829384923849"
}

Notice that:

id remains the same

Only the value and delta change.

4. Why the Same ID Must Be Reused

The ID represents a single metric instance for a page lifecycle.

This enables downstream systems to:

correlate updates belonging to the same metric
reconstruct the final metric value
deduplicate telemetry events
understand metric progression over time

Example progression for CLS:

Event	Value	Delta	ID
Layout shift 1	0.04	0.04	same ID
Layout shift 2	0.07	0.03	same ID
Layout shift 3	0.11	0.04	same ID

All updates share the same metric ID.

5. Why Generating a New ID Each Time Defeats the Purpose

If a new ID were generated for every update:

Example:

Event	Value	Delta	ID
Event 1	2100	2100	ID1
Event 2	2450	350	ID2

Problems caused:

1. Metric correlation breaks

Telemetry systems cannot determine that these events belong to the same metric instance.

2. Aggregation becomes incorrect

Systems may interpret them as two separate LCP measurements instead of updates.

3. Delta values become meaningless

Delta represents change from the previous value, but without a shared ID, the relationship is lost.

4. Storage and analysis complexity increases

Observability systems rely on consistent identifiers to group metric updates.

6. When a New ID is Generated

A new metric ID is generated only when a new metric instance begins.

This typically happens when:

a new page navigation occurs
a new page lifecycle starts

Example:

Page Load	Metric	ID
Page A	LCP	ID1
Page B	LCP	ID2

Each navigation creates a fresh metric instance.

7. Key Rule

One metric instance → one ID → multiple delta updates

The ID uniquely represents a single Web Vital metric during a page lifecycle.

{
  "id": "v3-1709328323456-4829384923849"
}

The ID is generated once when the metric instance is created.

3. How the ID is Reused for Future Metric Updates

Many Web Vitals metrics can update multiple times during the page lifecycle.

Example: Largest Contentful Paint (LCP) may change as larger elements render.

Instead of creating new IDs, the library updates the same metric object.

Initial metric

{
  "name": "LCP",
  "value": 2100,
  "delta": 2100,
  "id": "v3-1709328323456-4829384923849"
}

Later update

{
  "name": "LCP",
  "value": 2450,
  "delta": 350,
  "id": "v3-1709328323456-4829384923849"
}

Notice that:

id remains the same

Only the value and delta change.

4. Why the Same ID Must Be Reused

The ID represents a single metric instance for a page lifecycle.

This enables downstream systems to:

correlate updates belonging to the same metric
reconstruct the final metric value
deduplicate telemetry events
understand metric progression over time

Example progression for CLS:

Event	Value	Delta	ID
Layout shift 1	0.04	0.04	same ID
Layout shift 2	0.07	0.03	same ID
Layout shift 3	0.11	0.04	same ID

All updates share the same metric ID.

5. Why Generating a New ID Each Time Defeats the Purpose

If a new ID were generated for every update:

Example:

Event	Value	Delta	ID
Event 1	2100	2100	ID1
Event 2	2450	350	ID2

Problems caused:

1. Metric correlation breaks

Telemetry systems cannot determine that these events belong to the same metric instance.

2. Aggregation becomes incorrect

Systems may interpret them as two separate LCP measurements instead of updates.

3. Delta values become meaningless

Delta represents change from the previous value, but without a shared ID, the relationship is lost.

4. Storage and analysis complexity increases

Observability systems rely on consistent identifiers to group metric updates.

6. When a New ID is Generated

A new metric ID is generated only when a new metric instance begins.

This typically happens when:

a new page navigation occurs
a new page lifecycle starts

Example:

Page Load	Metric	ID
Page A	LCP	ID1
Page B	LCP	ID2

Each navigation creates a fresh metric instance.

7. Key Rule

One metric instance → one ID → multiple delta updates

The ID uniquely represents a single Web Vital metric during a page lifecycle.

shubham-vunet/use of correct id in Web Vitals.md

Select an option

No results found

Select an option

No results found

How Google Web Vitals Generates and Reuses Metric IDs

1. How the Web Vitals ID is Generated

Structure of the Generated ID

Components Explained

2. How the Metric ID is Used

How Google Web Vitals Generates and Reuses Metric IDs

1. How the Web Vitals ID is Generated

Structure of the Generated ID

Components Explained

2. How the Metric ID is Used

3. How the ID is Reused for Future Metric Updates

Initial metric

Later update

4. Why the Same ID Must Be Reused

5. Why Generating a New ID Each Time Defeats the Purpose

1. Metric correlation breaks

2. Aggregation becomes incorrect

3. Delta values become meaningless

4. Storage and analysis complexity increases

6. When a New ID is Generated

7. Key Rule

3. How the ID is Reused for Future Metric Updates

Initial metric

Later update

4. Why the Same ID Must Be Reused

5. Why Generating a New ID Each Time Defeats the Purpose

1. Metric correlation breaks

2. Aggregation becomes incorrect

3. Delta values become meaningless

4. Storage and analysis complexity increases

6. When a New ID is Generated

7. Key Rule