Improve Lighthouse Performance Score on Homepage

[youngcoder45]

Summary

Improve the overall Lighthouse performance score of the homepage by optimizing frontend assets, reducing unnecessary JavaScript execution, and improving loading performance on mobile devices.

Context

The website currently contains multiple animations, images, and interactive components that may increase bundle size and negatively impact Core Web Vitals.

Improving performance will:

• enhance user experience
• reduce load times on slower devices/networks
• improve SEO rankings
• make the project more production-ready

Why is this needed?

A faster website improves accessibility, engagement, and maintainability. Performance optimization is also a valuable open-source contribution area for beginner frontend developers.

Tasks

• Reduce unused JS
• Optimize image delivery
• Add lazy loading
• Improve CLS/LCP
• Optimize fonts
• Analyze bundle size
• Remove unnecessary client-side rendering where possible

Acceptance criteria

• Lighthouse performance score improves measurably
• No visual regressions introduced
• Images load efficiently on mobile
• Layout shift issues are minimized
• Build passes successfully
• Changes are documented in PR description

Suggested approach

Helpful starting points:

• Use Lighthouse in Chrome DevTools
• Check bundle size using Next.js analyzer tools
• Replace heavy assets with optimized alternatives
• Use dynamic imports where appropriate
• Verify improvements on both desktop and mobile

Out of scope

• Complete redesign of UI
• Rewriting the entire frontend architecture
• Migrating frameworks

Remember, contributions to this repository should follow its contributing guidelines, security policy and code of conduct.