A page has a poor LCP score. How would you investigate and fix it?
What the interviewer wants to hear
- Measure with field data (CrUX, RUM) and Lighthouse or DevTools
- Identify the LCP element
- Reduce server response time and use a CDN
- Optimise and prioritise the LCP image (fetchpriority, preload, modern formats)
- Remove render-blocking CSS and JavaScript, reduce bundle size
- Avoid lazy-loading the LCP element
Model answer
I first check real user data from CrUX or our RUM tool, because lab scores can differ. Then I use DevTools Performance panel or Lighthouse to find which element is the LCP, usually a hero image or a big heading. I break LCP into parts: server time, resource load delay, load time and render delay. For slow server time I look at caching and a CDN. If the LCP is an image, I make sure it is in the HTML, not injected by JavaScript, not lazy-loaded, has fetchpriority="high", and uses a properly sized AVIF or WebP file. I remove render-blocking CSS and scripts, inline critical CSS, and split large JavaScript bundles. Then I measure again and set a budget in CI.
Can you answer it under time pressure?
Take a timed medium round and get scored on every answer.
More medium Frontend Developer questions
- Explain the JavaScript event loop, including microtasks and macrotasks.
- How do you decide where to keep state in a React app: local state, context, a store, or a server-cache library?
- What testing strategy would you use for a frontend application?
- Explain client-side rendering, server-side rendering and static site generation. When would you use each?
- What happens between typing a URL in the browser and seeing the page rendered? Focus on the frontend side.
- A React screen feels slow. How do you find and reduce unnecessary re-renders?
- How do you handle loading, error and empty states when a screen fetches data from an API?
- How do you use TypeScript effectively in a React codebase?
- How would you handle user authentication and tokens in a single-page app or Next.js frontend?