Modern web development has fallen in love with abstraction. Today, even simple personal websites and text-based archives are commonly built using massive JavaScript frameworks (React, Next.js, Vue) that bundle megabytes of dependencies. The result is a slow, bloated developer experience and a frustrating reader experience, where pages take seconds to load and consume significant CPU resources just to render static words. This site rejects that complexity. This essay details the architecture that enables sub-50ms page transitions and a perfect 100/100 Core Web Vitals score.
1. The Hydration Tax and Framework Bloat
In modern Single Page Application (SPA) architectures, the server often renders the initial HTML, which is then sent to the client. Once the HTML arrives, the browser must download, parse, and execute a large JavaScript bundle to "hydrate" the page. During this hydration phase, the page is visually complete but completely unresponsive to clicks or interactions. The CPU is locked up building a virtual representation of the DOM that already exists in the browser.
By eschewing frameworks and building with raw, semantic HTML, we avoid the hydration tax entirely. The browser parses the HTML as it streams from the network and renders it immediately. There is no virtual DOM, no runtime state synchronization, and no dependency resolution. The rendering engine can proceed at hardware speed.
2. Static Edge Architecture (S3 + CloudFront)
To deliver files as close to the user as possible, the site is hosted on a highly optimized cloud delivery stack:
- AWS S3 Bucket: Serves as the origin server. S3 is designed for 99.999999999% durability and handles static file requests with extreme efficiency. Because S3 does not compile templates or run code, it can respond to file reads in single-digit milliseconds.
- AWS CloudFront CDN: Acts as a global caching proxy. Instead of sending requests to a centralized server, users connect to one of CloudFront's hundreds of Edge Locations worldwide. The file is cached at the edge, reducing latency to the physical travel time of light in optical fibers.
3. Network & Content Optimization Protocols
To compress transit times down to the physical minimum, several network layer optimizations are enforced:
- Gzip Compression: All HTML, CSS, and JS assets are compressed before transit, reducing file sizes by up to 75%.
- HTTP/2 Protocol: Enables multiplexed, concurrent requests over a single TCP connection, eliminating the head-of-line blocking problem typical of HTTP/1.1.
- Pre-fetching and DNS pre-resolution: The HTML `` includes preconnect links for third-party assets (such as Google Fonts), allowing the browser to perform DNS resolution, TCP handshake, and TLS negotiation in the background before the resources are requested.
4. Optimizing the Critical Rendering Path
The critical rendering path represents the steps the browser must take to convert code into pixels. To make this path as short as possible, we follow three principles:
- Raw CSS Custom Properties: All styling is declared in a single, lightweight `styles.css` file using native CSS variables. We do not use runtime CSS-in-JS libraries, which require JavaScript execution to inject styles at runtime.
- Font Preloading: The warm-editorial typography (Inter and Hahmlet) is pre-fetched using Google Fonts to prevent flashes of unstyled text (FOUT).
- Deferring Scripts: Our lightweight SPA router (`router.js`) is loaded using the `defer` attribute. This guarantees that script parsing does not block the initial HTML parsing, allowing the page to render instantly while the routing logic loads concurrently.
5. Searchability Without a Runtime Tax
Search metadata is compiled directly into each static document: descriptions, canonical URLs, social-card text, and structured data arrive inside the first HTML response. A static XML sitemap exposes the preferred coordinates, while a tiny viewer-request function maps those coordinates to S3 objects at the edge. There is no server-side renderer, hydration step, database query, analytics bundle, or second HTML fetch on a direct deep link.
By combining these protocols, we've built a site that feels as fast as paper, proving that the most effective way to optimize performance is simply to remove the abstractions that drag it down.