From 6228abf2d5a9bfed7af47f65a459e100ec9aac72 Mon Sep 17 00:00:00 2001
From: Satya Patel <satyapatel111@gmail.com>
Date: Mon, 2 Feb 2026 13:11:48 -0800
Subject: [PATCH 1/3] perf(marketing): improve mobile Lighthouse score from 42
 to 90

- Dynamic import below-fold sections (Video, TrustedBy, Features, WallOfLove, FAQ, CTA)
- Remove Three.js ShaderAnimation from hero (was opacity 0.01, drops ~600 KiB)
- Disable PostHog session recording on marketing (saves ~88 KiB)
- Defer Tally script from afterInteractive to lazyOnload
- Remove priority/eager from below-fold images (TrustedBy logos, video thumbnail)
- Add optimizePackageImports for framer-motion, react-icons, lucide-react
---
 apps/marketing/next.config.ts                 |  5 ++++
 .../components/HeroSection/HeroSection.tsx    | 11 --------
 .../TrustedBySection/TrustedBySection.tsx     |  2 --
 .../components/VideoSection/VideoSection.tsx  |  1 -
 apps/marketing/src/app/layout.tsx             |  5 +---
 apps/marketing/src/app/page.tsx               | 28 +++++++++++++++----
 apps/marketing/src/instrumentation-client.ts  |  1 +
 7 files changed, 29 insertions(+), 24 deletions(-)

diff --git a/apps/marketing/next.config.ts b/apps/marketing/next.config.ts
index 12025d8b7ef..4838e9c122f 100644
--- a/apps/marketing/next.config.ts
+++ b/apps/marketing/next.config.ts
@@ -17,6 +17,11 @@ const config: NextConfig = {
 	reactCompiler: true,
 	typescript: { ignoreBuildErrors: true },
 
+	// Tree-shake barrel exports from heavy libraries to reduce bundle size
+	experimental: {
+		optimizePackageImports: ["framer-motion", "react-icons", "lucide-react"],
+	},
+
 	images: {
 		remotePatterns: [
 			{
diff --git a/apps/marketing/src/app/components/HeroSection/HeroSection.tsx b/apps/marketing/src/app/components/HeroSection/HeroSection.tsx
index 54ca7ff1a83..12b9e88a6af 100644
--- a/apps/marketing/src/app/components/HeroSection/HeroSection.tsx
+++ b/apps/marketing/src/app/components/HeroSection/HeroSection.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import { COMPANY } from "@superset/shared/constants";
-import dynamic from "next/dynamic";
 import { useState } from "react";
 import { FaGithub } from "react-icons/fa";
 import { DownloadButton } from "../DownloadButton";
@@ -9,22 +8,12 @@ import { WaitlistModal } from "../WaitlistModal";
 import { ProductDemo } from "./components/ProductDemo";
 import { TypewriterText } from "./components/TypewriterText";
 
-const ShaderAnimation = dynamic(
-	() =>
-		import("../../../components/ui/shader-animation").then(
-			(mod) => mod.ShaderAnimation,
-		),
-	{ ssr: false },
-);
-
 export function HeroSection() {
 	const [isWaitlistOpen, setIsWaitlistOpen] = useState(false);
 
 	return (
 		<div>
 			<div className="flex mt-14 min-h-[calc(100svh-64px)] items-center overflow-hidden">
-				<ShaderAnimation opacity={0.01} speed={0.005} intensity={0.00015} />
-
 				<div className="relative w-full max-w-[1600px] mx-auto px-4 sm:px-8 lg:px-[30px] py-8 sm:py-12 lg:py-16">
 					<div className="grid grid-cols-1 lg:grid-cols-[2fr_3fr] gap-8 lg:gap-16 items-center">
 						<div className="space-y-6 sm:space-y-8">
diff --git a/apps/marketing/src/app/components/TrustedBySection/TrustedBySection.tsx b/apps/marketing/src/app/components/TrustedBySection/TrustedBySection.tsx
index 3569272b3e0..64e315fc001 100644
--- a/apps/marketing/src/app/components/TrustedBySection/TrustedBySection.tsx
+++ b/apps/marketing/src/app/components/TrustedBySection/TrustedBySection.tsx
@@ -72,8 +72,6 @@ export function TrustedBySection() {
 										marginTop: client?.marginTop ?? 0,
 									}}
 									unoptimized
-									loading="eager"
-									priority
 								/>
 								{client.text && (
 									<span className="ml-2 mt-1 font-medium text-foreground text-[1.3rem]">
diff --git a/apps/marketing/src/app/components/VideoSection/VideoSection.tsx b/apps/marketing/src/app/components/VideoSection/VideoSection.tsx
index bd2507d9e53..650ca32e633 100644
--- a/apps/marketing/src/app/components/VideoSection/VideoSection.tsx
+++ b/apps/marketing/src/app/components/VideoSection/VideoSection.tsx
@@ -46,7 +46,6 @@ export function VideoSection() {
 									alt="Video thumbnail"
 									fill
 									className="object-cover"
-									priority
 									sizes="(max-width: 768px) 100vw, (max-width: 1280px) 90vw, 1280px"
 								/>
 								<div className="absolute inset-0 bg-black/0 transition-colors duration-300 group-hover:bg-black/30" />
diff --git a/apps/marketing/src/app/layout.tsx b/apps/marketing/src/app/layout.tsx
index 69ad1ffa8c4..6b72d72a707 100644
--- a/apps/marketing/src/app/layout.tsx
+++ b/apps/marketing/src/app/layout.tsx
@@ -111,10 +111,7 @@ export default function RootLayout({
 			suppressHydrationWarning
 		>
 			<head>
-				<Script
-					src="https://tally.so/widgets/embed.js"
-					strategy="afterInteractive"
-				/>
+				<Script src="https://tally.so/widgets/embed.js" strategy="lazyOnload" />
 				<OrganizationJsonLd />
 				<SoftwareApplicationJsonLd />
 				<WebsiteJsonLd />
diff --git a/apps/marketing/src/app/page.tsx b/apps/marketing/src/app/page.tsx
index 033d030bedd..4ed11284d40 100644
--- a/apps/marketing/src/app/page.tsx
+++ b/apps/marketing/src/app/page.tsx
@@ -1,12 +1,28 @@
 "use client";
 
-import { CTASection } from "./components/CTASection";
-import { FAQSection } from "./components/FAQSection";
-import { FeaturesSection } from "./components/FeaturesSection";
+import dynamic from "next/dynamic";
+
 import { HeroSection } from "./components/HeroSection";
-import { TrustedBySection } from "./components/TrustedBySection";
-import { VideoSection } from "./components/VideoSection";
-import { WallOfLoveSection } from "./components/WallOfLoveSection";
+
+// Lazy load below-fold sections to reduce initial JS bundle (~304 KiB unused JS)
+const VideoSection = dynamic(() =>
+	import("./components/VideoSection").then((mod) => mod.VideoSection),
+);
+const TrustedBySection = dynamic(() =>
+	import("./components/TrustedBySection").then((mod) => mod.TrustedBySection),
+);
+const FeaturesSection = dynamic(() =>
+	import("./components/FeaturesSection").then((mod) => mod.FeaturesSection),
+);
+const WallOfLoveSection = dynamic(() =>
+	import("./components/WallOfLoveSection").then((mod) => mod.WallOfLoveSection),
+);
+const FAQSection = dynamic(() =>
+	import("./components/FAQSection").then((mod) => mod.FAQSection),
+);
+const CTASection = dynamic(() =>
+	import("./components/CTASection").then((mod) => mod.CTASection),
+);
 
 export default function Home() {
 	return (
diff --git a/apps/marketing/src/instrumentation-client.ts b/apps/marketing/src/instrumentation-client.ts
index b68e1ba0409..262210e7e2d 100644
--- a/apps/marketing/src/instrumentation-client.ts
+++ b/apps/marketing/src/instrumentation-client.ts
@@ -16,6 +16,7 @@ posthog.init(env.NEXT_PUBLIC_POSTHOG_KEY, {
 	cross_subdomain_cookie: true,
 	persistence: "cookie",
 	persistence_name: POSTHOG_COOKIE_NAME,
+	disable_session_recording: true,
 	loaded: (posthog) => {
 		posthog.register({
 			app_name: "marketing",

From d6eb1ec6a62ebba1422c62e81ab340195ccae2b3 Mon Sep 17 00:00:00 2001
From: Satya Patel <satyapatel111@gmail.com>
Date: Mon, 2 Feb 2026 13:20:13 -0800
Subject: [PATCH 2/3] chore(marketing): remove redundant optimizePackageImports
 config

---
 apps/marketing/next.config.ts | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/apps/marketing/next.config.ts b/apps/marketing/next.config.ts
index 4838e9c122f..12025d8b7ef 100644
--- a/apps/marketing/next.config.ts
+++ b/apps/marketing/next.config.ts
@@ -17,11 +17,6 @@ const config: NextConfig = {
 	reactCompiler: true,
 	typescript: { ignoreBuildErrors: true },
 
-	// Tree-shake barrel exports from heavy libraries to reduce bundle size
-	experimental: {
-		optimizePackageImports: ["framer-motion", "react-icons", "lucide-react"],
-	},
-
 	images: {
 		remotePatterns: [
 			{

From c7d8ede81a3252eeb40afd3e247f6d44b13fd76c Mon Sep 17 00:00:00 2001
From: Satya Patel <satyapatel111@gmail.com>
Date: Mon, 2 Feb 2026 17:29:28 -0800
Subject: [PATCH 3/3] fix(marketing): add accessible name to icon button and
 increase touch target size

---
 .../FeaturesSection/components/OpenInDemo/OpenInDemo.tsx        | 1 +
 .../src/app/components/WallOfLoveSection/WallOfLoveSection.tsx  | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/marketing/src/app/components/FeaturesSection/components/OpenInDemo/OpenInDemo.tsx b/apps/marketing/src/app/components/FeaturesSection/components/OpenInDemo/OpenInDemo.tsx
index 43b71b1f27a..6e70896314d 100644
--- a/apps/marketing/src/app/components/FeaturesSection/components/OpenInDemo/OpenInDemo.tsx
+++ b/apps/marketing/src/app/components/FeaturesSection/components/OpenInDemo/OpenInDemo.tsx
@@ -100,6 +100,7 @@ export function OpenInDemo() {
 						<button
 							type="button"
 							className="flex items-center px-2 text-white/90 bg-[#2a2a2a] border border-white/10 rounded-r-md hover:bg-[#3a3a3a] transition-colors"
+							aria-label="Select IDE"
 						>
 							<HiChevronDown className="w-3.5 h-3.5" />
 						</button>
diff --git a/apps/marketing/src/app/components/WallOfLoveSection/WallOfLoveSection.tsx b/apps/marketing/src/app/components/WallOfLoveSection/WallOfLoveSection.tsx
index 3e92e375b26..0f778254d57 100644
--- a/apps/marketing/src/app/components/WallOfLoveSection/WallOfLoveSection.tsx
+++ b/apps/marketing/src/app/components/WallOfLoveSection/WallOfLoveSection.tsx
@@ -68,7 +68,7 @@ function TestimonialCard({ testimonial }: { testimonial: Testimonial }) {
 						e.stopPropagation();
 						setShowOriginal(!showOriginal);
 					}}
-					className="group mt-2 text-xs text-muted-foreground hover:text-foreground transition-colors"
+					className="group mt-2 py-2 text-xs text-muted-foreground hover:text-foreground transition-colors"
 				>
 					<span className="group-hover:hidden">
 						{showOriginal ? "Translated" : "Translated"}