# Performance Test Instructions

## Purpose
Validate that the static marketing site loads fast on a typical FTP/static web host, since page-load speed and SEO basics are explicit requirements (see `aidlc-docs/features/react-frontend/inception/requirements/`).

## Performance Requirements
- **Initial Load (Largest Contentful Paint)**: < 2.5s on a simulated "Fast 3G"/typical mobile connection
- **Bundle Size**: JS + CSS payload kept small (single-page static site, no heavy client-side data fetching)
- **Concurrent Users**: Not applicable — static assets served by the host/CDN, no application server to load-test
- **Error Rate**: 0% (no runtime errors in the browser console)

## Setup Performance Test Environment

### 1. Prepare Test Environment
```bash
pnpm run build
pnpm run preview
```
Serves the actual production bundle (`dist/`) locally, which is representative of what a static host would serve.

### 2. Configure Test Parameters
- **Tooling**: Browser DevTools "Lighthouse" panel (or `npx lighthouse <preview-url> --view`)
- **Throttling**: Simulated mobile / Fast 3G, as offered by Lighthouse's default mobile preset

## Run Performance Tests

### 1. Execute Load Test (Lighthouse)
```bash
npx lighthouse http://localhost:4173 --view
```
(Adjust the port to whatever `pnpm run preview` prints.)

### 2. Execute Stress Tests
Not applicable — there is no backend/API to stress-test; the site is purely static assets.

### 3. Analyze Performance Results
- **Response Time / LCP**: Read from the Lighthouse report; target < 2.5s
- **Bundle Size**: Inspect `dist/assets/*.js` and `*.css` sizes after `pnpm run build`
- **Error Rate**: Confirm no console errors during the Lighthouse run
- **Bottlenecks**: Typically font loading (`@fontsource/*`) or unused CSS; check the Lighthouse "Opportunities" section
- **Results Location**: Lighthouse HTML report opened via `--view`, or exported JSON if needed

## Performance Optimization
If performance doesn't meet requirements:
1. Identify bottlenecks from the Lighthouse report (e.g. render-blocking fonts, unused Tailwind classes)
2. Optimize (e.g. font-display swap, purge unused Tailwind utilities via the existing Tailwind config, code-split rarely used components)
3. Rerun `pnpm run build` + Lighthouse to validate improvements

## Status
- **Automated performance gate**: Not part of the current CI; this is a manual pre-deployment check
- **Recommendation**: Run this check once before the first production deployment (Deployment Setup stage) and after any significant asset/dependency change