How This Website Was Built: Out-Engineering Modern Web Bloat
Most modern agency and startup websites look slick on a high-end M3 MacBook Pro, but fall apart on real phones—burning battery, choking mobile CPUs on massive JavaScript runtimes, and scoring in the red on Google PageSpeed. This is an ongoing engineering log of how we built Spacematter: pure static HTML output, zero-runtime Svelte islands, a progressive AVIF/WebP asset pipeline, and why bespoke craft beats template bloat every single time.
Figure 1.0: Real-world engineering benchmarks: 16 KB blocking JS, 18.5 MB of uncompressed raster weight eliminated, and 0 ms main thread lockup on load.
1. The 2 MB Problem: Why Most Agency Sites Feel Sluggish
Open your mobile browser right now and visit ten arbitrary creative agency or tech startup websites. You will notice a recurring pattern: beautiful desktop layouts that stutter on touch scrolls, sudden battery drain, and an awkward 2-to-4 second freeze before navigation menus or buttons respond.
Why does this happen? The modern web development ecosystem fell into a trap: treating documents as web applications.
The Client-Side Hydration Waterfall
When a team builds a marketing website using heavy frameworks like React, Next.js, or complex Webflow bundles, the server sends a minimal HTML shell accompanied by several megabytes of compiled JavaScript.
The browser must download that JavaScript, parse every abstract syntax tree (AST), compile it, and construct a duplicate Virtual DOM tree in memory just to “hydrate” text and static cards. On mobile processors, this hydration process locks the main thread for hundreds of milliseconds—preventing the user from tapping links while the CPU runs hot.
A website is fundamentally a document. Delivering an interactive document should never require shipping a desktop-class runtime.
At Spacematter, we established a strict engineering mandate: zero compromise on visual craft, but zero tolerance for runtime fat.
✦
2. Static Document First, Islands for Interaction
To achieve native speed, Spacematter is built on a Static-First Island Architecture powered by Astro and Svelte 5.
Instead of delivering a single-page app runtime, every route across the site (all 22 pages, subpages, and articles) compiles at build time into pure, pristine static HTML and scoped CSS in under 1.3 seconds.
01Pure Static HTML by Default: When Googlebot, Applebot, or a mobile visitor loads any page, they receive clean HTML instantly. If JavaScript is disabled completely, 100% of the site remains fully styled and readable.
02Svelte 5 Islands: For components that genuinely require client-side reactive state (like our dynamic Pricing Calculator or the interactive Service Sheet drawer), we use Svelte. Svelte compiles away its runtime, producing tiny vanilla DOM mutations rather than a heavy Virtual DOM engine.
03Deferred Idle Hydration: Navigation menus and overlays use client:idle rather than client:load. The browser paints the complete page first, and only hydrates interactive listeners during idle moments when the main thread is totally calm.
The result? Our initial blocking JavaScript payload on first page load is just 16 KB—over 96% smaller than standard Next.js deployments.
✦
3. Media Science: How We Shaved 18.5 MB in One Pass
High-craft design often relies on rich visual media: dark-mode glass cards, 3D animated emblems, and detailed UI screenshots. But unoptimized media is the quickest way to kill mobile conversion rates.
In our early drafts, animated APNGs and uncompressed screenshots in our public directory totaled over 18 MB. Rather than degrading our visual fidelity or shrinking images into blurry thumbnails, we implemented an automated Progressive AVIF + WebP Pipeline:
The HTML5 Picture Strategy
Every raster graphic on Spacematter is now served through responsive HTML5 <picture> elements:
• AVIF Primary: Modern devices (over 94% of smartphones and laptops worldwide) receive ultra-compressed AVIF images, cutting file size by 90% to 99% compared to original PNGs.
• WebP Fallback: Any older device that does not support AVIF automatically and seamlessly receives WebP, which has near 100% universal support.
• CSS-Driven Animation: Instead of heavy 3.5 MB animated raster GIFs, our 3D emblems (like the compass, robot, and lightning bolt) are crisp 7 KB transparent WebP/AVIF images animated along a sinusoidal wave via pure GPU-accelerated CSS keyframes.
A single animated asset like our 3D Compass dropped from 3,506 KB down to just 7 KB—a 99.7% byte reduction with zero loss in visual sharpness. Across the whole studio, we moved 18.5 MB of uncompressed legacy originals out of the production build entirely.
✦
4. The 3 Inviolable Design Laws
Speed without aesthetic intentionality feels sterile. To ensure Spacematter maintains an authoritative, high-craft physical presence, every element is governed by three strict design principles:
01The Universal Squircle Law: Pure circular or oval CSS corners look dated and generic. Every card, button, modal, badge, and input must declare corner-shape: squircle; to emulate the continuous-curvature aesthetics of Apple hardware and modern iOS surfaces.
023-Tier Surface Context Tokens: Contrast is never hardcoded. Colors are calculated dynamically based on elevation: Canvas Base (#0B0C10) at Level 0, Surface Sheet (#111319) at Level 1, and Surface Raised (#171A23) at Level 2.
03The 60–30–10 Anti-Purple Chromatic System: 60% monochromatic obsidian canvas, 30% structural glass and slate borders, and only 10% high-precision accent energy (Cadmium Amber and electric Iris). This preserves an engineering-grade tone without ever feeling playful or neon.
✦
5. Head-to-Head: Spacematter vs. Apple vs. Standard Agency
When we pitch prospective startups and SME clients, we don’t just speak in theoretical platitudes—we bring cold, verifiable numbers. Here is how our production codebase stacks up against industry benchmarks:
Engineering Metric
Spacematter Apps
Typical Agency / Startup
Apple.com (Industry Flagship)
Initial Blocking JS
16 KB
400 KB – 1.8 MB
350 KB – 800 KB
Rendering Model
Pure Static HTML
Client Hydration Waterfall
Hybrid Static + Heavy Canvas
Media Optimization
AVIF + WebP via <picture>
Raw PNG / Uncompressed
Proprietary AVIF / WebP
First Contentful Paint
< 200 ms
800 ms – 2.5s
~350–500 ms
Mobile Lighthouse Target
98–100 / 100
45–70 / 100
~75–88 / 100
Icon Network Cost
0 KB (Inline SVG)
50–150 KB (Webfonts)
Custom Sprites
Note: This is an ongoing case study. As we introduce WebAssembly computing modules, further GPU shader optimizations, and our native desktop/mobile apps, this log will continue to expand.
