[Perf Improvement] No Image Optimization Strategy (External CDN, SVG Inlining)

• Where: next.config.js and components using <img> or static images
• Why: No explicit <Image> component usage or optimizations. CDN-hosted images (cdn.jsdelivr.net for fonts/icons) are not cached or preloaded. SVG loading via webpack (@svgr/webpack) is configured but may not be lazy-loaded per route.
• Impact:
  • Fonts from cdn.jsdelivr.net are render-blocking (no font-display: swap visible).
  • Unoptimized images increase page weight and layout shift.
• Confidence: Medium

Fix:

1. Replace <img> with Next.js <Image> in components:

import Image from 'next/image';
<Image src="/path/to/image.png" alt="..." width={100} height={100} priority={false} />

2. Preload critical fonts and add font-display: swap:

// next.config.js
async headers() {
  return [
    {
      source: '/(.*)',
      headers: [
        {
          key: 'Link',
          value: '</fonts.gstatic.com/css2?...>; rel=preload; as=style',
        },
      ],
    },
  ];
}

3. Inline critical SVGs or use dynamic imports for heavy SVG files:

import { lazy } from 'react';
const HeavySVG = lazy(() => import('@/icons/HeavyIcon.svg'));

Validate:

• Lighthouse "First Contentful Paint" and "Largest Contentful Paint" metrics.
• Check Network tab for render-blocking resources.

Start with next.config.js and search components for , static images, CDN resources, and SVG imports configured through @svgr/webpack. Review the proposed Image, font-loading, and SVG strategies, then validate with Lighthouse First Contentful Paint and Largest Contentful Paint metrics and the Network tab; done means the identified resources are no longer unnecessarily unoptimized or render-blocking.