Web Development Performance Optimization 3 — Questions and Answers
Question 1: Which CSS property enables hardware-accelerated animations by offloading to the GPU compositor?
- position: fixed
- will-change: transform (Correct answer)
- display: flex
- overflow: hidden
Correct answer: will-change: transform
will-change: transform hints the browser to promote the element to its own compositor layer, enabling GPU acceleration.
Question 2: What is the purpose of the 'defer' attribute on a <script> tag?
- It prevents the script from executing entirely
- It downloads the script in parallel and executes it after HTML parsing completes (Correct answer)
- It executes the script immediately before DOM construction
- It makes the script execute only on user interaction
Correct answer: It downloads the script in parallel and executes it after HTML parsing completes
defer downloads the script without blocking parsing and executes it in order after the document is fully parsed.
Question 3: What does the Lighthouse 'Time to Interactive' (TTI) metric measure?
- When the first byte of response is received
- When the page appears visually complete
- When the page is fully interactive and reliably responds to user input (Correct answer)
- When the largest content element is rendered
Correct answer: When the page is fully interactive and reliably responds to user input
TTI measures when the main thread is quiet for at least 5 seconds and the page can reliably respond to user input.
Question 4: Which approach best reduces the impact of third-party scripts on page performance?
- Inlining all third-party scripts
- Loading third-party scripts with the 'async' attribute or deferring them (Correct answer)
- Blocking all third-party scripts via CSP
- Minifying third-party scripts locally
Correct answer: Loading third-party scripts with the 'async' attribute or deferring them
Using async or defer for third-party scripts prevents them from blocking the main thread during page load.
Question 5: What is 'lazy loading' in the context of images?
- Compressing images to reduce their file size
- Loading images only when they enter (or approach) the viewport (Correct answer)
- Caching images in a service worker
- Serving different image sizes based on device pixel ratio
Correct answer: Loading images only when they enter (or approach) the viewport
Lazy loading defers loading off-screen images until the user scrolls near them, reducing initial page load time.
Question 6: Which HTTP/2 feature eliminates the need for domain sharding as a performance technique?
- Server push
- Header compression (HPACK)
- Multiplexing (Correct answer)
- Binary framing
Correct answer: Multiplexing
HTTP/2 multiplexing allows multiple requests over a single connection simultaneously, making domain sharding unnecessary.
Question 7: What is the recommended strategy for serving different image resolutions to different device pixel ratios using HTML?
- Using CSS media queries on <img> tags
- Using the srcset attribute on <img> elements (Correct answer)
- Using JavaScript to dynamically set the src attribute
- Using data-src attributes with a polyfill
Correct answer: Using the srcset attribute on <img> elements
The srcset attribute lets you specify multiple image sources at different sizes, and the browser picks the most appropriate one.
Web Development Performance Optimization 3
Which CSS property enables hardware-accelerated animations by offloading to the GPU compositor?