Performance & Optimization
Core Web Vitals Optimization: The Complete Checklist for 100 out of 100 Lighthouse
Core Web Vitals (LCP, CLS, INP) directly affect Google rankings. Here is a step-by-step checklist to achieve a perfect Lighthouse score.
Google uses Core Web Vitals as ranking signals. Here is how to ace all three.
LCP (Largest Contentful Paint) Target under 2.5s
- ●Use next/image with priority for hero images
- ●Preload critical fonts with display swap
- ●Eliminate render-blocking CSS and JS
- ●Use server-side rendering for above-the-fold content
- ●Compress images to WebP or AVIF
CLS (Cumulative Layout Shift) Target under 0.1
- ●Always set width and height on images and videos
- ●Reserve space for dynamic content like ads and embeds
- ●Use CSS contain for complex layouts
- ●Avoid inserting content above existing content
INP (Interaction to Next Paint) Target under 200ms
- ●Break up long tasks with requestIdleCallback
- ●Use startTransition for non-urgent updates
- ●Debounce expensive event handlers
- ●Move heavy computation to Web Workers
- ●Reduce JavaScript bundle size
Measurement Tools
- ●Lighthouse for lab data
- ●PageSpeed Insights for field plus lab data
- ●Chrome UX Report for real user data
Get expert optimization with our web development services.
Core Web VitalsLCPCLSINPLighthouse
MD
Written by M Daniyal Amjad Ali
Full Stack Software Engineer with 5+ years of experience. Expert in Next.js, React, Node.js, and Prisma. 100+ projects delivered worldwide.