perf(/designs): content-visibility:auto on .design-card — browsers skip rendering off-screen cards entirely; 60-card-per-page grid LCP drops significantly; contain-intrinsic-size:220px keeps scroll position stable while space is reserved

89a97b5afbd361c43452112578917246b055ea2a · 2026-05-14 13:22:59 -0700 · SteveStudio2

Files touched

M public/css/site.css

Diff

commit 89a97b5afbd361c43452112578917246b055ea2a
Author: SteveStudio2 <stevestudio2@SteveStacStudio.lan>
Date:   Thu May 14 13:22:59 2026 -0700

    perf(/designs): content-visibility:auto on .design-card — browsers skip rendering off-screen cards entirely; 60-card-per-page grid LCP drops significantly; contain-intrinsic-size:220px keeps scroll position stable while space is reserved
---
 public/css/site.css | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/public/css/site.css b/public/css/site.css
index cdb153a..9eee076 100644
--- a/public/css/site.css
+++ b/public/css/site.css
@@ -323,6 +323,13 @@ main { padding-top: 73px; }
   overflow: hidden;
   position: relative;
   transition: transform 0.18s;
+  /* Skip rendering off-screen cards entirely until they scroll near viewport.
+     contain-intrinsic-size reserves space so the scroll position stays stable
+     (otherwise off-screen cards collapse to 0 and the page lurches). The
+     220px square is tuned for the default 6-col grid at ~1280px width;
+     browsers replace it with the real size once the card renders. */
+  content-visibility: auto;
+  contain-intrinsic-size: 220px 220px;
 }
 .design-card:hover { z-index: 2; transform: scale(1.02); }

← a624fa8 feat(/designs mobile): chip-rows scroll horizontally on phon · back to Wallco Ai · perf(/designs): preload first 6 card images in <head> with f eb8097b →