# Performance Documentation

This document describes the performance optimisations in place for the Restaurant Digital Platform frontend, in support of **Requirement 11.1** (Lighthouse Performance score ≥ 80 on mobile for the Homepage and Menu Page).

---

## Optimisations Already in Place

### 1. Next.js Static Generation — Homepage & Contact Page

`app/page.js` and `app/contact/page.js` are **statically generated** at build time (Next.js default for server components with no dynamic data). This means the HTML is pre-rendered and served instantly from the CDN/cache, resulting in a very low **Time to First Byte (TTFB)**.

### 2. Next.js SSR — Menu Page

`app/menu/page.js` uses **server-side rendering** with ISR (see below). The full HTML — including all menu items grouped by category — is present in the initial response, satisfying both the SEO requirement (Req 11.2) and enabling fast **First Contentful Paint (FCP)** because the browser does not need to wait for client-side data fetching.

### 3. Next.js `Image` Component — WebP/AVIF & Lazy Loading

All images use the Next.js `<Image>` component, which provides:

- **Automatic format conversion** to WebP and AVIF (configured in `next.config.js` via `images.formats: ['image/avif', 'image/webp']`), reducing image payload by 30–50 % compared to JPEG/PNG.
- **Responsive `srcset`** generation via the `sizes` prop, so mobile devices download appropriately-sized images.
- **Lazy loading** by default for below-the-fold images (`loading="lazy"`). The hero image uses `priority` to preload it eagerly, avoiding LCP penalty.
- **Minimum cache TTL** of 60 seconds (`images.minimumCacheTTL: 60`).

### 4. Tailwind CSS — Purged Production Bundle

Tailwind CSS is configured with content paths in `tailwind.config.js`. In production (`next build`), PostCSS/Tailwind **purges all unused utility classes**, resulting in a CSS bundle typically under 10 KB (gzipped). There are no large CSS framework payloads.

### 5. Code Splitting via Next.js App Router

The App Router automatically **code-splits** each page into its own JavaScript chunk. Customers loading the homepage do not download the JavaScript for the admin dashboard or checkout flow. This keeps the **Total Blocking Time (TBT)** and **Time to Interactive (TTI)** low on each page.

### 6. Incremental Static Regeneration (ISR) — 60 s Revalidation

Data-fetching pages (`app/page.js` for featured meals, `app/menu/page.js` for the full menu) use ISR with a 60-second revalidation window:

```js
next: { revalidate: 60 }
```

This means:
- The first visitor after a revalidation period triggers a background re-fetch.
- All subsequent visitors within the 60-second window receive the cached, pre-rendered HTML — no database round-trip, no API latency.

---

## Running Lighthouse Manually

To audit the live site locally:

1. Start the development server:
   ```bash
   npm run dev
   ```
   Or start the production build:
   ```bash
   npm run build && npm run start
   ```

2. Run Lighthouse against the homepage:
   ```bash
   npx lighthouse http://localhost:3000 --view
   ```

3. Run Lighthouse against the menu page:
   ```bash
   npx lighthouse http://localhost:3000/menu --view
   ```

4. For a saved HTML report (also available via the `lighthouse` npm script):
   ```bash
   npm run lighthouse
   # Report saved to ./lighthouse-report.html
   ```

### Lighthouse Flags for Mobile Simulation

Lighthouse defaults to a **mobile** emulation profile (Moto G4, throttled 4G). To explicitly target mobile:

```bash
npx lighthouse http://localhost:3000 --preset=perf --emulated-form-factor=mobile --view
```

---

## Target Scores (Requirement 11.1)

| Page      | Target Performance (mobile) |
|-----------|-----------------------------|
| Homepage  | ≥ 80                        |
| Menu Page | ≥ 80                        |

The optimisations above collectively address the main Lighthouse performance metrics:

| Metric                        | Optimisation                                      |
|-------------------------------|---------------------------------------------------|
| First Contentful Paint (FCP)  | Static generation / SSR, ISR caching              |
| Largest Contentful Paint (LCP)| Hero image `priority` preload, WebP/AVIF formats  |
| Total Blocking Time (TBT)     | Code splitting, minimal JS per page               |
| Cumulative Layout Shift (CLS) | `fill` + `aspect-ratio` containers on all images  |
| Speed Index                   | Purged Tailwind CSS, ISR-cached HTML              |