Dashboard

The AuraImage dashboard turns raw image delivery data into actionable performance insights. It is designed to answer one question: "How much faster is my site because of AuraImage?"

Aura Score

Every project has an Aura Score from 0 to 100. It measures how fully you are using AuraImage's performance features:

A score of 70+ indicates your images are unlikely to be a bottleneck in your Core Web Vitals.

Real-Time LCP Performance

The <AuraImage /> component includes an optional PerformanceObserver beacon that sends observed LCP timing to the edge:

new PerformanceObserver((list) => {
  const lcp = list.getEntries().at(-1);
  fetch('https://api.auraimage.ai/v1/telemetry', {
    method: 'POST',
    body: JSON.stringify({ lcp: lcp.startTime, slug: 'narek', pathname: location.pathname }),
    keepalive: true,
  });
}).observe({ type: 'largest-contentful-paint', buffered: true });

This is opt-in and sends only LCP timing and page path — no PII, no user data.

Enable it in the component:

<AuraImage src="narek/hero" alt="..." telemetry />

Dashboard Metrics

Format Distribution

See what browsers your audience uses and whether they are receiving optimal formats:

JXL    ████████████████░░░░  68%  (Chrome 145+, Safari 19+)
AVIF   ████████░░░░░░░░░░░░  29%  (older Chrome, Firefox)
WebP   █░░░░░░░░░░░░░░░░░░░   2%  (legacy Android)
JPEG   ░░░░░░░░░░░░░░░░░░░░   1%  (very old browsers)

If your JXL percentage is below 50%, check that fmt=auto is set on your image URLs.

Wallet Guard

Prevent unexpected bills from viral traffic spikes.

Settings → Billing → Wallet Guard:

• Set a monthly bandwidth limit (e.g., 50 GB).
• When 80% is consumed, you receive an email alert.
• When 100% is reached, you can choose: pause delivery (images return 402) or auto-upgrade to the next tier.

The default behavior is to continue serving images and bill the overage at $0.02/GB.

Cache Performance

A cache hit rate below 90% usually means images are being requested with too many unique parameter combinations. Consider standardizing to a small set of sizes (e.g., w=400, w=800, w=1200).

Server-Timing Headers

Every image response from AuraImage includes a Server-Timing header visible in browser DevTools:

Server-Timing: cache;desc="MISS";dur=12, fmt;desc="jxl";dur=0, process;desc="transformed";dur=45

When Cloudflare serves a cached response, it does so at the edge before the Worker executes — the request never reaches your code. Only cache misses produce a Server-Timing header. A missing Server-Timing header on an image response means the image was served from cache.