Why it matters
The homepage weighs in at 541 KB of HTML (67 KB gzipped) with about 6,860 DOM nodes, and data.js adds another 287 KB (66 KB gzipped) holding the same entries. It's fine on fast connections: a Slow-4G / 4×CPU trace gave LCP 932 ms and CLS 0. But the trace flagged DOMSize and ForcedReflow, and the cost grows linearly with every PR like #58.
Evidence
site/build.mjs:347 loads data.js (deferred) on top of the server-rendered cards.site/public/app.js:343 re-renders cards client-side from the same data.
Suggested approach
Measure first, then pick one:
- Slim
data.js to the fields that search and filter need (id, name, category, licence family, formats, tags), and read the rest from the DOM.
- Or render only the first N cards server-side and lazy-render the rest, keeping crawlable entry pages and the sitemap for SEO.
- Add
content-visibility: auto to cards for a cheap rendering win.
Done when
The combined homepage payload is cut noticeably (target: under 60% of today's), with no loss of search or filter behaviour, and the numbers are recorded in the PR.
Why it matters
The homepage weighs in at 541 KB of HTML (67 KB gzipped) with about 6,860 DOM nodes, and
data.jsadds another 287 KB (66 KB gzipped) holding the same entries. It's fine on fast connections: a Slow-4G / 4×CPU trace gave LCP 932 ms and CLS 0. But the trace flagged DOMSize and ForcedReflow, and the cost grows linearly with every PR like #58.Evidence
site/build.mjs:347loadsdata.js(deferred) on top of the server-rendered cards.site/public/app.js:343re-renders cards client-side from the same data.Suggested approach
Measure first, then pick one:
data.jsto the fields that search and filter need (id, name, category, licence family, formats, tags), and read the rest from the DOM.content-visibility: autoto cards for a cheap rendering win.Done when
The combined homepage payload is cut noticeably (target: under 60% of today's), with no loss of search or filter behaviour, and the numbers are recorded in the PR.