Lazy Loading
Lazy loading is a technique that defers the loading of non-critical resources (images, iframes, components) until they are about to enter the viewport, reducing initial page load time.
Lazy loading improves performance by only loading what the user can see. For images, the native `loading="lazy"` attribute handles this without JavaScript. For components, React's `lazy()` and `Suspense` enable code splitting and deferred rendering.
SEO consideration: never lazy-load the LCP element (hero image, main heading). Lazy loading the LCP image delays it significantly, hurting your Core Web Vitals score. Use `loading="eager"` or Next.js `priority` prop for above-the-fold images.
In Next.js, the `<Image>` component lazy-loads by default. Override with `priority` for your hero image. For below-the-fold components, use `next/dynamic` with `ssr: false` for heavy client-side components that do not contain SEO-critical content.
Example
// Next.js — lazy loading patterns
import Image from "next/image";
import dynamic from "next/dynamic";
// Hero image: NOT lazy loaded (LCP element)
<Image src="/hero.webp" alt="Hero" priority width={1200} height={630} />
// Below-fold images: lazy loaded by default
<Image src="/feature.webp" alt="Feature" width={600} height={400} />
// Heavy component: lazy loaded, client-only
const HeavyChart = dynamic(() => import("./Chart"), {
ssr: false,
loading: () => <div className="h-96 animate-pulse bg-zinc-800" />,
});Related terms
Largest Contentful Paint (LCP)
Largest Contentful Paint (LCP) is a Core Web Vital metric that measures the time from when the page starts loading to when the largest text block or image element is rendered in the viewport.
Page Speed
Page speed is the measurement of how quickly a web page's content loads and becomes interactive, typically measured by metrics like Time to First Byte (TTFB), First Contentful Paint (FCP), and Largest Contentful Paint (LCP).
Image Optimization
Image optimization is the process of reducing image file sizes and serving appropriately sized images to improve page load performance, using techniques like compression, modern formats, and responsive delivery.
Code Splitting
Code splitting is a technique that breaks a JavaScript application into smaller chunks (bundles) that are loaded on demand, reducing the initial payload size and improving page load performance.
Stop shipping broken SEO
Indxel validates your metadata, guards your CI/CD pipeline, and monitors indexation — so you never miss an SEO issue again.