> ## Documentation Index > Fetch the complete documentation index at: https://q.odontox.io/llms.txt > Use this file to discover all available pages before exploring further. # 2026 05 12 public pages perf design # Public Pages Performance — Design **Date:** 2026-05-12 **Status:** Approved **Scope:** Performance optimization for unauthenticated/public pages on `odontox.io` only ## Problem Pingdom HAR (2026-05-12) shows the public landing page at `https://odontox.io/`: * **Fully loaded:** 1575ms * **DOMContentLoaded:** 1315ms * **HTTP→HTTPS redirect:** 146ms wasted round-trip * **Main JS chunk (`BBB4AvFt.js`):** 1.4MB raw / 432KB brotli — single chunk, 387ms total * **CSS chunk (`B0vcyaqK.css`):** 504KB raw / 56KB brotli, 321ms total * **Origin TTFB:** \~384ms (`server-timing: cfOrigin;dur=384`) * **Cache status:** `MISS` on entry chunk + CSS despite immutable headers (cold edge node) Root cause investigation (`ui/vite.config.ts`, `ui/src/main.tsx`, lazy-route audit): The public entry chunk is bloated because **dashboard-only deps are statically imported by code that the public landing route ultimately pulls in via the shared React provider tree**. Specifically: the full Radix UI surface, `recharts`, `framer-motion`, `gsap`. The landing page itself does not render these, but they are included in the entry chunk because of import graph reachability. Secondary issues: * No `` for above-the-fold fonts (Poppins woff2) * No `` for `api.odontox.io` * No HSTS preload — every cold visit pays the 146ms redirect * No build-time prerendering — every visitor hydrates a full React tree from a blank shell * Hero / og-image served as PNG/JPEG, not AVIF/WebP ## Scope ### In scope (public routes, root domain `odontox.io` and `www.odontox.io`) * `/` — Landing * `/legal` — Legal hub * `/privacy`, `/terms`, `/book` — Redirects into `/legal` (still need fast first-paint) * `/the-recall-effect` — Marketing page * `/refer`, `/refer-payout-form` — Referral pages * `/logout-success`, `/login-success` — Post-auth transition pages ### Out of scope (untouched) * All authenticated routes (`/dashboard/*`, `/patients/*`, `/clinical/*`, etc.) * Auth subdomain (`id.odontox.io/auth/*`) * Dashboard subdomain (`go.odontox.io/*`) * Patient portal (`portal.odontox.io/*`) * Mobile app, server worker, database, any API endpoint * Any change to authentication, routing, session, or data fetching logic ## Strategy Three independent, revertible layers. Each ships separately; each can be reverted without affecting the others. ### Layer 1 — Build-time prerendering of public routes Add a Vite SSG plugin (`vite-react-ssg` preferred; falls back to `vite-plugin-prerender` if compatibility issues with React 19 + Tailwind v4 emerge during prototyping). For each public route, the plugin renders the React tree at build time and writes `dist//index.html` containing the fully-rendered HTML. Cloudflare Pages serves these directly. React still hydrates on the client using the same JS bundle and the same component tree — only the first paint becomes real content instead of a blank shell. **Code paths unchanged.** The same React components run at build time (Node) and runtime (browser). Hydration uses `hydrateRoot` instead of `createRoot`. **Hydration safety:** components in the public route tree must produce deterministic output. Any `window`, `localStorage`, `document`, `Date.now()`, `Math.random()`, or user-agent-dependent read during render must be gated behind `useEffect` or `useSyncExternalStore`. Plan includes a pre-audit task. ### Layer 2 — Trim the public JS bundle Audit static import graph from the public entry. Identify dashboard-only deps (Radix UI components not used by public routes, `recharts`, `framer-motion`, `gsap`) that are reachable from the public entry via shared providers, layouts, or utility modules. For each such dep: 1. If no public route renders it → split into a chunk that loads only behind authenticated routes via dynamic `import()` at the route boundary. 2. If a public route renders it but only below the fold → lazy-load that section with `React.lazy()` and Suspense. 3. If a public route renders it above the fold → leave alone. The existing `manualChunks` config in `ui/vite.config.ts` already isolates the largest libs (`vendor-dicom`, `vendor-three`, `vendor-pdf`, etc.). This step extends that pattern. ### Layer 3 — Network & asset hygiene In `ui/index.html`: * `` for the two above-the-fold weights (400, 600) * `` and `` * `` for analytics origins In `ui/public/_headers`: * Add `Strict-Transport-Security: max-age=604800; includeSubDomains` initially (1 week). After 1 week of clean traffic, escalate to `max-age=63072000; includeSubDomains; preload` and submit to hstspreload.org. In R2 / asset pipeline: * Convert hero image + og-image to AVIF (primary) + WebP (fallback) * Use `