Monorepo for Aesthetic.Computer
aesthetic.computer
1# Performance Optimization Guide
2
3## ✅ Recent Improvements (Nov 2024)
4
5### Typeface Preload Removal - **Saved ~6 seconds** 🚀
6- **Before:** 5689ms to preload Unifont + MatrixChunky8
7- **After:** 0ms (instant stub, on-demand loading)
8- **Impact:** Boot time reduced by ~75% in development
9
10### Development Server Optimization
11- **Caddy**: HTTP/2, zstd compression, no-cache headers
12- **Fast reload**: Instant updates during development
13
14### Chrome DevTools Integration
15- **Automated testing**: Puppeteer + Lighthouse
16- **Performance tracking**: CI/CD integration
17- **Coverage analysis**: Identify unused code
18
19## Boot Performance Improvements
20
21### 1. Typeface Preloading ✅ OPTIMIZED
22**Before:** ~6 seconds to preload Unifont + MatrixChunky8
23**After:** Instant (on-demand loading)
24
25Changed in `system/public/aesthetic.computer/lib/disk.mjs`:
26- Set `skipTypefacePreload = true` (always)
27- Glyphs load on-demand when needed
28- Saves 5-6 seconds on every boot
29
30### 2. Auth0 Loading
31Currently loads asynchronously but can block ready state.
32Consider:
33- Lazy load auth0 after initial render
34- Use web workers for auth operations
35- Cache auth state more aggressively
36
37### 3. Development Server Optimization
38
39#### Caddy (Port 8111) - OPTIMIZED ✅
40```caddyfile
41:8111 {
42 protocols h1 h2c # HTTP/2 support
43 encode zstd gzip # Better compression
44 header Cache-Control "no-store" # No cache in dev
45}
46```
47
48#### Netlify Dev
49Consider adding to `netlify.toml`:
50```toml
51[dev]
52 targetPort = 8111
53 framework = "#static"
54 autoLaunch = false
55
56[dev.processing]
57 skip_processing = true # Skip build processing in dev
58```
59
60## Performance Testing
61
62### Run Tests
63```bash
64# Basic performance test
65npm run test:perf
66
67# Chrome DevTools automated test
68npm run test:perf:chrome
69
70# Full Lighthouse audit (slower)
71npm run test:perf:lighthouse
72```
73
74### Chrome DevTools Automated Testing ✅ INTEGRATED
75
76The `chrome-devtools-test.mjs` script provides:
77- **Performance Metrics**: DNS, TCP, TTFB, FCP, DOM timings
78- **Resource Analysis**: Identifies slowest-loading resources
79- **JavaScript Coverage**: Shows unused code percentage
80- **Lighthouse Audits**: Performance scoring and recommendations
81
82Example output:
83```
84⏱️ Performance Metrics:
85 Total Load Time: 2847ms
86 First Contentful Paint: 847ms
87 DOM Complete: 2456ms
88
89📦 Top 10 Slowest Resources:
90 1. boot.mjs - 1234ms (156KB)
91 2. bios.mjs - 876ms (234KB)
92
93📊 JavaScript Coverage:
94 Coverage: 67.3%
95 Unused: 142KB
96```
97
98### Chrome DevTools Integration
99
100#### 1. Performance Timeline
101Open Chrome DevTools → Performance tab
102- Start recording before page load
103- Look for:
104 - Script evaluation time
105 - Network requests (especially fonts)
106 - Long tasks (>50ms)
107 - Layout shifts
108
109#### 2. Coverage Analysis
110DevTools → More Tools → Coverage
111- Shows unused JavaScript/CSS
112- Helps identify code splitting opportunities
113
114#### 3. Network Throttling
115DevTools → Network → Throttling
116- Test with "Fast 3G" or "Slow 3G"
117- Identifies slow resources
118
119#### 4. Lighthouse
120DevTools → Lighthouse
121- Run performance audit
122- Focus on:
123 - Time to Interactive
124 - First Contentful Paint
125 - Total Blocking Time
126
127### Chrome DevTools MCP (Future)
128Consider integrating:
129- `@modelcontextprotocol/server-puppeteer` for automated testing
130- Chrome Performance API for programmatic metrics
131- Puppeteer for headless performance testing
132
133Example:
134```javascript
135import puppeteer from 'puppeteer';
136
137const browser = await puppeteer.launch();
138const page = await browser.newPage();
139
140// Enable Performance monitoring
141await page.tracing.start({ screenshots: true });
142await page.goto('https://localhost:8888');
143
144// Wait for boot
145await page.waitForFunction(() => window.acBOOT_COMPLETE);
146
147const trace = await page.tracing.stop();
148// Analyze trace for bottlenecks
149```
150
151## Current Bottlenecks (as of Nov 2024)
152
1531. ~~Typeface preload: 5689ms~~ ✅ FIXED
1542. Auth0 initialization: ~500-1000ms
1553. MatrixChunky8 preload: ~14ms (now skipped)
1564. Network latency in dev containers
157
158## Metrics to Track
159
160- **Boot Start to Ready**: Target <2s
161- **Boot Start to First Paint**: Target <500ms
162- **Disk Load Time**: Target <1s
163- **TypeScript/Module Evaluation**: Target <300ms
164
165## Future Optimizations
166
167- [ ] Code splitting for pieces (dynamic imports)
168- [ ] Service worker caching
169- [ ] Brotli compression in production
170- [ ] HTTP/3 support
171- [ ] WebAssembly for compute-heavy pieces
172- [ ] IndexedDB caching for fonts/assets
173- [ ] Resource hints (preconnect, dns-prefetch)