# Frontend: SEO & Performance

---
**Last Updated:** 2025-01-17  
**Phase:** Phase 0 (Planning)  
**Status:** Draft  
**Owner:** Frontend Architect, SEO  
**References:**
- `/docs/content-structure.md`
- `/docs/frontend/architecture.md`
- `/docs/project-overview.md`
---

## 1. Goals
- Ensure good indexation for marketing/landing pages; keep the app fast for data-heavy views.
- Hit Core Web Vitals targets where applicable; design for fast perceived performance in app flows.

## 2. SEO (marketing pages)
- Use SSR/SSG for landing/pricing/FAQ pages.
- Semantic markup; clean URLs; Open Graph/Twitter cards.
- sitemap/robots via backend/infra; keep URL ownership on frontend.

## 3. Core Web Vitals (targets)
- LCP < 2.5 s, CLS < 0.1, INP < 200 ms on marketing pages.

## 4. Asset & JS Optimization
- Modern image formats (WebP/AVIF) with `srcset/picture`; lazy-load non-critical blocks.
- Code splitting by route/feature; dynamically load heavy components (tables with virtualization, charts, diff/trace viewers).
- Minimize global state; prefer streaming data in RSC where possible.

## 5. Data-Heavy Views
- Virtualize large tables (transactions, events); paginate server-side.
- Background refetch for webhook-driven updates; avoid full-page reloads.
- Show skeletons and incremental data rather than blank states.

## 6. Analytics & Events
- Track funnel: onboarding steps, connection success/failure, categorization actions, approvals, billing changes, report exports.
- Respect consent/privacy; avoid sending PII in analytics events; provide trace IDs for support paths.