From 89c086398d944be74bbd172e4723ebee88ba8cf1 Mon Sep 17 00:00:00 2001
From: jwinterm <johnwmurphy@gmail.com>
Date: Sun, 7 Jun 2026 17:02:35 -0400
Subject: [PATCH] Fix mobile LCP at the source: inline CSS + drop competing
 image preloads

LCP breakdown showed TTFB 0ms and Element render delay ~2,320ms: the data-URI logo
was ready instantly but couldn't paint until the render-blocking CSS request finished,
and that round-trip varied wildly on throttled 4G (LCP 2.3s -> 6.8s, same code). This
is why the score bounced 71<->96 with no code change.

- experimental.inlineCss: fold the 64 KB CSS into the HTML so there is no separate
  render-blocking stylesheet request on the critical path. Verified: homepage HTML
  now has the CSS inline and zero <link rel=stylesheet>.
- Drop the two header-logo image preloads (both theme variants) that were stealing
  slow-4G bandwidth from the critical path; the header wordmark is not the LCP and is
  hidden during the splash.
---
 apps/web/next.config.js                      | 8 ++++++++
 apps/web/src/components/layout/site-logo.tsx | 6 +++---
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/apps/web/next.config.js b/apps/web/next.config.js
index 057f22e..661bc88 100644
--- a/apps/web/next.config.js
+++ b/apps/web/next.config.js
@@ -1,6 +1,14 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   transpilePackages: ["@repo/ui"],
+  // Inline the CSS into the HTML so the render-blocking stylesheet request leaves the
+  // critical path. That request was the LCP gate on throttled mobile: the logo (a data
+  // URI, ready instantly) couldn't paint until the separate CSS round-trip finished,
+  // and that round-trip varied run-to-run (TTFB 0, render delay ~2.3s). Inlined CSS
+  // arrives with the HTML, so the logo paints right away.
+  experimental: {
+    inlineCss: true,
+  },
   async redirects() {
     return [
       {
diff --git a/apps/web/src/components/layout/site-logo.tsx b/apps/web/src/components/layout/site-logo.tsx
index 487ac54..fb3c1a2 100644
--- a/apps/web/src/components/layout/site-logo.tsx
+++ b/apps/web/src/components/layout/site-logo.tsx
@@ -7,13 +7,14 @@ export function SiteLogo() {
   return (
     <Link href="/" className="flex items-center gap-3 group">
       <div className="relative w-40 h-11 lg:w-48 lg:h-12">
-        {/* Dark mode logo (white text) */}
+        {/* Dark mode logo (white text). No `priority`: the header wordmark is small,
+            not the LCP, and hidden during the splash; preloading both theme variants
+            just stole slow-4G bandwidth from the real critical path. */}
         <Image
           src="/images/branding/clean_dark_w_text.svg"
           alt="Such Software"
           fill
           className="object-contain hidden dark:block"
-          priority
         />
         {/* Light mode logo (black text) */}
         <Image
@@ -21,7 +22,6 @@ export function SiteLogo() {
           alt="Such Software"
           fill
           className="object-contain block dark:hidden"
-          priority
         />
       </div>
     </Link>