| 1 |
# Performance Philosophy |
| 2 |
|
| 3 |
Tufte's core insight: respect the user by showing them the data. McMaster-Carr proved it at scale — 700,000 products, no decoration, universally praised. The best interface disappears, leaving only the information the user came for. |
| 4 |
|
| 5 |
## Principles |
| 6 |
|
| 7 |
### 1. Every Element Earns Its Place |
| 8 |
|
| 9 |
Tufte's data-ink ratio: of all pixels on a page, what fraction communicates actual information? Maximize that fraction. McMaster-Carr has no hero images, no banners, no carousels. Their search results are dense text because text is faster to scan than thumbnails. |
| 10 |
|
| 11 |
A storefront shows the creator's work, not the platform's branding. Navigation is tight. Metadata (price, format, date, size) is visible without clicking. If a UI element doesn't help the user buy, sell, or browse, it doesn't ship. |
| 12 |
|
| 13 |
### 2. Speed Is the Design |
| 14 |
|
| 15 |
McMaster-Carr's search feels instant because it is instant. Slow interfaces are a form of chartjunk — decoration where information should be. |
| 16 |
|
| 17 |
Server-rendered HTML + HTMX is the right architecture. A 50ms server response with a complete HTML fragment always feels faster than a 200ms JSON payload that a client framework then renders. Commitments: |
| 18 |
|
| 19 |
- No full-page reloads for navigation. HTMX swaps fragments. |
| 20 |
- No layout shift. Elements have known dimensions before content arrives. |
| 21 |
- No lazy-loading above the fold. First screen is complete on first paint. |
| 22 |
- Measure time-to-interactive, not time-to-first-byte. The user's clock starts when they click. |
| 23 |
- Pre-fetch on hover when the next action is predictable (tabs, navigation links). |
| 24 |
|
| 25 |
### 3. Density Is Generosity |
| 26 |
|
| 27 |
Dense information is easier to read, not harder, when the design is clean. The problem was never complexity — it was chartjunk masquerading as organization. Minard fit six variables onto one map. McMaster-Carr puts dozens of products on a screen without scrolling. |
| 28 |
|
| 29 |
A catalog page should show 15-20 items without scrolling, not 3 hero cards. Each item gets a tight row: title, price, format badge, one-line description. Users compare by scanning, not by clicking into detail pages and pressing back. |
| 30 |
|
| 31 |
### 4. Hierarchy Through Typography, Not Decoration |
| 32 |
|
| 33 |
McMaster-Carr uses almost no color. Hierarchy comes from weight, size, and spacing. Tufte's "smallest effective difference" — the least visual distinction that still communicates structure. |
| 34 |
|
| 35 |
- Weight and size for titles vs metadata vs body. |
| 36 |
- Whitespace to group related elements. |
| 37 |
- Consistent alignment so the eye can scan columns. |
| 38 |
- Borders only when spacing alone is ambiguous. |
| 39 |
|
| 40 |
### 5. Complexity When the Data Demands It |
| 41 |
|
| 42 |
Tufte's sharpest criticism is oversimplification — the PowerPoint mentality. McMaster-Carr never hides specs behind "show more." If a bolt has 14 dimensions, all 14 are visible. |
| 43 |
|
| 44 |
A creator selling a sample pack might have format, sample rate, BPM, key, instrument, duration, license, and tier. Show all of it. Don't collapse it to make the page look cleaner. Clean is not the goal. Clear is the goal. |
| 45 |
|
| 46 |
### 6. Refuse to Waste Attention |
| 47 |
|
| 48 |
McMaster-Carr has no concept of "engagement." No notification badges, no algorithmic feeds, no interruptions during checkout. The user has a task. The site completes it. |
| 49 |
|
| 50 |
- No interstitials. |
| 51 |
- No dark patterns. "No thanks" is the same size as "yes." |
| 52 |
- Search that works. Server-side, fast, honest results. |
| 53 |
- Checkout in as few steps as possible. |
| 54 |
|
| 55 |
## Applied to MNW |
| 56 |
|
| 57 |
MNW already has the right foundations: server-rendered HTML, HTMX, warm beige/charcoal palette, intentional three-tier typography (Young Serif / IBM Plex Mono / Lato), no SPA overhead. The performance pass is about removing what slows things down, not adding what speeds things up. |
| 58 |
|
| 59 |
Concrete targets: |
| 60 |
- Dashboard tab switch: < 100ms perceived (pre-fetch on hover) |
| 61 |
- Discover page filter: < 150ms (HTMX partial swap, no full reload) |
| 62 |
- Item purchase to download: < 3 clicks from any page |
| 63 |
- Public project page: complete first paint with no layout shift |
| 64 |
- Zero skeleton loaders — if data isn't ready, the server waits; the browser paints once |
| 65 |
|