perf+fix: audit phase 0/1 — parallel textures, dead weight, two real bugs

Findings from a full frontend audit (static read + live instrumentation of
production). This covers the "bleeding" and performance phases.

Bug fixes:
- StatsPanel branch collapse/expand never re-rendered. Two Svelte 5 defects:
  $state(new Set()) is not proxied (proxy.js bails on non-object/array
  prototypes), so .add()/.delete() were untracked; and the Svelte 4
  `x = x` reactivity idiom is a no-op in runes mode, where sources use a
  strict `equals` comparator. Switched to SvelteSet and dropped the
  self-assignment. Verified: aria-expanded now flips and rows 28<->24.
- The closed stats panel's gold box-shadow (8px offset + 80px blur) bled
  ~88px past its right edge, painting a permanent olive stripe down the
  left of the viewport on every page view. Offset the closed transform
  past the shadow.
- data.ts shipped a placeholder repoUrl (github.com/yourusername/...), a
  live 404 on the node describing this very site. Also removed the
  "Tailwind CSS" techStack claim; it is not a dependency of this project.

Performance:
- nodes.ts awaited Assets.load() inside the node loop, serialising ~56 icon
  round-trips before the tree could render or accept input. Now one
  parallel batch. Measured: all 78 tree icon requests start at ~28ms and
  complete within ~618ms.
- isLoading was cleared right after app.init(), before a single texture
  existed, so the spinner resolved onto an empty screen. Moved to after
  the scene graph is built.
- Renderer left antialias on (costly, ~no benefit on soft glow circles)
  and resolution/autoDensity at defaults (blurry on HiDPI). Now
  antialias:false, resolution:min(dpr,2), autoDensity, high-performance.
- cacheAsTexture on the fully-static gradient (16 full-screen fills) and
  vignette (13); interactiveChildren:false on background containers.
- Dust ticker allocated a fresh closure per frame via forEach; replaced
  with a named function and an indexed loop.

Dead weight:
- static/{headshot,profile}.jpg.original (8.6MB, 83% of the static payload)
  were committed and deployed verbatim by adapter-static, publicly
  fetchable and referenced by nothing. Moved to a gitignored assets-src/
  so the full-res sources stay on disk without shipping.
- precompress:true so nginx gzip_static/brotli_static have siblings to
  serve (the origin currently sends everything uncompressed).

build/ 11.13MB -> 3.7MB. JS wire 727.6KB raw -> 232KB gzip / 202.7KB brotli.
svelte-check clean, 14/14 tests pass.

Note: the matching nginx change lives in the gitignored homelab/default.conf
and must be applied to the container separately.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
TehRiehlDealandClaude Opus 5 committed 2026-08-09 00:06:01 -07:00
1 parent ad258f7f9f
commit 8874b35998
9 files changed
+75 -36

No files matched your search

+15 -6
View File
@@ -1,5 +1,6 @@
<script lang="ts">
import { onMount } from 'svelte';
import { SvelteSet } from 'svelte/reactivity';
import { Application, Container } from 'pixi.js';
import type { TreeNode } from '$lib/data';
import { categoryColorHex } from '$lib/theme';
@@ -45,7 +46,9 @@
// Stats panel state
let statsPanelVisible = $state(false);
let expandedBranches = $state(new Set<string>(BRANCH_IDS)); // All expanded by default
// SvelteSet, not $state(new Set()) — Svelte 5 does not proxy a plain Set, so
// .add()/.delete() would be untracked and the panel would never re-render.
let expandedBranches = new SvelteSet<string>(BRANCH_IDS); // All expanded by default
function openModal(node: TreeNode) {
selectedNode = node;
@@ -81,7 +84,6 @@
} else {
expandedBranches.add(branchId);
}
expandedBranches = expandedBranches; // Trigger reactivity
}
// Stats calculations (reactive)
@@ -110,16 +112,18 @@
await app.init({
background: '#05050a',
resizeTo: container,
antialias: true
// The scene is soft glow circles — MSAA costs fill rate and buys almost
// nothing here. Sharpness comes from rendering at device resolution instead.
antialias: false,
resolution: Math.min(window.devicePixelRatio || 1, 2),
autoDensity: true,
powerPreference: 'high-performance'
});
// PixiJS owns this canvas, not Svelte — mounting it directly is intentional.
// eslint-disable-next-line svelte/no-dom-manipulating
container.appendChild(app.canvas);
// Hide loading indicator - PixiJS is ready, welcome title will be LCP
isLoading = false;
// Background layers (gradient → nebula → stars → dust → vignette)
const bg = createBackground(app, isMobile);
@@ -149,6 +153,11 @@
}
});
// Textures are loaded and the scene graph is built — only now is the canvas
// genuinely ready. (This used to fire right after app.init(), so the spinner
// resolved onto an empty screen.)
isLoading = false;
// Pan / zoom / parallax + keyboard navigation
const detachPanZoom = attachPanZoom(controller, {
onTooltipMove: (x, y) => {