Web Programming Web Performance and Optimization 3 — Questions and Answers
Question 1: What is the Time to First Byte (TTFB) metric?
- The time for the first image to load
- The time from when a request is sent until the browser receives the first byte of the response (Correct answer)
- The time to download the first JavaScript file
- The time for the first user interaction
Correct answer: The time from when a request is sent until the browser receives the first byte of the response
TTFB measures the duration from the user's browser requesting a page to when the browser receives the first byte of data from the server, indicating server response performance.
Question 2: What is the purpose of preloading resources in web performance?
- To cache resources for offline use
- To tell the browser to fetch critical resources earlier in the page load lifecycle (Correct answer)
- To load resources after user interaction
- To load resources on other pages proactively
Correct answer: To tell the browser to fetch critical resources earlier in the page load lifecycle
Preloading instructs the browser to fetch important resources (fonts, critical CSS, key images) as early as possible in the page load to avoid delays when they're later needed.
Question 3: What does the Cumulative Layout Shift (CLS) Core Web Vital measure?
- The total number of layout elements on a page
- The visual stability of a page — how much unexpected content shifting occurs during load (Correct answer)
- The time taken to complete all CSS animations
- The number of times a page layout changes per second
Correct answer: The visual stability of a page — how much unexpected content shifting occurs during load
CLS (Cumulative Layout Shift) measures the visual stability of a page by scoring unexpected shifts in layout that occur as content loads, affecting user experience.
Question 4: What is tree shaking in JavaScript bundling?
- Removing unused CSS selectors
- Eliminating dead code (unused exports) from the final JavaScript bundle (Correct answer)
- Organizing the DOM tree structure
- Optimizing recursive function calls
Correct answer: Eliminating dead code (unused exports) from the final JavaScript bundle
Tree shaking is a dead code elimination technique used by bundlers like Webpack and Rollup that removes JavaScript code that is exported but never imported or used.
Question 5: What is the difference between synchronous and asynchronous JavaScript loading?
- Synchronous JS is secure; asynchronous is not
- Synchronous loading blocks HTML parsing; asynchronous loading allows HTML to continue parsing while JS downloads (Correct answer)
- Synchronous loading is faster; asynchronous is slower
- Synchronous is for modules; asynchronous is for scripts
Correct answer: Synchronous loading blocks HTML parsing; asynchronous loading allows HTML to continue parsing while JS downloads
Synchronous (default) script loading blocks HTML parsing until the script is fully downloaded and executed, while async/defer attributes allow the HTML to continue parsing concurrently.
Question 6: What is the purpose of a Content Security Policy (CSP) header?
- To cache content for faster delivery
- To specify which sources the browser is allowed to load resources from, preventing XSS attacks (Correct answer)
- To compress content before sending
- To set content expiration times
Correct answer: To specify which sources the browser is allowed to load resources from, preventing XSS attacks
A Content Security Policy is a browser security feature that lets servers specify which origins are trusted for scripts, styles, and other resources, mitigating XSS and data injection attacks.
Web Programming Web Performance and Optimization 3
What is the Time to First Byte (TTFB) metric?