signup: fetch the page's LCP images eagerly

[feruzm]

Closes #1693

The desktop hero (signup-main.svg) and the signup option card illustrations were default-lazy next/image, and CF field data shows both among the slowest LCP elements (hero 5.8s on desktop, mailbox card 12.3s on mobile where the hero is hidden md:block and the card becomes the LCP element).

Both LCP images now get a media-gated <link rel=preload as=image fetchpriority=high> while their <img>s stay lazy:

• Hero: preload gated to (min-width: 768px). The container is display:none below md and a lazy image with no box is never fetched, so mobile keeps skipping the 47KB file while desktop starts the fetch from the head.
• First option card: preload gated to (max-width: 767px), the complement. At md+ the hero is the LCP element and an ungated high-priority card fetch would compete with it, so only mobile (where the card IS the LCP element) fetches early.

Spec pins the preload attributes including both media gates, the images staying lazy, no preload on header-less sub-pages and no preload for the other cards. Each assertion was mutation-tested (guard removed, spec fails).

Validated: signup specs 13/13, eslint and tsc clean.

Summary by CodeRabbit

• Performance Improvements

  • Improved signup page image loading for faster initial display on desktop and mobile.
  • Prioritized the desktop hero image and the first free signup illustration based on viewport size.
  • Preserved lazy loading for non-critical option images and signup sub-pages.

• Tests

  • Added coverage for responsive image preloading, hero visibility, option-card loading, and lazy-loading behavior across signup flows.

[qodo-code-review]

ⓘ Qodo reviews are paused because your trial has ended. Ask your workspace admin to add credits to resume reviews. Manage billing

[qodo-free-for-open-source-projects]

PR Summary by Qodo

Prioritize responsive signup LCP image loading

✨ Enhancement 🧪 Tests 🕐 10-20 Minutes

AI Description

• Preloads the desktop hero only on header-visible routes and medium-plus viewports.
• Prioritizes the mobile LCP card while preserving lazy loading for other illustrations.
• Adds regression coverage for route-aware preloading and image priority behavior.

Diagram

graph TD
  R["Signup Request"] --> H{"Header Visible?"}
  H -->|Yes| V{"Desktop Viewport?"}
  V -->|Yes| P["Hero Preload"] --> I["Lazy Hero Image"]
  V -->|No| S["Skip Hero Fetch"]
  H -->|No| S
  R --> C["Option Cards"] --> M["Priority Mailbox"]

Loading

High-Level Assessment

The hybrid approach is appropriate: a media-gated preload accelerates the desktop-only hero without wasting mobile bandwidth, while Next Image priority plus explicit fetch priority targets the always-visible mailbox illustration. Applying Next Image priority directly to the hero was considered but would risk fetching the hidden asset on mobile.

Files changed (3) +121 / -2

Enhancement (2) +23 / -2

signup-layout-client.tsxPreload the desktop hero on eligible signup routes +14/-0

Preload the desktop hero on eligible signup routes

• Adds a high-priority, medium-viewport image preload when the signup header is visible. The hero image remains lazy so mobile and header-less sub-pages avoid downloading the hidden asset.

apps/web/src/app/signup/_components/signup-layout-client.tsx

page.tsxPrioritize the first signup option illustration +9/-2

Prioritize the first signup option illustration

• Marks the mailbox illustration as the priority option and sets high fetch priority on its image. Other option illustrations retain Next Image's default lazy-loading behavior.

apps/web/src/app/signup/page.tsx

Tests (1) +98 / -0

signup-lcp-images.spec.tsxCover responsive signup LCP image loading +98/-0

Cover responsive signup LCP image loading

• Adds tests for hero preload attributes, retained hero laziness, and exclusion on header-less routes. Also verifies eager high-priority loading for the first card and lazy loading for remaining cards.

apps/web/src/specs/features/signup/signup-lcp-images.spec.tsx

[qodo-free-for-open-source-projects]

Code Review by Qodo

🐞 Bugs (0) 📘 Rule violations (0) 📎 Requirement gaps (0)

Great, no issues found!

Qodo reviewed your code and found no material issues that require review

Tip of the day

💡 Did you know, you can start a comment with 'qodo' or '@qodo' to chat about any finding

More tips ↗ | Customize Qodo ↗ | Qodo docs ↗

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 13807961-7b8d-45e2-aaa5-432006e45a48

📥 Commits

Reviewing files that changed from the base of the PR and between c8eb6d9 and cd0ce8b.

📒 Files selected for processing (2)

• apps/web/src/app/signup/page.tsx
• apps/web/src/specs/features/signup/signup-lcp-images.spec.tsx

Included review availability: Your plan provides up to 1 included review per hour; 0 remain after this review.

---

📝 Walkthrough

Walkthrough

The signup page now uses viewport-specific preloads for the desktop hero and the first mobile option image. Signup images remain lazy-loaded. Tests cover desktop, mobile, sub-page, and later-card loading behavior.

Changes

Signup LCP image loading

Layer / File(s)	Summary
Desktop hero preload apps/web/src/app/signup/_components/signup-layout-client.tsx, apps/web/src/specs/features/signup/signup-lcp-images.spec.tsx	When the header is visible, the layout preloads /assets/signup-main.svg for viewports at least 768px wide. The hero image remains lazy-loaded. Tests verify viewport and sub-page behavior.
Mobile option image preload apps/web/src/app/signup/page.tsx, apps/web/src/specs/features/signup/signup-lcp-images.spec.tsx	The first signup option uses a mobile-only preload through 767px. Card images no longer use Next.js priority settings. Tests verify lazy loading for all cards and no preload for later cards.

Estimated code review effort: 2 (Simple) | ~10 minutes

Merge Risk: ⚪ Minimal · up to cd0ce

The change selectively preloads the signup page’s likely LCP images while preserving lazy loading and responsive behavior; no actionable merge-blocking risk remains beyond normal checks and review.

Poem

A rabbit preloads the hero with care
For desktop skies and mobile air
The first card hops ahead
Later cards stay lazy instead
Tests watch each image everywhere

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 3 functions across 3 files.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	The changes address issue #1693. The desktop hero receives a desktop-only high-priority preload, while the first option-card image receives a mobile-only preload for mobile LCP use. The added tests co…
Out of Scope Changes check	✅ Passed	The implementation and tests remain within the signup-page LCP image-loading scope described in issue #1693. No unrelated code changes are identified.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the main change: eager fetching for the signup page's LCP images through targeted preload behavior.

Full details: Linked Issues check

Explanation

The changes address issue #1693. The desktop hero receives a desktop-only high-priority preload, while the first option-card image receives a mobile-only preload for mobile LCP use. The added tests cover the required loading behavior.

• Fix all pre-merge checks with AI

✨ Finishing Touches 💡 1

📝 Generate docstrings 💡

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch perf/signup-lcp-images

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}