What is Lazy Loading?

Lazy Loading in Frontend Accelerator is a performance optimization technique that defers the loading of components, images, and other resources until they're actually needed. This reduces initial bundle size and improves page load times.

Component lazy loading:

import dynamic from 'next/dynamic';

const HeavyChart = dynamic(() => import('@/components/Chart'), {
  loading: () => <p>Loading chart...</p>,
  ssr: false // Disable server-side rendering
});

export default function Dashboard() {
  return <HeavyChart data={data} />;
}

Image lazy loading:

import Image from 'next/image';

<Image
  src="/hero.jpg"
  alt="Hero"
  loading="lazy"
  width={800}
  height={600}
/>

Route-based code splitting:

Next.js automatically code-splits each route:

app/
  dashboard/
    page.tsx  // Only loaded when visiting /dashboard
  profile/
    page.tsx  // Only loaded when visiting /profile

Key Benefits:

• Reduced initial bundle: Smaller JavaScript payload on first load
• Faster time to interactive: Main thread available sooner
• Bandwidth savings: Load only what users actually need
• Improved performance: Better Core Web Vitals scores

AI-Friendly: The dynamic import syntax and Next.js Image component clearly signal lazy loading behavior. AI tools understand which code will be split into separate bundles, can identify opportunities for code splitting, and suggest lazy loading for heavy components.