Performance Optimizations

[priyankarpal]

Configure next/image (or react-lazyload / react-intersection-observer) to lazy-load images.
Compress and serve responsive images (WebP/AVIF where supported).
Ensure critical CSS and JS are minimized and tree-shaken.

[priyankarpal]

assigning @Ravijhabit

[mdnm18]

Hello @priyankarpal ,

I see this performance optimization issue is still open. I noticed in the comments that it was being assigned to @Ravijhabit a couple of weeks ago.

I just wanted to check if the issue is still being worked on or if it has become available. I have experience with image optimization (lazy-loading, WebP/AVIF formats) and minimizing JS/CSS, and I would be happy to take this on if it's now open for contribution.

Thank you!

[Ravijhabit]

Hi @mdnm18,

Thanks for your proactiveness. I was researching on optimization topic and found that nextjs handles most of the optimisation. Additional configuration like priority of an image is already present in the code. I am still looking at other optimization that could be perform since this is new to me it is taking time for me.

I would be more happy if task is completed fast. If you can share your approach for optimization code pov (and it seems convincing to me) then I call unassign myself from the issues and you would get the task.

[mdnm18]

Hello @Ravijhabit,

Thank you so much for your response and for the generous offer. I really appreciate it. I agree that Next.js handles a lot of optimizations out of the box, which is great. My approach would be to build on that foundation and ensure best practices are applied everywhere.

Here is my proposed plan for tackling the performance optimizations:

1. Image Optimization with next/image:

• Audit & Replace: I will go through the codebase to find all standard <img> tags and replace them with the Next.js <Image> component.
• Lazy Loading: By default, next/image lazy-loads images, which I will ensure is the standard for all below-the-fold images.
• Prioritize Critical Images: For any key images that appear above the fold (like a hero banner), I will add the priority prop to the <Image> component. This tells Next.js to preload them for a better Largest Contentful Paint (LCP) score.
• Responsive Sizes: I will use the sizes attribute to ensure the browser loads the correctly sized image for different viewports, preventing the download of unnecessarily large files on mobile devices.
• Modern Formats (WebP/AVIF): The next/image component handles this automatically. I'll verify the configuration in next.config.js is set up to allow image optimization for the necessary domains.

2. CSS & JS Optimization:

• Code Splitting: I will review the page components to ensure Next.js's automatic code-splitting is working effectively, so each page only loads the JavaScript it needs.
• Bundle Analysis: While Next.js handles minification and tree-shaking by default, I plan to use @next/bundle-analyzer to inspect the final production bundles. This will help identify any unnecessarily large third-party libraries or components that could be replaced with lighter alternatives.
• Dynamic Imports: If any large components are not needed on the initial page load (e.g., modals, complex charts), I will refactor them to be loaded dynamically using next/dynamic.

I believe this systematic approach will directly address the goals of the issue and result in a measurable performance improvement.

Let me know if this plan sounds convincing to you. I'm ready to get started as soon as you're ready to unassign yourself.

Thanks again!

[Ravijhabit]

Hi @mdnm18,

I think you should have went through the codebase before writing your answer. All the optimization techniques you mentioned in image optimization are already achieved and doesn't require code change. For js optimization, code splitting is default handled so that doesnt make points. For bundle analysis and dynamic imports please go through the codebase before writing a generic answer.

@priyankarpal I leave it for you to decide: are we looking for a short-term solution (to complete within hacktoberfest) or long-term solution. Because long-term solution requires research and reading blogs before commiting any change. I was working on reading blogs definitely this is taking me time to resolve. I don't want to make my code changes based on hacktoberfest duration. Feel free to assign task if we need to complete within hacktoberfest.

[priyankarpal]

nope, we don't need only for hacktoberfest, we should focus on long-term