# Interview questions and practical scenarios — Web Performance Optimization

Source: https://www.skillbyai.com/en/web-performance/web-perf-25

> Prepare for technical interviews and real-world performance challenges with practical scenarios.

## Scenario: Slow first page load

User reports 5s first load. Steps: 1) Run Lighthouse → identify bottleneck 2) Check bundle size, minification 3) Profile with DevTools 4) Look for unoptimized images, render-blocking CSS 5) Test on 3G. Solution often: compress images (40% improvement) + code split (20-30%) + defer JS (10-20%).

## Scenario: High CLS from ads

Ad loads cause layout shift. Solutions: 1) Reserve space for ads with fixed-size containers 2) Use `aspect-ratio` CSS property 3) Load ads asynchronously in isolated iframe 4) Lazy load ads below fold. CLS should drop from 0.3+ to <0.1 after fixes.

## Scenario: Poor mobile performance

Desktop fast, mobile slow. Investigate: 1) Network bandwidth bottleneck (use responsive images) 2) CPU-bound JavaScript (use code splitting, main thread optimization) 3) Memory issues (remove polyfills) 4) Third-party impact (prioritize critical). Mobile often 10x slower than desktop.

## Interview preparation

Be ready to discuss: Web Vitals metrics, optimization techniques, tools (DevTools, Lighthouse, WebPageTest). Walk through example optimization from profiling to measurement. Ask about team's performance process. Show understanding of tradeoffs, not just optimizations.

Quick check

**Quiz:** When optimizing performance, what comes first?

- [ ] Apply all optimizations
- [x] Measure and profile to identify bottlenecks
- [ ] Rewrite the code
- [ ] Add a CDN before checking anything

*Answer:* Measure and profile to identify bottlenecks. Measuring first ensures you fix the real bottleneck rather than guess.

## Final quiz 1 of 8

Final quiz

**Quiz:** Which Core Web Vital measures responsiveness to user interactions?

- [x] INP
- [ ] LCP
- [ ] CLS
- [ ] TTFB

*Answer:* INP. INP replaced FID in March 2024 and tracks interaction latency across the visit.

## Final quiz 2 of 8

Final quiz

**Quiz:** Which header gives a fingerprinted static asset the longest useful cache life?

- [ ] Cache-Control: no-store
- [x] Cache-Control: public, max-age=31536000
- [ ] Cache-Control: max-age=0
- [ ] Content-Encoding: gzip

*Answer:* Cache-Control: public, max-age=31536000. A one-year max-age is safe when the filename changes with its content.

## Final quiz 3 of 8

Final quiz

**Quiz:** Which attribute defers offscreen images until they are needed?

- [ ] decoding="sync"
- [x] loading="lazy"
- [ ] fetchpriority="high"
- [ ] rel="preload"

*Answer:* loading="lazy". Native lazy loading delays below-the-fold images and reduces the initial payload.

## Final quiz 4 of 8

Final quiz

**Quiz:** What is a long task?

- [ ] Any task over 5ms
- [x] Any task over 50ms on the main thread
- [ ] Any request over 1 second
- [ ] Any script over 100KB

*Answer:* Any task over 50ms on the main thread. Tasks over 50ms block the main thread and hurt responsiveness.

## Final quiz 5 of 8

Final quiz

**Quiz:** Why reserve space for ads and images with fixed dimensions?

- [x] To lower CLS
- [ ] To raise TTFB
- [ ] To disable caching
- [ ] To enable HTTP/3

*Answer:* To lower CLS. Reserved space stops content jumping when late resources load.

## Final quiz 6 of 8

Final quiz

**Quiz:** Which approach best reveals real-user performance?

- [ ] A single Lighthouse run on your laptop
- [x] Real User Monitoring (RUM)
- [ ] Counting HTML files
- [ ] Minifying CSS

*Answer:* Real User Monitoring (RUM). RUM captures real devices, networks and locations that lab tests miss.

## Final quiz 7 of 8

Final quiz

**Quiz:** What does a performance budget do in CI?

- [x] Fails the build when limits are exceeded
- [ ] Speeds up the server
- [ ] Compresses images automatically
- [ ] Replaces monitoring

*Answer:* Fails the build when limits are exceeded. Budgets act as guardrails that catch regressions before release.

## Final quiz 8 of 8

Final quiz

**Quiz:** What should you do first when a page is slow?

- [x] Measure and profile to find the bottleneck
- [ ] Add every optimization
- [ ] Rewrite in a new framework
- [ ] Add a CDN only

*Answer:* Measure and profile to find the bottleneck. Fixing the measured bottleneck gives the biggest, most reliable gain.