How does dynamic Code Splitting affect Core Web Vitals (LCP, FID/INP, CLS)?

Short answer

It reduces the initial JavaScript bundle, speeding up code parsing and loading in the browser, improving LCP and INP, and preventing Main Thread Blocking.

Explanation

Large JavaScript bundles block the browser processor during parsing and compilation (Parse & Compile), increasing Interaction to Next Paint (INP). Dynamically importing unnecessary pages and heavy libraries lets the browser become interactive sooner.

Code example

// Dynamically load the heavy PDF export library only when the button is clicked
async function handleExportPDF() {
  const { jsPDF } = await import('jspdf');
  const doc = new jsPDF();
  doc.text("Sales report", 10, 10);
  doc.save("report.pdf");
}

Common mistakes

• Loading large libraries at startup (such as charts or rich-text editors) when they are used only on rare pages or after user interaction.

Follow-up questions

• How do you use Web Workers to move heavy calculations out of the Main Thread in React applications?

Sources

• web.dev — Web Vitals
• React docs — lazy