Core Web Vitals: LCP ऑप्टिमाइजेशन की पूरी गाइड 2026

Google के Core Web Vitals SEO रैंकिंग का एक महत्वपूर्ण हिस्सा हैं। इस गाइड में हम LCP (Largest Contentful Paint) को ऑप्टिमाइज़ करने के व्यावहारिक तरीके देखेंगे।

LCP क्या है?

LCP वह समय है जब पेज का सबसे बड़ा दृश्य तत्व (इमेज, वीडियो, या टेक्स्ट ब्लॉक) लोड होता है।

Google के मानक:

• Good: ≤ 2.5 सेकंड
• Needs Improvement: 2.5 – 4.0 सेकंड
• Poor: > 4.0 सेकंड

LCP खराब होने के मुख्य कारण

1. 1अनऑप्टिमाइज़्ड इमेज — सबसे बड़ा कारण
2. 2Render-blocking JavaScript — CSS और JS लोडिंग में देरी
3. 3धीमा Server Response Time (TTFB) — सर्वर 600ms से अधिक लेता है
4. 4Client-side Rendering — React/Next.js में SSR का उपयोग न करना

इमेज ऑप्टिमाइजेशन

Next.js Image Component

import Image from 'next/image'

// Hero image के लिए priority prop जरूरी
<Image
  src="/hero.jpg"
  alt="Hero Image"
  width={1200}
  height={600}
  priority  // LCP element के लिए
  quality={85}
  formats={['image/webp', 'image/avif']}
/>

इमेज फॉर्मेट

Preload Hints

LCP element के लिए preload hint जोड़ें:

<link
  rel="preload"
  href="/hero-image.webp"
  as="image"
  fetchpriority="high"
/>

TTFB कम करना

Cloudflare Cache Rules

// next.config.js
module.exports = {
  async headers() {
    return [
      {
        source: '/_next/static/:path*',
        headers: [
          { key: 'Cache-Control', value: 'public, max-age=31536000, immutable' }
        ]
      }
    ]
  }
}

Edge Caching

Cloudflare Pages के साथ Edge caching उपयोग करें:

• Static assets: Cache for 1 year
• HTML pages: Cache for 1 hour with stale-while-revalidate
• API routes: Cache for appropriate duration

JavaScript और CSS ऑप्टिमाइजेशन

Critical CSS Inlining

// next.config.js
const nextConfig = {
  experimental: {
    optimizeCss: true,  // Critical CSS inline करता है
  }
}

Dynamic Imports

// Non-critical components को lazy load करें
const HeavyComponent = dynamic(() => import('./HeavyComponent'), {
  loading: () => <Skeleton />,
  ssr: false  // सर्वर पर रेंडर न करें
})

Fonts ऑप्टिमाइजेशन

// app/layout.tsx
import { Inter } from 'next/font/google'

const inter = Inter({
  subsets: ['latin'],
  display: 'swap',  // FOUT बेहतर है FOIT से
  preload: true,
})

LCP मापने के टूल्स

1. 1Google PageSpeed Insights — मुफ्त, फील्ड डेटा
2. 2Chrome DevTools — Performance tab
3. 3Lighthouse — Automated audit
4. 4WebPageTest — विस्तृत विश्लेषण

वास्तविक सुधार उदाहरण

एक e-commerce साइट का केस:

• पहले: LCP 5.2 सेकंड
• WebP conversion: 4.1 सेकंड
• Priority loading: 3.2 सेकंड
• Edge caching: 2.1 सेकंड
• अंतिम: 1.8 सेकंड (65% सुधार)

निष्कर्ष

LCP ऑप्टिमाइज़ेशन के लिए:

1. 1Hero images को WebP/AVIF में convert करें
2. 2priority prop LCP elements पर लगाएं
3. 3TTFB कम करने के लिए Edge CDN उपयोग करें
4. 4Critical CSS inline करें
5. 5Non-critical JS को lazy load करें

अक्सर पूछे जाने वाले प्रश्न

LCP का SEO पर क्या असर है? Google Page Experience signal का हिस्सा है। खराब LCP रैंकिंग को नुकसान पहुंचा सकता है।

Next.js में LCP क्यों खराब होता है? SSR बिना proper caching के और large hero images मुख्य कारण हैं।

AVIF vs WebP कौन बेहतर है? AVIF 30-50% छोटा होता है लेकिन conversion धीमा है। दोनों को fallback के साथ प्रदान करें।