39 lines
1.5 KiB
Markdown
39 lines
1.5 KiB
Markdown
# 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.
|