Front End Development Front End Development Performance & Optimization 2

Question 1

Which browser developer tool metric measures the time until the largest visible content element is rendered?

Accepted Answer

Largest Contentful Paint

Answer

Largest Contentful Paint (LCP) measures when the largest image or text block is rendered within the viewport, a key Core Web Vital.

Question 2

What is tree shaking in the context of JavaScript bundlers?

Accepted Answer

Removing unused code from the final bundle

Answer

Tree shaking statically analyzes import/export statements and eliminates dead (unused) code from the final JavaScript bundle.

Question 3

Which CSS technique avoids layout reflow by using transform for animations instead of top/left?

Accepted Answer

GPU compositing via transform

Answer

Using CSS transform promotes elements to their own compositor layer, avoiding costly layout reflow and paint operations.

Question 4

What does the HTML attribute 'loading="lazy"' on an <img> tag enable?

Accepted Answer

Defers loading the image until it's near the viewport

Answer

The loading='lazy' attribute tells the browser to defer loading an image until it's close to entering the viewport.

Question 5

What is code splitting in front-end development?

Accepted Answer

Dividing a JavaScript bundle into smaller chunks loaded on demand

Answer

Code splitting breaks a large JavaScript bundle into smaller chunks that are loaded only when needed, reducing initial page load time.

Front End Development Practice Test