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.
Without code splitting, a user visiting your homepage downloads JavaScript for every page in your application. Code splitting ensures they only download the JavaScript needed for the current page, loading additional code as they navigate.
Next.js performs automatic code splitting at the route level — each page gets its own bundle. For finer-grained splitting, use `next/dynamic` for heavy components or React's `lazy()` with `Suspense`. This is especially important for large libraries (charting, rich text editors, PDF rendering) that should not be in the initial bundle.
Code splitting directly impacts INP and LCP: smaller bundles mean faster parsing and execution, which means faster interactivity. Analyze your bundles with `@next/bundle-analyzer` to identify oversized chunks and splitting opportunities.
Example
// Next.js dynamic imports for code splitting
import dynamic from "next/dynamic";
// Heavy component loaded on demand
const PDFViewer = dynamic(() => import("@/components/PDFViewer"), {
ssr: false, // Client-only — no server rendering
loading: () => <p>Loading PDF viewer...</p>,
});
// Route-level: Next.js automatically splits per page
// app/dashboard/page.tsx → dashboard chunk
// app/glossary/page.tsx → glossary chunkRelated terms
Tree Shaking
Tree shaking is a dead code elimination technique used by modern JavaScript bundlers that removes unused exports from modules during the build process, producing smaller production bundles.
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.
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).
Interaction to Next Paint (INP)
Interaction to Next Paint (INP) is a Core Web Vital metric that measures the latency of all user interactions (clicks, taps, key presses) throughout the page lifecycle, reporting the worst interaction minus outliers.
Stop shipping broken SEO
Indxel validates your metadata, guards your CI/CD pipeline, and monitors indexation — so you never miss an SEO issue again.