[Performance] Optimize Initial Load by Implementing Next.js Image Component and Lazy Loading

[basantnema31]

Description

Currently, several large assets (such as logo.png and other UI graphics) may be loaded synchronously using standard <img> tags or unoptimized CSS backgrounds. This causes a significant delay in the Largest Contentful Paint (LCP) and negatively impacts the overall Lighthouse performance score of the DevPath-Web application.

Proposed Solution

1. Migrate to next/image: Replace all standard <img> tags with the next/image component to leverage automatic image optimization (WebP/AVIF conversion, resizing, and caching).
2. Implement Lazy Loading: Ensure that images below the fold have the loading="lazy" attribute (or rely on next/image's default behavior).
3. Preload Critical Assets: Explicitly add the priority attribute to the LCP element (e.g., the hero banner or main logo) so it is fetched early in the network waterfall.

Benefits

• Substantially improved page load speeds, particularly on mobile devices.
• Better SEO ranking due to higher Core Web Vitals scores.

Suggested labels: gssoc, quality:exceptional, level:intermediate, type:performance, area:frontend

[pari7maheshwari]

hey @basantnema31 I would like to work on this under gssoc'26.Can u assign it to me .