Detailed technical breakdowns of static web architecture projects completed by Binary & Bus, Sys. Each study documents the pre-optimisation state, structural decisions made during refactoring, and measured performance outcomes. All figures reflect production measurements taken on commodity hardware over standard broadband connections.
Case Study 01: Independent Music Label Portfolio
Client: Small independent music label requiring a public-facing artist catalogue and release archive. Initial State: Single-page application built with a JavaScript framework, bundled with Webpack, served from a Node.js runtime. Total page weight: 1.84 MB across 47 HTTP requests.
JavaScript execution time: 840 ms on mid-range mobile
Structural Choices:
Replaced the entire JavaScript framework stack with static HTML 3.2 documents, one per artist and one per release.
Consolidated 24 images into 8 dithered 1-bit PNGs using Atkinson error diffusion, reducing image payload by 94%.
Eliminated all external font files by switching to system-ui font stack.
Removed all JavaScript. Navigation implemented via standard hyperlinks. Filtering implemented server-side with static redirect maps.
Inlined all CSS into a single 380-byte <style> block repeated in each document head.
Post-Optimisation Metrics:
Total page weight: 11.2 KB
HTTP requests: 2 (1 HTML document, 1 image per page)
Time to First Paint (broadband): 18 ms
Time to First Paint (3G): 94 ms
Lighthouse Performance Score: 100/100
JavaScript execution time: 0 ms
Payload reduction: 99.4%
Case Study 02: Regional Architecture Firm
Client: Architecture practice requiring a project portfolio, team bios, and contact form. Initial State: WordPress installation with 14 plugins, 3 custom post types, and a page builder. Served from shared hosting. Total page weight across homepage: 3.12 MB.
Server response time (TTFB): 1.8 seconds on shared hosting
Cumulative Layout Shift: 0.34
Structural Choices:
Migrated from WordPress to a flat-file static site with 23 HTML 3.2 documents, one per project page and one per team member.
Contact form replaced with a mailto: link and a pre-filled subject line, eliminating server-side processing entirely.
All images converted to greyscale and compressed to under 8 KB each using a combination of resize-to-800px-width and Floyd-Steinberg dithering.
Removed all analytics tracking. Replaced with a simple server-access-log grep script for traffic counting.
Total CSS: 520 bytes inlined. No external stylesheets, no build step.
Post-Optimisation Metrics:
Total page weight: 18.7 KB (homepage, all assets inlined)
HTTP requests: 1 (single HTML document, images embedded as <img> tags from same server)
Time to First Paint (broadband): 22 ms
Time to First Paint (3G): 110 ms
Server response time (TTFB): 8 ms (static file, no PHP)
Cumulative Layout Shift: 0.00
Payload reduction: 99.4%
Case Study 03: Non-Profit Documentation Portal
Client: Environmental non-profit requiring a documentation portal with 40+ pages of technical guides, data sheets, and downloadable resources. Initial State: Jekyll static site with 40 Markdown files, a custom Liquid template theme, and a search index generated by a JavaScript library. Total deploy size: 890 KB.
Pre-Optimisation Metrics:
Total deploy size: 890 KB (HTML + assets)
JavaScript search bundle: 127 KB (lunr.js + index data)
Time to First Paint (broadband): 1.1 seconds
Pages indexed by search engines: 12 of 40 (JavaScript-rendered content not crawlable)
Structural Choices:
Eliminated Jekyll and all build tooling. All 40 pages hand-authored as static HTML 3.2 documents with consistent structure.
Replaced JavaScript search with a server-side grep-based search endpoint returning plain-text results, rendered as a simple HTML list.
Removed all Liquid template inheritance. Each page is a self-contained document with repeated header and footer markup (duplicated HTML costs less than 1 KB per page and eliminates template processing).
All 40 pages pass html32-check.py validation and remain under 8 KB each.
Post-Optimisation Metrics:
Total deploy size: 312 KB (40 HTML documents, no JavaScript, no build artifacts)
Client Architecture Case Studies