Phase 5.4 -- Performance & Visual QA

Parent: #762

Scope

Performance

• Bundle analysis (identify large dependencies, tree-shaking effectiveness)
• Code splitting by route (lazy-loaded pages)
• Chart lazy loading (ECharts/Recharts only loaded on pages that use them)
• Image optimization if any
• Lighthouse performance audit (target: 90+ score)
• First Contentful Paint and Time to Interactive benchmarks

Visual QA

• Playwright screenshot baselines for every page (desktop + responsive breakpoints)
• Screenshot comparison workflow for future PRs
• Storybook visual regression baselines for all component stories
• Cross-browser verification (Chrome, Firefox, Safari)

Deliverables

• Bundle analysis report with optimization actions taken
• All routes lazy-loaded
• Lighthouse audit passing >= 90
• Playwright screenshot baselines committed
• Visual regression workflow documented
• Cross-browser verified

Blocked by

• feat: real-time UX and WebSocket-driven animations #790 (real-time UX)
• feat: responsive implementation across all pages #791 (responsive)
• feat: accessibility audit and keyboard navigation #792 (accessibility)