Web Development Performance Optimization 5 — Questions and Answers
Question 1: What does the 'stale-while-revalidate' caching strategy do?
- Serves only from the network and ignores the cache
- Serves a cached response immediately while fetching an updated version in the background (Correct answer)
- Deletes stale entries and waits for a fresh network response
- Serves cached content only when the network is unavailable
Correct answer: Serves a cached response immediately while fetching an updated version in the background
Stale-while-revalidate returns the cached response instantly and asynchronously refreshes it so the next request gets a fresh version.
Question 2: Which Core Web Vital metric specifically measures visual stability by quantifying unexpected layout shifts?
- Largest Contentful Paint (LCP)
- First Input Delay (FID)
- Cumulative Layout Shift (CLS) (Correct answer)
- Interaction to Next Paint (INP)
Correct answer: Cumulative Layout Shift (CLS)
CLS measures the sum of all unexpected layout shift scores during a page's lifespan, quantifying visual instability.
Question 3: What is the primary purpose of gzip or Brotli compression on HTTP responses?
- To encrypt the response body
- To reduce the transfer size of text-based assets like HTML, CSS, and JS (Correct answer)
- To reorder HTML elements for faster parsing
- To convert images to a more efficient format
Correct answer: To reduce the transfer size of text-based assets like HTML, CSS, and JS
Gzip and Brotli compress text responses before sending, reducing bytes transferred over the network and improving load times.
Question 4: Which approach should you use to avoid long tasks blocking the main thread in JavaScript?
- Using synchronous XMLHttpRequest
- Breaking long tasks into smaller chunks using setTimeout or scheduler.yield() (Correct answer)
- Disabling garbage collection during computation
- Running all code inside Web Workers only
Correct answer: Breaking long tasks into smaller chunks using setTimeout or scheduler.yield()
Yielding to the browser between chunks (via setTimeout(0) or scheduler.yield()) lets the browser handle user input between work units.
Question 5: What is the benefit of specifying explicit width and height attributes on <img> elements?
- It tells the browser to skip lazy loading for those images
- It allows the browser to reserve space before the image loads, preventing layout shifts (Correct answer)
- It enables hardware-accelerated image decoding
- It forces the browser to download images at full resolution
Correct answer: It allows the browser to reserve space before the image loads, preventing layout shifts
Explicit dimensions let the browser calculate the aspect ratio and reserve the correct space, eliminating layout shifts as images load.
Question 6: What does the 'preconnect' resource hint do?
- Downloads and caches a resource before it is needed
- Establishes the TCP/TLS connection to an origin early, reducing latency for future requests (Correct answer)
- Renders a page in a hidden tab before the user navigates to it
- Prefetches DNS records for all links on the current page
Correct answer: Establishes the TCP/TLS connection to an origin early, reducing latency for future requests
preconnect performs the DNS lookup, TCP handshake, and TLS negotiation early so subsequent requests to that origin are faster.
Question 7: Which technique involves sending only the data needed by a specific client query, commonly associated with GraphQL, to avoid over-fetching?
- Server-side rendering
- Pagination
- Selective data fetching / declarative queries (Correct answer)
- Response streaming
Correct answer: Selective data fetching / declarative queries
GraphQL lets clients specify exactly what fields they need, preventing over-fetching of unused data and reducing payload size.
Web Development Performance Optimization 5
What does the 'stale-while-revalidate' caching strategy do?