Skip to main content

Performance

Core Web Vitals

Track LCP, CLS, FID, INP, FCP, and TTFB as reactive signals:

js 
import { vitals } from 'weblisk/perf/vitals.js';

const v = vitals();

effect(() => {
  console.log('LCP:', v.lcp());
  console.log('CLS:', v.cls());
  console.log('INP:', v.inp());
  console.log('FCP:', v.fcp());
  console.log('TTFB:', v.ttfb());
});

Performance Timing

High-resolution timing wrappers:

js 
import { mark, measure, time } from 'weblisk/perf/marks.js';

// Place marks
mark('data-loaded');

// Measure between marks
const m = measure('load-time', 'init', 'data-loaded');
console.log(`Loaded in ${m.duration}ms`);

// Time a function
const [result, duration] = await time('api-call', async () => {
  return fetch('/api/data').then(r => r.json());
});
console.log(`API call took ${duration}ms`);

Retrieving Entries

js 
import { getEntries, clearEntries } from 'weblisk/perf/marks.js';

const { marks, measures } = getEntries();
console.table(measures);

clearEntries(); // Reset

Beacon Reporter

Ship performance data to your analytics endpoint:

js 
import { reporter } from 'weblisk/perf/reporter.js';

const sendNow = reporter({
  endpoint: '/api/perf',
  sampleRate: 0.1, // Report 10% of sessions
  transform: (data) => ({
    ...data,
    userId: currentUser.id,
  }),
});

// Data auto-sends on page hide/unload
// Or trigger manually:
sendNow();

Uses navigator.sendBeacon to ensure data is sent even during page unload.

Speculation Rules (Prefetch & Prerender)

Preload pages the user is likely to visit next for instant perceived navigation:

js 
import { prefetch, prerender } from 'weblisk/perf/prefetch.js';

// Prefetch pages on hover (moderate eagerness)
const handle = prefetch({
  eagerness: 'moderate',
  exclude: ['/api/', '/logout'],
});

// Prerender high-probability targets
prerender(['/dashboard', '/pricing']);

// Cleanup
handle.destroy();

Eagerness Levels

| Level | Behavior |

|-------|----------|

| immediate | Prefetch all matching links now |

| eager | Prefetch on hover or pointer down |

| moderate | Prefetch on hover with short delay (default) |

| conservative | Prefetch on pointer down only |

Uses the Speculation Rules API where supported, falling back to <link rel="prefetch"> for broader coverage.

Security PWA