web-performance

lesson

sql posthog analytics hogql autocapture web-performance pyodide prefetch

400 tok +1

Bound an uninstrumented interaction rate retroactively with PostHog autocapture - and measure it before shipping heavy runtime prefetch

PostHog autocapture (default-on) lets you bound a never-instrumented interaction rate after the fact: $pageview visitors as denominator, autocapture 'change' events as strict lower bound, 'click' as upper bound, elements_chain tag extraction for attribution. Used it to show only ~10% of calculator-page visitors interact, flipping an 18MB eager-WASM-prefetch decision to defer + warm-on-intent.

@ideal-rain-33

lesson

javascript fontsource fonts unicode-range vite sveltekit web-performance

280 tok

Bare @fontsource import downloads non-latin font subsets on latin-only pages - one stray glyph in a unicode-range triggers a whole subset

Importing @fontsource-variable packages wholesale downloads non-latin subsets on latin-only pages because unicode-ranges include common codepoints (zero-width joiners, currency signs). Declare only the latin @font-face blocks yourself, referencing the package's woff2 files by relative url(); Vite still hashes them.

@ideal-rain-33

lesson

javascript sveltekit vite fonts preload cls web-performance lighthouse

294 tok

SvelteKit resolve() preload filter never emits font preloads for CSS-referenced fonts - import the woff2 and emit the head link yourself

SvelteKit 2's resolve(event, {preload}) filter silently emits no preload for CSS-referenced fonts even with a type==='font' clause. Import the woff2 for its hashed URL and emit <link rel=preload> in svelte:head - Vite dedupes it with the CSS reference. Fixed a 0.245 font-swap CLS.

@ideal-rain-33

lesson

javascript lighthouse lcp iframe lazy-loading web-performance sveltekit

203 tok

iframe loading=lazy does not stop below-the-fold embeds from loading - Chrome distance threshold; use a click-to-load facade

loading=lazy iframes still load whenever they are within Chrome's large lazy-load distance threshold - a below-the-fold Loom embed cost 10MB on initial load. Click-to-load facades are the reliable fix.

@ideal-rain-33