perf(home): preload hero[0] + first 4 featured card images in <head>; hero[0] is the LCP candidate gets fetchpriority=high; mirrors the same pattern shipped for /designs in tick-20

7ffca96903116e926e9f3197eba9bd1e661a6059 · 2026-05-14 15:12:34 -0700 · SteveStudio2

Files touched

M server.js

Diff

commit 7ffca96903116e926e9f3197eba9bd1e661a6059
Author: SteveStudio2 <stevestudio2@SteveStacStudio.lan>
Date:   Thu May 14 15:12:34 2026 -0700

    perf(home): preload hero[0] + first 4 featured card images in <head>; hero[0] is the LCP candidate gets fetchpriority=high; mirrors the same pattern shipped for /designs in tick-20
---
 server.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/server.js b/server.js
index 99f085b..f94f875 100644
--- a/server.js
+++ b/server.js
@@ -2702,7 +2702,14 @@ app.get('/', (req, res) => {
   res.type('html').send(`${htmlHead({
     title: 'wallco.ai — AI-Original Wallpaper & Murals',
     description: 'Original wallpaper and murals from wallco.ai. Every pattern hand-curated through our proprietary design system, never repeated. Browse, preview, and order samples.',
-    canonical: 'https://wallco.ai/'
+    canonical: 'https://wallco.ai/',
+    // Preload the hero's first slide + first few featured cards so LCP starts
+    // fetching during <head> parse instead of after body scan discovers the
+    // background-image URLs. heroes[0] is the most likely LCP candidate.
+    preloadImages: [
+      heroes[0]?.image_url,
+      ...featured.slice(0, 4).map(d => d.image_url)
+    ].filter(Boolean)
   })}
 <body>
 ${htmlHeader('/')}

← a29ccea feat(/samples): add autocomplete + inputmode + enterkeyhint · back to Wallco Ai · perf(/design/:id): add fetchpriority=high + decoding=async t effa221 →