Performance Optimization Flashcards

Which CSS property enables hardware-accelerated animations by offloading to the GPU compositor?

Answer: will-change: transform

will-change: transform hints the browser to promote the element to its own compositor layer, enabling GPU acceleration.

What is the purpose of the 'defer' attribute on a tag?

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.

What does the Lighthouse 'Time to Interactive' (TTI) metric measure?

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.

Which approach best reduces the impact of third-party scripts on page performance?

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.

What is 'lazy loading' in the context of images?

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.

Which HTTP/2 feature eliminates the need for domain sharding as a performance technique?

Answer: Multiplexing

HTTP/2 multiplexing allows multiple requests over a single connection simultaneously, making domain sharding unnecessary.

What is the recommended strategy for serving different image resolutions to different device pixel ratios using HTML?

Answer: Using the srcset attribute on elements

The srcset attribute lets you specify multiple image sources at different sizes, and the browser picks the most appropriate one.