How to Improve Core Web Vitals

Step 1 — Measure Your Starting Point

Begin with data. Check the Core Web Vitals report in Google Search Console for field data (real users), and use PageSpeed Insights for both field and lab data on specific pages.

Note which metric is failing and on which page templates, so you fix the right problem rather than guessing.

Step 2 — Improve LCP (loading)

Largest Contentful Paint measures how long until the main content appears. Slow LCP usually comes from heavy images, slow servers, or render-blocking code.

• Compress images and serve modern formats (WebP/AVIF)
• Correctly size images for each device
• Preload the main hero image or critical asset
• Remove or defer render-blocking CSS and JavaScript
• Improve server response time (caching, better hosting, a CDN)

Step 3 — Improve INP (responsiveness)

Interaction to Next Paint measures how quickly the page responds when someone taps or clicks. Sluggishness almost always traces back to heavy JavaScript blocking the main thread.

• Reduce the amount of JavaScript you ship
• Defer or lazy-load non-critical scripts
• Break up long-running tasks
• Remove unused third-party scripts and trackers

Step 4 — Improve CLS (visual Stability)

Cumulative Layout Shift measures how much content jumps around while loading — the annoying shift that makes you tap the wrong thing. It comes from elements that load without reserved space.

• Set explicit width and height on images and video
• Reserve space for ads, embeds, and dynamic content
• Preload fonts and use font-display to avoid late swaps
• Avoid inserting content above existing content after load

Step 5 — Verify With Real-User Data

After making changes, re-check PageSpeed Insights — but the number that counts is field data from real users, which Google updates over a rolling 28-day window. Expect passing status to confirm a few weeks after your fixes take effect.

Optimize for the devices and connections your visitors actually have, not just a flattering score on your own fast machine.