My marketing homepage has interactive game demos, scroll animations, and a lot of moving parts. All of that kills first load if you ship it in one bundle. Here's how I kept it fast without cutting the fun stuff.
Server-render the hero, lazy-load the rest. The only thing that needs to be fast is what's above the fold. I keep the hero server-rendered and dependency-light so the Largest Contentful Paint lands early, then defer everything below it.
next/dynamic for the expensive, client-only pieces. The interactive demos are pure client components — no reason to server-render a canvas game:
const GameDemo = dynamic(() => import("./GameDemo"), {
ssr: false,
