The Harrisburg Shopping Decoupled Hierarchical Architecture

If you’ve ever tried to find a specific part in a massive, disorganized warehouse, you know the feeling: you spend more time walking the aisles than actually shopping. On our site, we have nearly 20,000 categories. Some of them are buried eight levels deep—think of it like a nesting doll that just keeps going.

Normally, a website with that much data would be a total nightmare. Every time you clicked a button, the site would have to "ask" the database thousands of questions just to figure out where you are. That’s why most big sites feel sluggish or just crash entirely.

What We Changed

Instead of making the site "think" every time you load a page, we gave it a Cheat Sheet. We took a snapshot of all 20,000 categories and turned them into one single, high-speed file (called a JSON file).

Now, when you visit, the site doesn't have to search through a massive, dusty ledger. It just glances at the cheat sheet and shows you exactly where to go. To make it even faster, we "shrink-wrap" (Gzipped) that file so it travels across the internet in a blink. The result? A site that loads in 1.4 seconds, even though it's carrying enough data to fill a library.

Technical Deep-Dive: Decoupled Hierarchical Architecture

For those interested in the $O(n)$ complexity and the work under the hood, here is the technical breakdown of the optimization:

1. Eliminating Recursive SQL Overhead

Standard relational database calls for hierarchical data (Adjacency List models) require recursive queries or nested loops that scale poorly. With 19,824 nodes and an 8-level depth, a standard menu draw would trigger thousands of "parent-child" lookups. We moved to a Decoupled Snapshot Model, extracting the entire tree into a static JSON object. This shifts the complexity from $O(n)$ database lookups to a single $O(1)$ file read.

2. Streamlined Data Serialization

The JSON generation script utilizes a LEFT JOIN on the seo_url table to map query strings to keywords during the build phase. By pre-calculating the URI paths (e.g., path=X_Y_Z) into the JSON structure, we bypass the need for an internal URL rewrite to hit the database during the render cycle.

3. Payload Optimization via Gzip (DEFLATE)

A 20k-node JSON tree is a heavy text payload. By implementing mod_deflate in the .htaccess file, we apply a high-compression algorithm to the application/json MIME type. This reduces the transfer size by roughly 90%, ensuring the Time to First Byte (TTFB) remains elite despite the massive category depth.

4. DOM Rendering & Total Blocking Time (TBT)

By serving the menu data as a clean array to the view controller, we achieved a 0ms Total Blocking Time. The browser isn't waiting for the server to finish a complex calculation; it simply parses the pre-structured JSON, leading to a 1.0s First Contentful Paint and a rock-solid user experience.

So that's what I did for my weekend, how was yours?