Performance Optimization Flashcards

What does the browser's Critical Rendering Path (CRP) determine?

Answer: The sequence of steps to convert HTML/CSS/JS into pixels on screen

The Critical Rendering Path describes the steps the browser takes—DOM, CSSOM, render tree, layout, paint—to display content.

Which HTTP header instructs the browser to cache a resource for exactly 1 hour?

Answer: Cache-Control: max-age=3600

Cache-Control: max-age=3600 tells the browser the resource is fresh for 3600 seconds (1 hour).

What is the primary benefit of using a Content Delivery Network (CDN)?

Answer: It reduces latency by serving assets from servers geographically closer to users

CDNs cache and serve static assets from edge nodes nearest the user, reducing round-trip time.

Which technique reduces the number of HTTP requests by combining multiple CSS or JS files into one?

Answer: Bundling

Bundling merges multiple files into a single file, reducing the number of individual HTTP requests.

What does 'tree shaking' accomplish in modern JavaScript build tools?

Answer: Removes unused exports from the final bundle

Tree shaking statically analyzes ES module imports and eliminates dead code that is never imported.

Which image format provides both lossless and lossy compression and supports transparency, with excellent browser support as of 2024?

Answer: WebP

WebP supports both lossless and lossy compression with alpha transparency and typically produces smaller files than JPEG or PNG.

What is 'render-blocking' in the context of web performance?

Answer: When a resource must be downloaded and processed before the browser can render content

Render-blocking resources like synchronous CSS and JS in pause the browser's rendering pipeline until fully downloaded and parsed.