From 45726936e75cbc258f5fcf790f717fd011f6c3c7 Mon Sep 17 00:00:00 2001 From: Keith So Date: Wed, 3 Jun 2026 23:02:39 +0100 Subject: [PATCH] perf: cut homepage mobile LCP via content-visibility on calculator cards The homepage renders all 149+ calculator cards (3145 DOM nodes, 520 inline SVGs, 172 gradients); on throttled mobile that is ~4.7s of style/layout/paint that delays the LCP element (an in-viewport card description) to 5.7s. Add content-visibility:auto + contain-intrinsic-size:auto 240px to the .calculator-card scoped rule so off-screen cards skip initial render while staying in the DOM (render-skipping, not display:none, so SEO-safe). Measured (4x CPU throttle): LCP 1552->324ms, RecalcStyle 779->291ms, CLS 0->0, all 167 cards in DOM. Build green, 898 tests pass. Co-Authored-By: Claude Opus 4.8 (1M context) --- src/pages/index.astro | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/pages/index.astro b/src/pages/index.astro index 30b16a2..cd10029 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -865,6 +865,13 @@ const categories = getCategories(); .calculator-card { animation: card-appear 0.5s cubic-bezier(0.19, 1, 0.22, 1) forwards; opacity: 0; + /* Skip style/layout/paint for off-screen cards so the ~140 below the fold + don't gate the in-viewport LCP card's paint. Render-skipping only (content + stays in the DOM and is indexable); contain-intrinsic-size reserves an + approximate height and the `auto` keyword caches the real size after first + render so scrolling does not jump. */ + content-visibility: auto; + contain-intrinsic-size: auto 240px; } /* After initial load, disable animation for instant filtering */