---
title: 'Practical Guide to Optimizing Core Web Vitals (INP & LCP)'
description: 'Actionable techniques to boost your site’s Interaction to Next Paint and Largest Contentful Paint.'
subtitle: 'Real-world profiling, font optimization, and main-thread budgeting.'
date: '2025-06-15'
lang: 'en'
---

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.

```typescript
// 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.