[PERFORMANCE] Performance audit and optimization for landing page and critical routes

[bhoomiiee]

Performance Issue Description

The website has not undergone a formal performance audit, and there may be opportunities to improve initial page load time, JavaScript bundle size, and rendering performance.

During local development and inspection, some sections appear to load more resources than necessary during the initial render, which could impact first-time users and SEO.

Type of Performance Issue (Optional)

Large bundle size

Affected Page/Section (Optional)

Homepage (landing page) and shared layout components

How Often Does This Occur? (Optional)

Always/Every time

Performance Metrics

Baseline metrics to be collected using Lighthouse:

• Performance score: To be measured
• Largest Contentful Paint (LCP): To be measured
• Total Blocking Time (TBT): To be measured
• JavaScript bundle size: To be analyzed

Before and after metrics will be documented in the pull request.

Steps to Reproduce (Optional)

1. Start the development server using npm run dev
2. Open the homepage in a browser
3. Run Lighthouse audit using Chrome DevTools
4. Observe performance metrics and bundle size warnings

Browser (Optional)

Chrome

Device Type (Optional)

Desktop/Laptop

Internet Connection Speed (Optional)

Fast (50+ Mbps)

Suggested Fix (Optional)

Potential optimizations include:

• Running a Lighthouse performance audit to identify bottlenecks
• Optimizing images using Next.js next/image
• Lazy-loading non-critical components using dynamic imports
• Reducing unnecessary JavaScript in the initial bundle
• Documenting before/after performance improvements

Before Submitting

• I have searched existing issues for similar performance problems
• This issue is specifically about performance (not general bugs)
• I have tested on a stable internet connection

[akash-kumar-dev]

Hi @bhoomiiee , thanks for reporting this.

I've analyzed the performance using Lighthouse on both development and production environments. While the development environment definitely has optimization opportunities, the production build is performing well overall, though there's still room for some improvements.

Regarding your proposed solutions:

• I didn't find any unnecessary JavaScript in the initial bundle during the production build analysis. However, I did identify some issues related to incorrect react-icons imports for solving this can be optimize the developement environment.
• We are currently working on a linting fix in PR fix: resolve lint errors and warnings #27, which should address the image optimization using next/image.
• I've identified some potential optimizations for the production build, including adding security headers, button accessibility labels, and lazy-loading for certain components.

Based on my analysis, I don't believe significant changes are needed for the production build at this time. I'd appreciate your thoughts and observations. If you have expertise in this area, your input on potential solutions would be greatly appreciated. I don't foresee any major changes being required for this issue.

[bhoomiiee]

Thanks a lot for taking the time to analyze this and for sharing the detailed insights.

That makes sense if the production build is already performing well, I agree that large structural changes may not be necessary at this stage. The points you mentioned around incorrect react-icons imports, accessibility labels, and selective lazy-loading sound like good, scoped areas where incremental improvements could still add value.

If it’s okay, I can take a look at one of these smaller optimizations (for example, fixing the react-icons imports or adding lazy-loading to clearly non-critical components) and open a focused PR, keeping it aligned with the ongoing work in PR #27.

Happy to proceed based on what you feel would be most helpful.