Performance Fix Implementation Plan

Executive Summary

Lighthouse scores below target. This plan addresses CLS (0.534 → 0), Performance (50 → 90+), and TBT (920ms reduction).

Target Scores:

Performance: 90+
Accessibility: Already 100
Best Practices: Already 100
SEO: Already 50 (meta tags needed)
CLS: 0 → <0.1
TBT: <200ms

Issue 1: Cumulative Layout Shift (CLS)

Root Cause Analysis

Culprit	Score	Location
`#grid-view` display switching	0.534	index.html:1105
Web font loading	Indirect	Google Fonts
Datastar rendering	Indirect	Dynamic content

Fix 1.1: Explicit Min-Height for Grid View

File: src/styles/card.css

Current (lines 13-17):

#grid-view {
  width: 100%;
  max-width: 100%;
  min-height: 400px;  /* Too small - causes shift */
}

Change to:

#grid-view {
  width: 100%;
  max-width: 100%;
  min-height: 85vh;  /* Reserve space upfront */
  contain: layout style;
}

Fix 1.2: Add Collection View Min-Height

File: src/styles/card.css

Add after line 19:

#collection-view {
  width: 100%;
  max-width: 100%;
  min-height: 85vh;
  contain: layout style;
}

#collection-view[data-show="false"] {
  display: none !important;
}

Issue 2: Style & Layout Blocking (TBT)

Root Cause Analysis

Lighthouse shows 2,273ms in Style & Layout.

Suspected causes:

renderGrid() effect on #grid element
Multiple signal initializations
Datastar reactivity chain

Fix 2.1: Optimize Data-Signal

File: index.html

Current data-signal (line 1121) is 2,200+ characters. This causes:

Parse overhead
Signal subscription overhead

Reduce signals to essential only:

data-signal="{ 
  showGridOverlay: false, 
  isPaused: false,
  // Move collection-specific signals to lazy initialization
  // Only keep global state signals here
}"

Fix 2.2: Add Content Visibility

File: src/styles/card.css

#grid-view {
  /* ... min-height from Fix 1.1 ... */
  content-visibility: auto;
  contain-intrinsic-size: 5000px;
}

Issue 3: Unused CSS (10KB)

Root Cause Analysis

Bundle CSS has unused rules from:

table.css - Not used initially
animations.css - Conditional
Print styles - Never used

Fix 3.1: Split Critical CSS

File: scripts/build.js or vite.config.js

Add critical CSS extraction:

// Extract inline critical styles
// Delay loading non-critical bundles

Fix 3.2: Lazy Load Collections CSS

The collections-page.css loads on every page but only needed when collection opens.

Issue 4: Web Font Loading (CLS Indirect)

Fix 4.1: Font Display Swap

Google Fonts URL in index.html needs font-display=swap.

Current:

https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap

Already has display=swap. Root cause may be FOIT/FOUT timing.