Front End Development Front End Development Performance & Optimization 2 — Questions and Answers
Question 1: Which browser developer tool metric measures the time until the largest visible content element is rendered?
- First Contentful Paint
- Time to Interactive
- Largest Contentful Paint (Correct answer)
- Cumulative Layout Shift
Correct answer: Largest Contentful Paint
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?
- Animating DOM elements
- Removing unused code from the final bundle (Correct answer)
- Splitting code into multiple files
- Converting CommonJS to ESM
Correct answer: Removing unused code from the final bundle
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?
- GPU compositing via transform (Correct answer)
- CSS transitions
- Float-based layout
- Absolute positioning
Correct answer: GPU compositing via transform
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?
- Reduces image resolution
- Defers loading the image until it's near the viewport (Correct answer)
- Converts the image to WebP
- Preloads the image before page render
Correct answer: Defers loading the image until it's near the viewport
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?
- Writing CSS and JavaScript in separate files
- Dividing a JavaScript bundle into smaller chunks loaded on demand (Correct answer)
- Separating development and production code
- Using different frameworks for different pages
Correct answer: Dividing a JavaScript bundle into smaller chunks loaded on demand
Code splitting breaks a large JavaScript bundle into smaller chunks that are loaded only when needed, reducing initial page load time.
Question 6: Which performance metric measures unexpected layout shifts experienced by users?
- First Input Delay
- Cumulative Layout Shift (Correct answer)
- Time to First Byte
- First Contentful Paint
Correct answer: Cumulative Layout Shift
Cumulative Layout Shift (CLS) measures the total amount of unexpected layout shifts that occur during a page's lifetime.
Front End Development Front End Development Performance & Optimization 2
Which browser developer tool metric measures the time until the largest visible content element is rendered?