Web Performance: Frontend Interview Topics

Core Web Vitals

Optimization Strategies

Images

import Image from "next/image";
<Image src="/hero.jpg" width={800} height={400} priority alt="Hero" />

Code Splitting

const HeavyChart = dynamic(() => import("./Chart"), { ssr: false });

Critical CSS

Inline above-the-fold styles, defer non-critical CSS.

Interview Questions

Q: What causes layout shift (CLS)?

Images without dimensions, injected ads, web fonts causing FOIT/FOUT, dynamically inserted content.

Q: How do you reduce JavaScript bundle size?

Tree shaking, dynamic imports, analyze with webpack-bundle-analyzer, remove unused dependencies, use lighter alternatives.

Q: What is the critical rendering path?

HTML → DOM, CSS → CSSOM, combine to Render Tree → Layout → Paint → Composite. Optimizing this path improves first paint.