Mobile LCP: inline splash logo as data URI; revert harmful image preload

- The high-priority <link rel=preload as=image> 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.
This commit is contained in:
jwinterm
2026-06-06 19:03:38 -04:00
parent 945529af33
commit 065cabc38c
3 changed files with 10 additions and 4 deletions
-3
View File
@@ -105,9 +105,6 @@ export default function Home() {
return (
<main className="relative flex flex-col items-center overflow-hidden">
{/* The splash logo is the homepage LCP element on mobile; fetch it immediately
so it isn't queued behind render-blocking CSS/JS. */}
<link rel="preload" as="image" href="/images/branding/splash-such.svg" fetchPriority="high" />
<DynamicBackground nebulaPosition={nebulaPosition} visible={entered} />
<Header floating visible={entered} />