Status

Draft

Story

**As a** steward,
**I want** the site to be fast and accessible,
**so that** it reflects professional standards.

Acceptance Criteria

1. CLS < 0.1; LCP within target for hero pages; images lazy‑loaded.
2. Keyboard navigation across all interactive elements; visible focus rings.
3. Sentry breadcrumbs for nav/CTA; basic event tracking for key flows.

Tasks / Subtasks

- [ ] Establish baselines and budgets (AC: 1)
  - [ ] Record current build metrics and bundle size from `next build` (note in Completion Notes)
  - [ ] Define budgets: CLS < 0.1, LCP within prior baseline (or ≤ 2.5s on desktop), JS/CSS bundle growth ≤ 10%
- [ ] Font optimization (AC: 1)
  - [ ] Limit loaded fonts to approved weights: Rajdhani 600/700, Kanit 400/500
  - [ ] Remove unused local fonts (DM Serif, Bentham, Share) from `src/app/layout.tsx` and global CSS references
  - [ ] Preload only critical fonts via `next/font/local` (display: 'swap') and avoid redundant weights
- [ ] Image and media performance (AC: 1)
  - [ ] Ensure all non-hero images use lazy loading (Next/Image defaults) and appropriate sizes
  - [ ] Keep hero media `priority` only where necessary to avoid over-fetching
  - [ ] Audit `ImageWithFallback` to ensure it forwards width/height/priority and uses `loading="lazy"` when not priority
  - [ ] Defer heavy media; use poster images and avoid auto-play with sound
- [ ] Motion and reduced-motion (AC: 2)
  - [ ] Respect `prefers-reduced-motion` globally (CSS and framer-motion hooks) and in StickySplit pattern
  - [ ] Avoid scroll‑jacking and ensure passive listeners on scroll/IO
- [ ] Keyboard and focus (AC: 2)
  - [ ] Verify visible focus outlines on links, buttons, inputs (tokenized focus styles if needed)
  - [ ] Ensure logical tab order with new GlobalSidebar and CommandPalette; ESC closes palette; aria attributes present
  - [ ] Add skip-to-content link at top of page
- [ ] Sentry breadcrumbs and event logging (AC: 3)
  - [ ] Add lightweight event util in `src/lib/telemetry.ts` to record nav clicks and primary CTAs to Sentry
  - [ ] Wire into GlobalSidebar link clicks and key CTAs (e.g., Contact CTA on Projects/Process)
- [ ] SEO and IA updates (AC: 1)
  - [ ] Update `src/app/sitemap.ts` to include new routes: `/process/*`, `/studio/*`
  - [ ] Verify metadata titles/descriptions for new pages via `generatePageMetadata`
- [ ] Quality gates
  - [ ] Lint/build pass: `npm run lint` / `npm run build`
  - [ ] Re-measure CLS/LCP after changes; document in Completion Notes; ensure ≤ budget
  - [ ] Confirm no new 4xx/5xx in Sentry (post-deploy checklist)

Dev Notes

- Context
  - PRD Story 1.8. Focus on performance, accessibility, and observability. No schema changes.
  - Sidebar is not collapsible by decision; ensure keyboard and focus handling is robust.
- Relevant Source Tree
  - Fonts/Layout: `src/app/layout.tsx:1`, `src/app/globals.css:1`
  - Images: `src/components/ui/ImageWithFallback.tsx`, usages across pages
  - Navigation/Sidebar/Palette: `src/components/Navigation.tsx` (AdminSidebar), GlobalSidebar/CommandPalette (Story 1.2)
  - Metadata/Sitemap: `src/lib/metadata.ts`, `src/app/sitemap.ts`
  - Sentry: `sentry.client.config.js`, `sentry.server.config.ts`, `sentry.edge.config.ts`

Testing

- Performance
  - Use `next build` output and browser DevTools (Performance tab) to spot LCP elements and layout shifts
  - Verify images have correct `sizes` and lazy loading; ensure minimal CLS
- Accessibility
  - Keyboard-only navigation across core pages; visible focus, skip link works
  - Screen reader quick checks (headings/landmarks/labels)
- Observability
  - Trigger nav/CTA clicks and confirm breadcrumbs appear in Sentry (locally verify logging calls)

Change Log

| Date | Version | Description | Author |
|------|---------|-------------|--------|
| 2025-09-24 | v1 | Initial draft from PRD Story 1.8 | Scrum Master |

Dev Agent Record

Agent Model Used

{{agent_model_name_version}}

Debug Log References



Completion Notes List



File List



QA Results