Performance Optimization Flashcards

What does the 'stale-while-revalidate' caching strategy do?

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.

Which Core Web Vital metric specifically measures visual stability by quantifying unexpected layout shifts?

Answer: Cumulative Layout Shift (CLS)

CLS measures the sum of all unexpected layout shift scores during a page's lifespan, quantifying visual instability.

What is the primary purpose of gzip or Brotli compression on HTTP responses?

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.

Which approach should you use to avoid long tasks blocking the main thread in JavaScript?

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.

What is the benefit of specifying explicit width and height attributes on elements?

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.

What does the 'preconnect' resource hint do?

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.

Which technique involves sending only the data needed by a specific client query, commonly associated with GraphQL, to avoid over-fetching?

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.