fix(perf): eager-load the first LCP-candidate card image

[sdmcraft]

Summary

Fixes #518: blog-cards.js, related-blogs.js, blog-rail-case-study.js, and event-cards.js all hardcoded loading="lazy"/eager=false for every card image regardless of position — including the first card, which is the LCP candidate on the 16+ category/author/listing pages this issue identified (and /blog itself, which I confirmed has the same pattern — see comment on #518).

Fix

Only the first card of the first instance of each block on a page now loads eagerly. This matters because several templates stack multiple instances of the same block on one page:

• /blog has 5 separate blog-cards sections
• /events has 2 event-cards grids (.upcoming, .on-demand)

Marking every instance's first card eager (the issue's literally-suggested fix) would eager-load one image per section — wasting bandwidth/priority on below-the-fold images and potentially delaying the actual LCP image. Instead, decorate() checks document.querySelector('.block-name') === block once, synchronously, before any async work — this is safe because EDS delivers all section/block markup in the initial HTML; only JS decoration is staged, so every block instance already exists in the DOM by the time any of them starts decorating.

related-blogs.js/blog-rail-case-study.js aren't wired into any live content yet (confirmed via git history and content search), but had the identical hardcoded-lazy pattern per the issue's audit checklist — fixed for consistency/future-proofing.

Verified

• Traced the exact LCP element the issue cited (construction-study.jpg on /blog/guide) — confirmed via performance trace it's the same node, now loading="eager" with "Load duration" collapsing from ~1.2s to ~6ms (image no longer discovered late).
• Checked /blog (5 instances) and /events (2 instances) directly in-browser: exactly 1 eager image total on each page, matching the true first/LCP-position card.
• No CSS order/reordering — DOM order matches visual order, so i === 0 is reliably the visually-first card.
• Added test coverage (test/event-cards.test.js) for the isFirstOnPage behavior — the existing decorate() tests never attached blocks to document.body, so this logic was previously unexercised by the suite.
• npm run lint clean; npx vitest run — same 11 pre-existing failures as main (comparison-table, lead-form-config, testimonial-video/-split), unrelated to these files, no regressions.

Preview

https://cwvfix--intuit-erp--aemsites.aem.page/blog/guide

Fixes #518

[aem-code-sync]

Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
In case there are problems, just click a checkbox below to rerun the respective action.

• Re-run all PSI checks
• Re-run failed PSI checks
• Re-sync branch

Commits

• 41f168b ✅ (latest)
• 26db4a2 ✅

[aem-code-sync]

	Page	Scores	Audits
📱	/blog/guide
🖥️	/blog/guide