Frontend Performance60-90 min
Core Web Vitals Optimization
Find the real LCP element, remove layout shifts, reduce long tasks, and verify improvements with lab and field metrics.
LighthousePageSpeed InsightsReactChrome DevTools
Prerequisites
- A public or locally runnable page to test.
- Chrome Lighthouse or PageSpeed Insights.
- A production build for realistic measurements.
1
Plan the implementation
Start by choosing the exact page, route, API, or deployment surface you want to improve. A narrow target makes the implementation measurable and easier to verify.
- Write down the current behavior and the user-facing problem it creates.
- Pick one measurable success signal such as bundle size, latency, error rate, security coverage, or UI responsiveness.
- Identify the files, routes, providers, and environment variables involved.
- Create a rollback note before changing production-sensitive configuration.
2
Set up the required tools
Install or configure only the tools needed for this implementation. Keep config close to the feature so future developers can find the moving parts quickly.
Implementation snippet
npm run build
npm run preview
# Run Lighthouse against the preview URL.Checklist
- Dependencies are added to the correct workspace package.
- Environment variables are documented in `.env.example` when needed.
- Local development still starts without production-only secrets.
- The change is small enough to review in one pull request.
3
Implement the core pattern
- Identify the LCP element and make sure it is requested early.
- Reserve width and height for images, embeds, banners, and dynamic sections to reduce CLS.
- Break long JavaScript tasks by splitting heavy work or deferring non-critical widgets.
- Reduce render-blocking CSS and unused JavaScript.
- Compare mobile Lighthouse results before and after the change.
Implementation snippet
import { onCLS, onINP, onLCP } from "web-vitals";
onLCP((metric) => console.log("LCP", metric));
onCLS((metric) => console.log("CLS", metric));
onINP((metric) => console.log("INP", metric));4
Handle edge cases
Checklist
- LCP target is 2.5 seconds or less on a representative mobile test.
- CLS is below 0.1 after images and async content load.
- INP-sensitive interactions avoid large synchronous work.
- The page is tested in production build, not only dev mode.
5
Verify before production
- Run the app locally and test the normal success path.
- Test one failure path, one empty state, and one slow-network or retry path.
- Run the project build and any related unit or integration tests.
- Check browser console, server logs, and network responses for hidden warnings.
- Document the final behavior, commands used, and any follow-up work.