mirror of
https://github.com/Such-Software/such.software.git
synced 2026-10-17 05:32:05 +02:00
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:
@@ -1,6 +1,14 @@
|
|||||||
/** @type {import('next').NextConfig} */
|
/** @type {import('next').NextConfig} */
|
||||||
const nextConfig = {
|
const nextConfig = {
|
||||||
transpilePackages: ["@repo/ui"],
|
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() {
|
async redirects() {
|
||||||
return [
|
return [
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -7,13 +7,14 @@ export function SiteLogo() {
|
|||||||
return (
|
return (
|
||||||
<Link href="/" className="flex items-center gap-3 group">
|
<Link href="/" className="flex items-center gap-3 group">
|
||||||
<div className="relative w-40 h-11 lg:w-48 lg:h-12">
|
<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
|
<Image
|
||||||
src="/images/branding/clean_dark_w_text.svg"
|
src="/images/branding/clean_dark_w_text.svg"
|
||||||
alt="Such Software"
|
alt="Such Software"
|
||||||
fill
|
fill
|
||||||
className="object-contain hidden dark:block"
|
className="object-contain hidden dark:block"
|
||||||
priority
|
|
||||||
/>
|
/>
|
||||||
{/* Light mode logo (black text) */}
|
{/* Light mode logo (black text) */}
|
||||||
<Image
|
<Image
|
||||||
@@ -21,7 +22,6 @@ export function SiteLogo() {
|
|||||||
alt="Such Software"
|
alt="Such Software"
|
||||||
fill
|
fill
|
||||||
className="object-contain block dark:hidden"
|
className="object-contain block dark:hidden"
|
||||||
priority
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</Link>
|
</Link>
|
||||||
|
|||||||
Reference in New Issue
Block a user