Improve page load performance with lazy loading, caching, and font cleanup

next.config.mjs

@@ -10,7 +10,7 @@ const withMDX = createMDX();
 const config = {
   reactStrictMode: true,
   experimental: {
-    optimizePackageImports: ["@phosphor-icons/react"],
+    optimizePackageImports: ["@phosphor-icons/react", "lucide-react"],
   },
   turbopack: {
     root: __dirname,

src/app/global.css

@@ -4,59 +4,47 @@
 /* Delight Font Family */
 @font-face {
     font-family: "Delight";
-    src:
-        url("/fonts/delight/Web-TT/Delight-Regular.woff2") format("woff2"),
-        url("/fonts/delight/Web-TT/Delight-Regular.woff") format("woff");
+    src: url("/fonts/delight/Web-TT/Delight-Regular.woff2") format("woff2");
     font-weight: 400;
     font-style: normal;
     font-display: swap;
 }
 
 @font-face {
     font-family: "Delight";
-    src:
-        url("/fonts/delight/Web-TT/Delight-Medium.woff2") format("woff2"),
-        url("/fonts/delight/Web-TT/Delight-Medium.woff") format("woff");
+    src: url("/fonts/delight/Web-TT/Delight-Medium.woff2") format("woff2");
     font-weight: 500;
     font-style: normal;
     font-display: swap;
 }
 
 @font-face {
     font-family: "Delight";
-    src:
-        url("/fonts/delight/Web-TT/Delight-SemiBold.woff2") format("woff2"),
-        url("/fonts/delight/Web-TT/Delight-SemiBold.woff") format("woff");
+    src: url("/fonts/delight/Web-TT/Delight-SemiBold.woff2") format("woff2");
     font-weight: 600;
     font-style: normal;
     font-display: swap;
 }
 
 @font-face {
     font-family: "Delight";
-    src:
-        url("/fonts/delight/Web-TT/Delight-Bold.woff2") format("woff2"),
-        url("/fonts/delight/Web-TT/Delight-Bold.woff") format("woff");
+    src: url("/fonts/delight/Web-TT/Delight-Bold.woff2") format("woff2");
     font-weight: 700;
     font-style: normal;
     font-display: swap;
 }
 
 @font-face {
     font-family: "Delight";
-    src:
-        url("/fonts/delight/Web-TT/Delight-ExtraBold.woff2") format("woff2"),
-        url("/fonts/delight/Web-TT/Delight-ExtraBold.woff") format("woff");
+    src: url("/fonts/delight/Web-TT/Delight-ExtraBold.woff2") format("woff2");
     font-weight: 800;
     font-style: normal;
     font-display: swap;
 }
 
 @font-face {
     font-family: "Delight";
-    src:
-        url("/fonts/delight/Web-TT/Delight-Black.woff2") format("woff2"),
-        url("/fonts/delight/Web-TT/Delight-Black.woff") format("woff");
+    src: url("/fonts/delight/Web-TT/Delight-Black.woff2") format("woff2");
     font-weight: 900;
     font-style: normal;
     font-display: swap;

src/components/helpers/network-toggle.tsx

@@ -3,8 +3,8 @@ import type { NexusNetwork } from "@avail-project/nexus-core";
 import { useEffect, useState } from "react";
 
 import { useAnalytics } from "@/hooks/use-analytics";
+import { NETWORK_KEY } from "@/lib/constants";
 import { getItem, setItem } from "@/lib/local-storage";
-import { NETWORK_KEY } from "@/providers/Web3Provider";
 import { useNexus } from "../nexus/NexusProvider";
 import {
   Select,

src/components/mdx/themed-image.tsx

@@ -6,10 +6,13 @@ export function ThemedImage({
   light,
   dark,
   alt,
+  priority = false,
 }: {
   light: string;
   dark: string;
   alt: string;
+  /** Set to true for hero/above-fold images to avoid delaying LCP */
+  priority?: boolean;
 }) {
   const dialogRef = useRef<HTMLDialogElement>(null);
 
@@ -26,6 +29,8 @@ export function ThemedImage({
         <img
           src={light}
           alt={alt}
+          loading={priority ? "eager" : "lazy"}
+          decoding={priority ? "sync" : "async"}
           className="w-full border border-border rounded-md"
         />
       </button>
@@ -38,6 +43,8 @@ export function ThemedImage({
         <img
           src={dark}
           alt={alt}
+          loading={priority ? "eager" : "lazy"}
+          decoding={priority ? "sync" : "async"}
           className="w-full border border-border rounded-md"
         />
       </button>

src/components/showcase/showcase-wrapper.tsx

@@ -2,8 +2,8 @@
 import { Check, X } from "@phosphor-icons/react";
 import type React from "react";
 import { useEffect, useState } from "react";
+import { NETWORK_KEY } from "@/lib/constants";
 import { getItem } from "@/lib/local-storage";
-import { NETWORK_KEY } from "@/providers/Web3Provider";
 import NetworkToggle from "../helpers/network-toggle";
 import { PreviewPanel } from "../helpers/preview-panel";
 import { Toggle } from "../ui/toggle";

src/hooks/use-posthog-identify.ts

@@ -11,8 +11,8 @@ import {
   track,
   unsetSuperProperties,
 } from "@/lib/analytics/posthog";
+import { NETWORK_KEY } from "@/lib/constants";
 import { getItem } from "@/lib/local-storage";
-import { NETWORK_KEY } from "@/providers/Web3Provider";
 
 /**
  * Hash a wallet address using SHA-256 for privacy-preserving identification

src/lib/constants.ts

@@ -0,0 +1,2 @@
+/** localStorage key for the Nexus network selection (mainnet/testnet) */
+export const NETWORK_KEY = "nexus-elements-network-key";

src/providers/PostHogProvider.tsx

@@ -30,7 +30,12 @@ interface PostHogProviderProps {
  */
 export function PostHogProvider({ children }: PostHogProviderProps) {
   useEffect(() => {
-    initPostHog();
+    // Defer PostHog init until browser is idle to avoid competing with hydration
+    if ("requestIdleCallback" in window) {
+      requestIdleCallback(() => initPostHog());
+    } else {
+      setTimeout(() => initPostHog(), 2000);
+    }
   }, []);
 
   // Don't wrap with provider if PostHog is not configured

src/providers/Web3Provider.tsx

@@ -25,6 +25,7 @@ import {
 import { PostHogIdentify } from "@/components/analytics/PostHogIdentify";
 import NexusProvider from "@/components/nexus/NexusProvider";
 import { Skeleton } from "@/components/ui/skeleton";
+import { NETWORK_KEY } from "@/lib/constants";
 import { getItem, setItem } from "@/lib/local-storage";
 
 const hyperEVM = defineChain({
@@ -128,7 +129,6 @@ const defaultConfig = getDefaultConfig({
 });
 
 const wagmiConfig = createConfig(defaultConfig);
-export const NETWORK_KEY = "nexus-elements-network-key";
 
 function NexusContainer({ children }: Readonly<{ children: React.ReactNode }>) {
   const [network, setNetwork] = useState<NexusNetwork>("mainnet");

vercel.json

@@ -0,0 +1,22 @@
+{
+  "headers": [
+    {
+      "source": "/fonts/(.*)",
+      "headers": [
+        {
+          "key": "Cache-Control",
+          "value": "public, max-age=31536000, immutable"
+        }
+      ]
+    },
+    {
+      "source": "/img/(.*)",
+      "headers": [
+        {
+          "key": "Cache-Control",
+          "value": "public, max-age=31536000, immutable"
+        }
+      ]
+    }
+  ]
+}