From 065cabc38c5df3624a081fd47c83401ab74ff81c Mon Sep 17 00:00:00 2001 From: jwinterm Date: Sat, 6 Jun 2026 19:03:38 -0400 Subject: [PATCH] Mobile LCP: inline splash logo as data URI; revert harmful image preload - The high-priority stole bandwidth from render- blocking CSS on 4G, pushing FCP 1.1s -> 2.2s and the score 82 -> 70. Removed. - TBT is ~30ms (not main-thread bound), so the FCP->LCP gap was the logo's network fetch. Inline the mark as a data URI: zero request, paints with FCP. LCP should drop toward FCP and stop swinging run-to-run. --- apps/web/src/app/page.tsx | 3 --- apps/web/src/components/landing/hero-splash.tsx | 5 ++++- apps/web/src/components/landing/splash-logo-data.ts | 6 ++++++ 3 files changed, 10 insertions(+), 4 deletions(-) create mode 100644 apps/web/src/components/landing/splash-logo-data.ts diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx index 7bbbdc3..20201d3 100644 --- a/apps/web/src/app/page.tsx +++ b/apps/web/src/app/page.tsx @@ -105,9 +105,6 @@ export default function Home() { return (
- {/* The splash logo is the homepage LCP element on mobile; fetch it immediately - so it isn't queued behind render-blocking CSS/JS. */} -
diff --git a/apps/web/src/components/landing/hero-splash.tsx b/apps/web/src/components/landing/hero-splash.tsx index daf7ee5..9ef31f4 100644 --- a/apps/web/src/components/landing/hero-splash.tsx +++ b/apps/web/src/components/landing/hero-splash.tsx @@ -4,6 +4,7 @@ import Link from "next/link"; import { motion, useReducedMotion } from "framer-motion"; import { ChevronDown, LayoutGrid, Smartphone, Wrench, Info } from "lucide-react"; import { useEffect, useRef, useState } from "react"; +import { SPLASH_LOGO_SRC } from "./splash-logo-data"; const navButtons = [ { label: "Portfolio", href: "/products", Icon: LayoutGrid, corner: "left-4 top-6 sm:left-6 sm:top-24 lg:left-8 lg:top-32" }, @@ -110,8 +111,10 @@ export function HeroSplash({ onEnter, sectionRef, leaving }: { onEnter: () => vo className={entering ? "splash-zoom" : undefined} style={{ filter: entering ? "url(#splash-water)" : undefined }} > + {/* Data URI (no network request) so the logo paints with FCP; it is the + mobile LCP element. */}