Practical Guide to Optimizing Core Web Vitals (INP & LCP)

Google’s Core Web Vitals directly correlate with user satisfaction and search rankings. Let us look at high-impact techniques to optimize them.

Crushing INP (Interaction to Next Paint)

Long tasks that block the main thread for over 50ms cause noticeable input lag.

// Yield to main thread during expensive operations
async function yieldToMain() {
  return new Promise((resolve) => {
    setTimeout(resolve, 0)
  })
}

for (const batch of largeDataset) {
  processBatch(batch)
  await yieldToMain()
}

Streamlining LCP

• Preload hero fonts with <link rel="preload" as="font">.
• Use modern formats like AVIF or WebP.
• Inline critical CSS to avoid network blocking.