Network Optimization Interview Questions
With Answers & Code Examples

Question 1

Q1Beginner

What is the difference between preload, prefetch, and preconnect?

💡 Hint: preload = fetch this resource now for current page; prefetch = fetch for future navigation; preconnect = open socket to origin early

Practice this question →

Answer

These are resource hints — <link> tags that give the browser advance notice about resources it will need.

preload — fetch a resource needed by the current page immediately at high priority. Used for critical fonts, hero images, above-the-fold CSS.

<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="/hero.jpg" as="image" />

prefetch — fetch a resource likely needed for a future navigation at idle priority. Browser downloads it when bandwidth is free.

<link rel="prefetch" href="/checkout/bundle.js" as="script" />
{/* Next.js <Link> does this automatically for in-viewport links */}

preconnect — open a TCP connection (+ TLS handshake) to an origin early, without fetching a specific resource. Eliminates connection setup latency for cross-origin resources.

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="dns-prefetch" href="https://api.example.com" /> {/* DNS only — cheaper */}

💡 Misusing preload (adding too many, wrong as type, no crossorigin on fonts) causes warnings and wasted bandwidth. Only preload what's truly render-critical.

Question 2

Q2Core

How does HTTP/2 multiplexing improve performance over HTTP/1.1?

💡 Hint: HTTP/2 allows multiple requests on one TCP connection simultaneously — eliminates head-of-line blocking and domain sharding hacks

Practice this question →

Answer

HTTP/1.1 limitation: One request at a time per TCP connection. Browsers open 6–8 parallel connections per domain to work around this, but each connection has overhead (TCP handshake, slow start).

HTTP/2 multiplexing:

A single TCP connection carries multiple streams simultaneously — no waiting for one response before sending the next.
Requests are broken into binary frames that are interleaved and reassembled by the receiving end.
Eliminates head-of-line blocking at the HTTP layer (TCP-level HOL blocking still exists; fixed by HTTP/3 QUIC).

Other HTTP/2 features:

Header compression (HPACK) — compresses repeated headers; saves bandwidth on API-heavy SPAs.
Server push — server sends resources before the client asks (largely abandoned in practice due to poor cache interaction).
Request prioritization — critical resources can be prioritized over background requests.

HTTP/2 makes these obsolete: domain sharding, CSS sprites, JS concatenation for HTTP performance (code splitting is now safe).

Question 3

Q3Core

What is the difference between defer and async on script tags?

💡 Hint: async executes as soon as downloaded (may block parsing); defer executes after HTML is parsed, in order

Practice this question →

Answer

Both attributes tell the browser to download the script without blocking HTML parsing, but they differ in when the script executes.

Default (no attribute) — parsing blocks while the script is downloaded and executed. Render-blocking.

async — downloads in parallel; executes immediately when downloaded, even if HTML isn't done parsing yet. Order not guaranteed.

<script async src="analytics.js"></script>
{/* Good for: independent scripts like analytics — don't care about DOM or other scripts */}

defer — downloads in parallel; executes after HTML parsing is complete, in document order.

<script defer src="app.js"></script>
{/* Good for: scripts that need the DOM or must run in order (most app scripts) */}

	Blocks parsing	Execution time	Order preserved
default	Yes	Immediately	Yes
async	No	When downloaded	No
defer	No	After parse	Yes

💡 Modern bundlers (Vite, Next.js) automatically add defer to script tags. You mainly need to know this for third-party scripts added manually.

Question 4

Q4Core

What is image optimization and what techniques does Next.js Image component apply?

💡 Hint: Modern format (WebP/AVIF), correct sizing, lazy loading, blur placeholder, priority flag for LCP images

Practice this question →

Answer

Images are the largest contributor to page weight in most apps. Key optimization techniques:

1. Modern formats — WebP is 25–35% smaller than JPEG; AVIF is 50% smaller. Next.js <Image> automatically serves WebP/AVIF via the /api/_next/image optimizer.

2. Correct sizing (srcset) — serve a 300px image on mobile, not a 2000px image scaled down in CSS. Wastes bandwidth otherwise. Next.js generates srcset automatically from the sizes prop.

3. Lazy loading — images below the fold get loading="lazy" — browser only fetches when they enter the viewport.

4. Blur placeholder — while the image loads, a tiny blurred version (base64 inline) fills the space, preventing layout shift and improving perceived performance.

5. Priority / preload for LCP image — the hero image that will be the Largest Contentful Paint element should be preloaded.

// Next.js — LCP hero image
<Image
  src="/hero.jpg"
  alt="Hero"
  width={1200}
  height={600}
  priority           // adds <link rel="preload"> in <head>
  sizes="100vw"
/>

Question 5

Q5Advanced

What is the critical rendering path and how do you optimize it?

💡 Hint: HTML → DOM + CSSOM → Render Tree → Layout → Paint — render-blocking CSS and JS delay the first paint

Practice this question →

Answer

The critical rendering path is the sequence of steps the browser takes from receiving HTML bytes to displaying pixels on screen.

Steps:

HTML → DOM — parse HTML, build Document Object Model.
CSS → CSSOM — parse CSS (render-blocking by default), build CSS Object Model.
DOM + CSSOM → Render Tree — combine visible elements with computed styles.
Layout — calculate exact position and size of each element.
Paint — rasterize pixels to layers.
Composite — merge layers and push to screen.

Optimization techniques:

Eliminate render-blocking CSS — inline critical CSS; load non-critical CSS async (media="print" onload="this.media='all'").
Defer non-critical JS — use defer or dynamic import to keep JavaScript from blocking parsing.
Reduce CSS complexity — deep selectors slow CSSOM construction and style recalculation.
Minimize DOM size — large DOMs slow layout; avoid rendering hidden off-screen content.
Use CSS transforms for animation — transform/opacity run on the compositor thread without triggering layout.

Question 6

Q6Core

What is TTFB (Time to First Byte) and what factors affect it?

💡 Hint: Time between the browser sending a request and receiving the first byte of the response — affected by DNS, TCP, TLS, server processing, CDN

Practice this question →

Answer

TTFB measures the time from when the browser sends an HTTP request to when it receives the first byte of the response. Google's Core Web Vitals recommend TTFB under 800ms.

What TTFB includes:

DNS resolution time.
TCP connection time (3-way handshake).
TLS negotiation time (if HTTPS).
Server processing time (DB queries, SSR render, API calls).
Time for the first byte to travel from server to client (network latency).

Improvement strategies:

CDN — serve responses from edge nodes close to the user; eliminates most of the geographic latency.
Edge computing — run SSR at edge (Vercel Edge Functions, Cloudflare Workers) to reduce round-trip to origin.
Server-side caching — cache rendered HTML or API responses in Redis; skip DB queries on cache hit.
HTTP/2 or HTTP/3 — fewer round trips, better connection reuse.
Optimize slow queries — profile DB and N+1 query problems; they directly inflate server processing time.
Persistent connections — Connection: keep-alive avoids TCP handshake on repeated requests.

Network Optimization Interview Questions
With Answers & Code Examples

What is the difference between preload, prefetch, and preconnect?

How does HTTP/2 multiplexing improve performance over HTTP/1.1?

What is the difference between defer and async on script tags?

What is image optimization and what techniques does Next.js Image component apply?

What is the critical rendering path and how do you optimize it?

What is TTFB (Time to First Byte) and what factors affect it?

Other System-design Interview Topics

Ready to practice Network Optimization?