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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user