demo · v151

Tier Distribution Simulator

Before you adopt tier-based code paths, you need to know what tiers your audience actually has. Pick a checked-in RUM export, see the population histogram, and compute how many users get the heavy path vs the light path.

Dataset-backed simulator. The buttons below are loaded from audience-tier-export.json. The bundled export is an inspectable first-party RUM shape for this demo, not Chrome-wide market share; replace it with your own aggregate export before using the numbers for product planning.

RUM export

data source

Loading dataset provenance…

fine-tune (override the export)

tier distribution

roll-out math

heavy path (3+)

—

balanced (2)

—

budget path (0-1)

—

—

code

// Query your first-party RUM beacons into aggregate counts:
// SELECT audience_segment, cpu_tier, COUNT(*) AS visits
// FROM app.rum_cpu_tier_beacons
// GROUP BY audience_segment, cpu_tier;

const tier = typeof navigator.cpuPerformance === "number"
  ? navigator.cpuPerformance
  : 2;

// Use the audience histogram to decide which features to keep in
// the default bundle. If >80% of users hit tier 3+, ship the heavy
// feature by default. Otherwise gate behind a "try it" affordance.

beacon({ name: "cpu_tier", value: tier });
if (tier >= 3 && AUDIENCE_HEAVY_PCT > 0.6) {
  await import("./3d-physics-renderer.js");
} else {
  await import("./flat-renderer.js");
}

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗