#performance
35 pieces filed under “performance”.
Experiments that don't shift the layout
A/B testing without layout shift: server-side assignment, experiment flags that never leak into the DOM, metric integrity, and the true cost of visual editors.
A search index built at build time
A build-time search index for static sites: tokenisation, stemming, synonyms, size budgets, sharded delivery, worker-side ranking, and proof it got better.
Scrollytelling with restraint: narrative pages that respect the scrollbar
The production playbook for scrollytelling that earns its keep: a one-pin budget, chapter navigation, a designed reduced-motion variant, and a print-test honesty check.
Reading progress indicators: craft or clutter?
The reading progress bar is the most faked detail on the web. The honest version: when long-form needs one, how to build it without jank or lies, when to skip it.
Keep your pages findable by Ctrl-F
Virtualisation silently breaks in-page search. The hidden=until-found and content-visibility toolkit, chunk-rendered long lists, and when a custom find box earns its keep.
Syntax highlighting with zero runtime
Syntax highlighting with zero runtime: tokenise at build time, theme code with design tokens, keep language support honest, ship an accessible copy button.
Animation is engineering: shipping motion at 60fps
Motion at 60fps is an engineering discipline: compositor-only properties, FLIP for layout changes, when canvas or WebGL earn their weight, and testing.
Third-party scripts: governance before they eat your site
The audit finds the mess; governance keeps it from coming back. A consent-aware loader, per-vendor budgets in CI, and the quarterly ritual that keeps tags honest.
View Transitions in production: the practical bits
The View Transitions API after the hype: same-document and MPA transitions, reduced-motion fallbacks, 2026 browser reality, and where motion aids comprehension.
Frontend observability for teams without an SRE
Frontend observability without an SRE: the three signals that matter, sourcemaps done privately, and the dashboards a small team will actually open.
Web workers for real work: what we move off the main thread
Web workers aren't a WebGL party trick. CSV parsing, fuzzy search, image pipelines, zipping exports — how we move real work off the main thread without the plumbing pain.
The true cost of video heroes
Video heroes feel premium and invoice like it. A cost-benefit ledger in megabytes, milliseconds and attention — plus the poster-frame discipline that makes one worth shipping.
Service workers: an honest production guide
Service workers are the most powerful and least forgiving API in the browser. Cache strategies by content type, update flows, offline fallbacks and production debugging.
Maps on the web: restraint and alternatives
A map is the most expensive component on most sites — in kilobytes, attention and accessibility. When a map earns it, how to design one that doesn't, and when a list wins.
Hero sections beyond the gradient blob
A field guide to memorable homepage heroes: typographic statements, generative canvases, product-in-context and editorial openers — with the performance cost of each.
Auditing third-party scripts before they audit you
Third-party scripts are a governed supply chain, not a paste bin. Our audit method: measure the cost, gate on consent, fence with CSP, and assign every tag an owner.
Building an image pipeline that designers don't curse
The image pipeline behind our fast pages and happy editors: AVIF/WebP fallbacks, focal-point crops, build-time vs CDN transforms, and the editorial fields that matter.
Streaming SSR: practical notes from shipping it
Streaming SSR in practice: what actually streams, where Suspense boundaries help or hurt TTFB, hydration ordering, mid-stream errors, and how to measure it.
WebGL on a budget: shipping 3D without melting mid-range phones
Shipping WebGL inside a performance budget: draw-call discipline, texture arithmetic, lazy canvases, device tiers, and keeping the 3D moment under 500KB.
Theme persistence without the flash
Dark mode that flashes light on load is a broken promise. Boot scripts vs cookies, SSR the right class, reconciling system preference, and testing regressions.
Art-directing images for the responsive web
Cropping is composition. Focal-point markup, per-breakpoint aspect ratios, srcset discipline and an honest reckoning with when AI imagery serves a brand.
Bundle budgets: the 170kb rule and how we hold it
Our rule: 170kb of compressed JavaScript per route, or the PR explains itself. How the budget works and where we spend bytes on purpose.
Font loading: recipes from the network tab
Webfonts are where performance budgets go to die quietly. Subsetting in CI, unicode-range slicing, per-role font-display policies, and the CLS nobody plans for.
Core Web Vitals in the field: budgets that survive sprints
A practical Core Web Vitals program: LCP element archaeology, INP triage, CI-enforced budgets, and real-user monitoring on a shoestring. Recipes that work.
The caching layers cake: HTTP, ISR and the discipline of invalidation
A layered caching model for content-heavy sites — CDN, full-page, data and application caches — plus the purge-on-publish pattern that ends 3am incidents.
Islands architecture: sprinkle, don't soak
When islands beat a full SPA: hydration costs, interaction latency budgets, the pragmatic hybrid pattern we use on content-heavy sites, and the traps.
Edge rendering: an honest guide for content sites
What edge rendering actually buys a content site, what it quietly costs, and the decision framework we run before moving a single route to the edge.
React Server Components: the trade-offs nobody puts in the talk
A sober field account of React Server Components: where they genuinely help, where the mental-model and caching costs bite, and how we decide per project.
Type systems for marketing sites that still load fast
How to build a marketing-site type system that carries the brand without blowing the performance budget — variable fonts, subsetting and metric-matched fallbacks.
Verdigris Archive: 80,000 botanical plates, searchable in a blink
A botanical museum put 80,000 plates online with fast faceted search, a deep-zoom viewer and public-domain downloads. Search success rose 63%.
Case studyBrumby Air: booking a Cessna seat like ordering coffee
A booking engine for a 14-route outback airline: weight-limit honesty, calendars that admit empty days, fare comparison, and pages that survive rural connections.
Case studyMarlowe Hotels: winning back the direct booking
A boutique coastal hotel group was paying OTAs a quiet tax on three-quarters of its bookings. We rebuilt the site and booking flow — and the share flipped.
Case studyOsprey Outdoor: the pack configurator that cut support tickets
How a WebGL pack configurator with a hard 3D performance budget and a full 2D fallback cut sizing tickets and returns for an outdoor gear brand.
Case studyQuarry & Compass: real-estate search that respects the dreamers
A property platform rebuilt around how people actually browse: dream scrolling, school-catchment rituals, honest listings, and maps that fly on regional 4G.
Case studyNorthwind Ledger: rebuilding the dashboard accountants actually open
How we rebuilt Northwind Ledger's dashboard around a 40-second morning ritual — sparklines over charts, cash anxiety first, and a hard performance budget.