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.
This commit is contained in:
jwinterm
2026-06-07 17:02:35 -04:00
parent 128d154b0e
commit 89c086398d
2 changed files with 11 additions and 3 deletions
+8
View File
@@ -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 [
{
+3 -3
View File
@@ -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>