The Complete Core Web Vitals Optimization Guide: Practical Methods to Improve LCP, INP, and CLS

What Are Core Web Vitals?

Core Web Vitals are the page user-experience metrics that Google officially incorporated into its ranking factors in 2021. They consist of three core metrics:

Note: In March 2024, INP officially replaced FID as the interaction metric in Core Web Vitals.

How Do You Diagnose Core Web Vitals Issues?

Treat Search Console data as authoritative (it reflects real user experience); PageSpeed Insights lab data is for reference only.

LCP Optimization: Speed Up the Largest Contentful Paint

LCP measures the time it takes for the largest visible element in the viewport (usually the above-the-fold hero image or a large block of text) to finish rendering.

5 Most Common Issues and Fixes

① The above-the-fold image isn't preloaded

<img src="hero.jpg" fetchpriority="high" alt="首屏图" />

② Image format isn't optimized → Convert to WebP/AVIF (30-50% smaller file size)

<picture>
  <source srcset="hero.avif" type="image/avif" />
  <source srcset="hero.webp" type="image/webp" />
  <img src="hero.jpg" alt="首屏图" />
</picture>

③ Critical CSS blocks rendering → Inline above-the-fold CSS and load non-critical CSS asynchronously

④ Slow server response (TTFB > 800ms) → Enable a CDN and turn on server-side caching

⑤ Third-party scripts block the main thread → Add defer or async to analytics/ad scripts

INP Optimization: Improve Interaction Responsiveness

INP measures the time from a user interaction (click, keyboard input) to the browser's next completed visual update.

Core Optimization Directions

① Reduce main-thread blocking (long tasks > 50ms)

// ❌ Doing heavy computation inside a click handler
button.addEventListener('click', () => {
  const result = heavyComputation(); // blocks the main thread
  updateUI(result);
});

// ✅ Update the visual feedback first, then run the computation
button.addEventListener('click', () => {
  updateUIImmediately();
  setTimeout(() => heavyComputation(), 0);
});

② Vue/React single-page-application specifics

• Avoid complex computations inside v-for / Array.map
• Use virtual scrolling for long lists
• Use computed / useMemo sensibly to cache computed results

CLS Optimization: Eliminate Layout Shifts

CLS measures the cumulative amount of unexpected position changes that elements undergo while a page loads.

Most Common Causes and Fixes

① Images/videos without set dimensions → Always set width and height

<!-- ❌ --> <img src="photo.jpg" alt="图片" />
<!-- ✅ --> <img src="photo.jpg" alt="图片" width="800" height="450" />

② Dynamically injected ads/banners → Reserve a container with a fixed height

③ Custom fonts causing text reflow (FOUT) → Set font-display: swap in your CSS

④ Dynamically inserted DOM elements (modals, notification bars) → Use position: fixed to avoid affecting the document flow

The Relationship Between Core Web Vitals and AI Crawlers

The Perplexity crawler has a time budget when crawling a page. Pages with LCP > 3 seconds are roughly 40% less likely to be cited by Perplexity (based on 2025 test data). Optimizing Core Web Vitals improves both your Google ranking and your AI citation rate.

Frequently Asked Questions (FAQ)

Q: How heavily weighted is Core Web Vitals as a ranking factor? A: Relatively lightly. Content relevance and quality remain the most important ranking factors. CWV mainly becomes decisive when content quality is comparable.

Q: My PageSpeed Insights score is 90+, but Search Console shows "needs improvement"—why? A: PageSpeed Insights uses simulated-environment data, while Search Console uses real-user field data (28-day average). The difference comes from users' actual network conditions and device performance. Treat the Search Console data as authoritative.

Check out the SGAIndex SEO Tools Directory for page-speed optimization tools.