SlpSoftware/aidlc-docs/features/react-frontend/construction/build-and-test/performance-test-instructions.md

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

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)

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