Next.js Performance Audit Checklist

Optimizing your Next.js application requires auditing key areas. Follow this step-by-step checklist:

1. Image Optimization

Always use the next/image component to prevent Layout Shifts and automatically serve WebP formats.

import Image from 'next/image';
// Sets priority for critical LCP images
<Image src='/hero.png' width={800} height={400} priority />

2. Dynamic Imports (Lazy Loading)

Split client-side bundles by dynamically importing heavy components only when needed.

import dynamic from 'next/dynamic';
const HeavyChart = dynamic(() => import('@/components/HeavyChart'), { ssr: false });