Client Architecture Case Studies

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. These are illustrative scenarios, not descriptions of real client engagements. The figures are indicative only and were not measured on client sites.

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.

Pre-Optimisation Metrics:

• Total page weight: 1,843 KB
• HTTP requests: 47 (12 JS bundles, 6 CSS files, 24 images, 5 font files)
• Time to First Paint (broadband): 2.3 seconds
• Time to First Paint (3G): 11.7 seconds
• Lighthouse Performance Score: 34/100
• JavaScript execution time: 840 ms on mid-range mobile

Structural Choices:

• Replaced the entire JavaScript framework stack with static HTML 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.

Pre-Optimisation Metrics:

• Total page weight: 3,120 KB
• HTTP requests: 89 (22 JS, 15 CSS, 38 images, 9 fonts, 5 analytics pings)
• Time to First Paint (broadband): 4.1 seconds
• Time to First Paint (3G): 19.3 seconds
• 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 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 HTML and images)
• HTTP requests: 1 HTML document plus its images, all from the 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

Structural Choices:

• Eliminated Jekyll and all build tooling. All 40 pages hand-authored as static HTML 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 html-lite-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)
• JavaScript payload: 0 KB
• Time to First Paint (broadband): 14 ms
• Average page size: 7.8 KB
• Build step: none (direct file copy to server)

Navigation & Repository Links: