Interview questions and 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

Quick check: When optimizing performance, what comes first?

• Measure and profile to identify bottlenecks
• Apply all optimizations
• Rewrite the code