Skip to content

perf: optimize above-fold image loading [closes #332]#369

Closed
zigzagdev wants to merge 3 commits into
perf/api-cachefrom
perf/image-loading-optimization
Closed

perf: optimize above-fold image loading [closes #332]#369
zigzagdev wants to merge 3 commits into
perf/api-cachefrom
perf/image-loading-optimization

Conversation

@zigzagdev
Copy link
Copy Markdown
Owner

Summary

  • HeritageCard: add isPriority prop — first 3 cards get loading="eager" + fetchPriority="high"; rest stay loading="lazy"
  • Add width={400} height={320} and decoding="async" to all card images to prevent CLS
  • HeritageList + SearchResultsPage: pass isPriority={index < 3}

Test plan

  • First 3 cards load eagerly (check Network tab — no loading=lazy on first 3 images)
  • No layout shift when images load in
  • Below-fold images still lazy-load
  • TypeScript compiles without errors

🤖 Generated with Claude Code

zigzagdev and others added 3 commits May 22, 2026 08:53
… above-fold images

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@zigzagdev zigzagdev force-pushed the perf/image-loading-optimization branch from 9a1fcf8 to eec7294 Compare May 21, 2026 23:53
@zigzagdev
Copy link
Copy Markdown
Owner Author

Dropping this PR — image optimization (#332) is being removed from scope. The 403 issue was caused by aggressive loading attrs (fetchPriority=high + loading=eager), and the API's thumbnail_url points to document URLs rather than direct images. Reverting to simple lazy loading only.

@zigzagdev zigzagdev closed this May 22, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant