Improve page load times and rendering

2026-05-26 06:59:52 -06:00
parent 6b45a2e5d0
commit 3be188a3cc
29 changed files with 467 additions and 176 deletions
@@ -6,10 +6,11 @@ import { MessagesProvider } from "./contexts/MessagesContext";
 import messages from "../messages/en/index";
 import { ASSETS, getAssetPath } from "../lib/assetUtils";
 import "./globals.css";
-import ConditionalNavigation from "./components/navigation/ConditionalNavigation";

-/** Header reads `cr_session` via Server Components; must not use prerendered guest HTML. */
-export const dynamic = "force-dynamic";
+// `force-dynamic` is now scoped to `(app)/layout.tsx` and `(admin)/layout.tsx`
+// (the only groups that read the session via `ConditionalNavigation`). Marketing
+// renders a client-side `MarketingNavigation` so its HTML can be statically
+// optimized — TTFB drops to CDN speed for guests.

 const inter = Inter({
  subsets: ["latin"],
@@ -34,7 +35,9 @@ const spaceGrotesk = Space_Grotesk({
  weight: ["400", "500", "700"],
  variable: "--font-space-grotesk",
  display: "swap",
-  preload: true,
+  // Below-the-fold (subtitle in `ContentLockup` only). Skipping preload keeps
+  // the marketing critical-path bytes for Inter + Bricolage.
+  preload: false,
  fallback: ["system-ui", "arial"],
 });

@@ -116,15 +119,32 @@ export default function RootLayout({ children }: { children: ReactNode }) {

  return (
    <html lang="en" className="font-sans">
+      <head>
+        <link
+          rel="preload"
+          as="image"
+          href={getAssetPath(ASSETS.AVATAR_1)}
+          type="image/svg+xml"
+        />
+        <link
+          rel="preload"
+          as="image"
+          href={getAssetPath(ASSETS.AVATAR_2)}
+          type="image/svg+xml"
+        />
+        <link
+          rel="preload"
+          as="image"
+          href={getAssetPath(ASSETS.AVATAR_3)}
+          type="image/svg+xml"
+        />
+      </head>
      <body
        className={`${inter.variable} ${bricolageGrotesque.variable} ${spaceGrotesk.variable}`}
      >
        <MessagesProvider messages={messages}>
          <AuthModalProvider>
-            <div className="min-h-screen flex flex-col">
-              <ConditionalNavigation />
-              {children}
-            </div>
+            <div className="min-h-screen flex flex-col">{children}</div>
          </AuthModalProvider>
        </MessagesProvider>
      </body>