c15t
Version:
Headless JavaScript consent management platform for cookie banners, privacy preferences, consent storage, and script gating.
85 lines (61 loc) • 2.84 kB
Markdown
title: Optimization
description: Improve c15t startup performance with prefetching and network tuning.
group: frameworks
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>
```