---
title: Optimization
description: Improve c15t startup performance with prefetching and network tuning.
lastModified: 2026-03-17
---
Use this guide when you care about banner visibility speed, route static-ness, and reducing backend round-trip cost.

## 1) Prefer Same-Origin Proxy

Proxy c15t requests through your app server so the browser calls your own origin instead of a third-party domain.

```ts
const store = createConsentManagerStore({
  mode: 'hosted',
  backendURL: '/api/c15t', // same-origin proxy path
});
```

Why this helps:

* Same-origin requests avoid extra DNS/TLS setup in many deployments
* Ad blockers are less likely to block your init endpoint
* You can change backend infrastructure without touching client code

## 2) Prefetch Init Data Early

Use `buildPrefetchScript()` to start the `/init` request as early as possible — before your app JavaScript loads.

In production benchmarks with a same-origin rewrite, prefetching strategies show measurable improvement over client-only init:

| Strategy                  | Scripts loaded | Data request starts | Banner visible |
| ------------------------- | -------------- | ------------------- | -------------- |
| Client-only (no prefetch) | baseline       | baseline            | baseline       |
| Browser prefetch          | \~1.3x faster  | \~2.6x earlier      | \~1.25x faster |
| Server prefetch           | \~2x faster    | before page loads   | \~1.9x faster  |

Add the prefetch script to your HTML `<head>`:

```ts
import { buildPrefetchScript } from 'c15t';

const script = buildPrefetchScript({
  backendURL: '/api/c15t',
});
// Inject `script` into a <script> tag in your HTML <head>
```

Then create the store normally. Matching prefetched data is consumed automatically by the runtime during first store initialization:

```ts
import {
  createConsentManagerStore,
} from 'c15t';

const store = createConsentManagerStore({
  mode: 'hosted',
  backendURL: '/api/c15t',
});
```

> ℹ️ **Info:**
> If overrides.gpc conflicts with the browser's ambient GPC signal, the prefetched entry is not reused and c15t falls back to a normal client /init.

## Animation Performance

The default motion tokens are tuned for speed-first product UI:

| Token    | Duration | Used for                                                            |
| -------- | -------- | ------------------------------------------------------------------- |
| `fast`   | 80ms     | Banner slide + overlay, card scale, button hover, widget entry/exit |
| `normal` | 150ms    | Accordion, switch toggle                                            |
| `slow`   | 200ms    | Dialog trigger snap, tab indicator                                  |

These defaults follow the principle that product UI should be fast and purposeful — animations exist for spatial continuity, not decoration. In benchmarks, animation duration contributes a constant floor to "data fetched → banner visible" timing. The default tokens sit at the lower end of standard UI ranges (80-200ms) to minimize that floor.

## Reduce Network Overhead

If you must use a cross-origin backend URL, add preconnect so the browser starts DNS/TLS early:

```html
<head>
  <link rel="preconnect" href="https://your-instance.c15t.dev" crossorigin />
</head>
```
