perf(/designs): preload first 6 card images in <head> with fetchpriority=high on first; browsers start fetching LCP candidate ~100-300ms before body scan discovers background-image URLs

eb8097bdf904a7539592e4307c984d564185dccf · 2026-05-14 13:50:41 -0700 · SteveStudio2

Files touched

M server.js

Diff

commit eb8097bdf904a7539592e4307c984d564185dccf
Author: SteveStudio2 <stevestudio2@SteveStacStudio.lan>
Date:   Thu May 14 13:50:41 2026 -0700

    perf(/designs): preload first 6 card images in <head> with fetchpriority=high on first; browsers start fetching LCP candidate ~100-300ms before body scan discovers background-image URLs
---
 server.js | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/server.js b/server.js
index 64dba42..a08fdb7 100644
--- a/server.js
+++ b/server.js
@@ -2248,7 +2248,7 @@ const GTAG = GA4_ID ? `
   gtag('config', '${GA4_ID}');
 </script>` : '';
 
-function htmlHead({ title, description, canonical, ogImage = '', ogType = 'website', ogImageAlt = '', productOG = null }) {
+function htmlHead({ title, description, canonical, ogImage = '', ogType = 'website', ogImageAlt = '', productOG = null, preloadImages = [] }) {
   const siteUrl = `https://${SITE}`;
   const ogImg = ogImage || `${siteUrl}/og-default.png`;
   const imgAlt = ogImageAlt || title;
@@ -2262,6 +2262,13 @@ function htmlHead({ title, description, canonical, ogImage = '', ogType = 'websi
     productOG.brand && `<meta property="product:brand" content="${productOG.brand}">`,
     productOG.category && `<meta property="product:category" content="${productOG.category}">`
   ].filter(Boolean).join('\n') : '';
+  // Preload tags for above-the-fold images (LCP). Browsers start fetching
+  // these during <head> parse, ~100-300ms before the body scan would discover
+  // the same URLs in background-image: declarations. fetchpriority=high marks
+  // the first one as the LCP candidate so the network stack prioritizes it.
+  const preloadTags = (preloadImages || []).slice(0, 6).map((u, i) =>
+    `<link rel="preload" as="image" href="${u}"${i === 0 ? ' fetchpriority="high"' : ''}>`
+  ).join('\n');
   return `<!doctype html>
 <html lang="en">
 <head>
@@ -2270,6 +2277,7 @@ function htmlHead({ title, description, canonical, ogImage = '', ogType = 'websi
 <title>${title}</title>
 <meta name="description" content="${description}">
 <link rel="canonical" href="${canonical}">
+${preloadTags}
 <!-- Open Graph -->
 <meta property="og:type" content="${ogType}">
 <meta property="og:site_name" content="wallco.ai">
@@ -3404,7 +3412,8 @@ app.get('/designs', (req, res) => {
   res.type('html').send(`${htmlHead({
     title: _titleHead,
     description: `Browse ${total} wallco.ai original wallpaper designs. Every pattern unique, hand-curated, never repeated. Free samples available.`,
-    canonical: `https://wallco.ai/designs`
+    canonical: `https://wallco.ai/designs`,
+    preloadImages: slice.slice(0, 6).map(d => d.image_url).filter(Boolean)
   })}
 <body>
 ${htmlHeader('/designs')}

← 89a97b5 perf(/designs): content-visibility:auto on .design-card — br · back to Wallco Ai · perf(head): preconnect googletagmanager + dns-prefetch googl 8abdd79 →