Performance: Add Frontend Asset Preloading Strategy with Priority Hints

[Smartdevs17]

Context

Critical resources (fonts, logos, API responses) load after non-critical assets, delaying time-to-first-meaningful-paint and time-to-interactive.

Current Limitation/Problem

Asset loading order is uncontrolled. Fonts, hero images, and critical CSS may be delayed behind analytics scripts and non-critical resources.

Expected Outcome

A comprehensive preloading strategy using priority hints, preload/preconnect/prefetch links, and resource prioritization based on critical rendering path.

Acceptance Criteria

• Implement priority hints: high priority for hero images, fonts, critical API calls
• Preload: critical fonts (WOFF2), above-the-fold images, critical CSS
• Preconnect: API origin, CDN, RPC endpoints (reduce connection time)
• Prefetch: likely next pages (based on navigation patterns)
• Resource timing: measure and optimize LCP and FID
• Target: LCP <2.5s, FID <100ms, CLS <0.1
• Script loading: async/defer for non-critical JS
• Font display: swap/optional to prevent invisible text
• Audit: Lighthouse performance score >90

Technical Scope

• frontend/src/app/layout.tsx - preload/preconnect links
• Next.js next/script with strategy configuration
• Priority hint integration in Image component
• Resource Hints: rel="preload", rel="preconnect", rel="dns-prefetch"
• Web Vitals monitoring integration
• Edge cases: over-preloading (bandwidth waste), browser support, data-saver mode

[opepraise]

@opepraise has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

Hello Maintainer, I can work on this issue.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @opepraise to this issue.

[drips-wave]

Congratulations, @opepraise! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on June 30, 2026.

🧑‍💻 @opepraise: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊