SEO
Core Web Vitals संपूर्ण गाइड 2026 - पेज अनुभव अनुकूलन
LCP, INP, CLS मेट्रिक्स का अर्थ और अनुकूलन विधियां। Google रैंकिंग कारक Core Web Vitals को बेहतर बनाने की व्यावहारिक गाइड।
Toolypet Team
Development Team
Core Web Vitals संपूर्ण गाइड 2026
"साइट बहुत धीमी थी, इसलिए मैं चला गया"
53% उपयोगकर्ता पेज छोड़ देते हैं अगर लोडिंग में 3 सेकंड से अधिक समय लगता है। Google ने इस उपयोगकर्ता अनुभव को रैंकिंग में प्रतिबिंबित करने के लिए Core Web Vitals पेश किया।
2026 में, Core Web Vitals मोबाइल SEO के लिए एक प्रमुख रैंकिंग कारक है।
Core Web Vitals क्या है?
Core Web Vitals उपयोगकर्ता अनुभव को मापने वाली 3 प्रमुख मेट्रिक्स हैं।
2026 मेट्रिक्स
| मेट्रिक | मापता है | अच्छा | सुधार जरूरी | खराब |
|---|---|---|---|---|
| LCP | लोडिंग स्पीड | ≤2.5s | ≤4s | >4s |
| INP | इंटरैक्शन प्रतिक्रिया | ≤200ms | ≤500ms | >500ms |
| CLS | विज़ुअल स्थिरता | ≤0.1 | ≤0.25 | >0.25 |
मेट्रिक परिवर्तन (2024)
FID (First Input Delay) → INP (Interaction to Next Paint)
FID: केवल पहली इनपुट मापी
INP: सभी इंटरैक्शन की प्रतिक्रियाशीलता मापता है (अधिक व्यापक)
LCP (Largest Contentful Paint)
परिभाषा
पेज पर सबसे बड़े कंटेंट तत्व को स्क्रीन पर रेंडर होने में लगने वाला समय
मापे जाने वाले तत्व
| तत्व | उदाहरण |
|---|---|
<img> | हीरो इमेज |
<video> पोस्टर | वीडियो थंबनेल |
CSS background-image | बैकग्राउंड इमेज |
| टेक्स्ट ब्लॉक | <h1>, <p>, आदि |
अनुकूलन विधियां
1. इमेज ऑप्टिमाइजेशन
<!-- ❌ धीमा -->
<img src="hero.png" alt="Hero">
<!-- ✅ ऑप्टिमाइज्ड -->
<img
src="hero.webp"
srcset="hero-400.webp 400w, hero-800.webp 800w"
sizes="(max-width: 600px) 400px, 800px"
alt="Hero"
loading="eager"
fetchpriority="high"
>
2. सर्वर प्रतिक्रिया समय (TTFB)
लक्ष्य: TTFB < 200ms
सुधार विधियां:
- CDN का उपयोग करें
- सर्वर-साइड कैशिंग
- डेटाबेस क्वेरी ऑप्टिमाइजेशन
- HTTP/2 या HTTP/3
3. रेंडर-ब्लॉकिंग रिसोर्सेज हटाएं
<!-- ❌ रेंडर ब्लॉकिंग -->
<link rel="stylesheet" href="styles.css">
<script src="app.js"></script>
<!-- ✅ ऑप्टिमाइज्ड -->
<link rel="stylesheet" href="critical.css">
<link rel="preload" href="styles.css" as="style" onload="this.rel='stylesheet'">
<script src="app.js" defer></script>
4. क्रिटिकल CSS इनलाइन
<head>
<style>
/* पहली स्क्रीन के लिए केवल आवश्यक CSS */
.hero { ... }
.header { ... }
</style>
<link rel="preload" href="full.css" as="style">
</head>
5. प्रीलोड हिंट्स
<head>
<!-- LCP इमेज प्रीलोड -->
<link rel="preload" href="hero.webp" as="image" fetchpriority="high">
<!-- वेब फॉन्ट्स प्रीलोड -->
<link rel="preload" href="font.woff2" as="font" crossorigin>
</head>
INP (Interaction to Next Paint)
परिभाषा
उपयोगकर्ता इंटरैक्शन (क्लिक, टैप, की प्रेस) से अगले स्क्रीन अपडेट तक का समय
FID से अंतर
| FID | INP |
|---|---|
| केवल पहली इनपुट | सभी इंटरैक्शन |
| केवल इनपुट विलंब | कुल प्रतिक्रिया समय |
| 2024 में बंद | मार्च 2024 में बदला |
क्या मापा जाता है
- क्लिक (माउस, टच)
- की प्रेस
- टैप (मोबाइल)
अनुकूलन विधियां
1. मेन थ्रेड ब्लॉकिंग रोकें
// ❌ मेन थ्रेड ब्लॉकिंग
function heavyTask() {
for (let i = 0; i < 1000000; i++) {
// भारी गणना
}
}
// ✅ चंक्स में विभाजित
async function heavyTaskChunked() {
const chunks = splitIntoChunks(data, 1000);
for (const chunk of chunks) {
processChunk(chunk);
await new Promise(r => setTimeout(r, 0)); // यील्ड
}
}
2. Debounce/Throttle
// ❌ हर बार निष्पादित
input.addEventListener('input', search);
// ✅ Debounce
input.addEventListener('input', debounce(search, 300));
3. Web Workers का उपयोग
// मेन थ्रेड
const worker = new Worker('worker.js');
worker.postMessage(data);
worker.onmessage = (e) => updateUI(e.data);
// worker.js
self.onmessage = (e) => {
const result = heavyComputation(e.data);
self.postMessage(result);
};
4. इवेंट हैंडलर्स ऑप्टिमाइज करें
// ❌ भारी हैंडलर
button.onclick = () => {
computeData(); // भारी
updateDOM(); // DOM मैनिपुलेशन
sendAnalytics(); // नेटवर्क
};
// ✅ एसिंक्रोनस अलगाव
button.onclick = async () => {
requestAnimationFrame(() => {
updateDOM(); // पहले तेज UI अपडेट
});
await computeDataAsync();
sendAnalytics(); // बाद में
};
5. स्क्रिप्ट साइज कम करें
// Code splitting
const Modal = React.lazy(() => import('./Modal'));
// Tree shaking
import { specific } from 'library'; // पूर्ण इंपोर्ट से बचें
CLS (Cumulative Layout Shift)
परिभाषा
पेज लोड के दौरान अप्रत्याशित लेआउट शिफ्ट का संचयी स्कोर
समस्या परिदृश्य
उपयोगकर्ता: बटन क्लिक करने वाला है
विज्ञापन लोड होता है: लेआउट शिफ्ट होता है
परिणाम: गलत बटन क्लिक हो जाता है
अनुकूलन विधियां
1. इमेज/वीडियो आयाम निर्दिष्ट करें
<!-- ❌ कोई आयाम नहीं (CLS का कारण) -->
<img src="photo.jpg" alt="Photo">
<!-- ✅ आयाम निर्दिष्ट -->
<img src="photo.jpg" alt="Photo" width="800" height="600">
<!-- ✅ aspect-ratio का उपयोग -->
<img src="photo.jpg" alt="Photo" style="aspect-ratio: 4/3; width: 100%;">
2. विज्ञापनों/एम्बेड्स के लिए स्थान आरक्षित
/* विज्ञापन स्थान पहले से आरक्षित */
.ad-slot {
min-height: 250px;
background: #f0f0f0;
}
/* या aspect-ratio का उपयोग */
.video-embed {
aspect-ratio: 16/9;
width: 100%;
}
3. वेब फॉन्ट ऑप्टिमाइजेशन
/* ❌ FOUT/FOIT का कारण */
@font-face {
font-family: 'Custom';
src: url('font.woff2');
}
/* ✅ font-display का उपयोग */
@font-face {
font-family: 'Custom';
src: url('font.woff2');
font-display: swap; /* या optional */
}
<!-- फॉन्ट्स प्रीलोड -->
<link rel="preload" href="font.woff2" as="font" crossorigin>
4. डायनामिक कंटेंट हैंडल करें
// ❌ अचानक इन्सर्ट
container.innerHTML = newContent;
// ✅ इन्सर्ट करने से पहले स्थान आरक्षित
container.style.minHeight = '200px';
container.innerHTML = newContent;
/* या CSS में min-height सेट करें */
.dynamic-content {
min-height: 200px;
}
5. Transform एनिमेशन का उपयोग करें
/* ❌ लेआउट ट्रिगर करता है */
.element {
animation: slide 0.3s;
}
@keyframes slide {
from { top: -100px; }
to { top: 0; }
}
/* ✅ transform का उपयोग (कोई लेआउट शिफ्ट नहीं) */
@keyframes slide {
from { transform: translateY(-100px); }
to { transform: translateY(0); }
}
मापन उपकरण
फील्ड डेटा (वास्तविक उपयोगकर्ता)
| उपकरण | डेटा स्रोत | विशेषताएं |
|---|---|---|
| Chrome UX Report | Chrome उपयोगकर्ता | 28-दिन का एकत्रीकरण |
| Search Console | CrUX आधारित | Google आधिकारिक |
| PageSpeed Insights | CrUX + Lighthouse | रीयल-टाइम विश्लेषण |
लैब डेटा (सिमुलेशन)
| उपकरण | उद्देश्य |
|---|---|
| Lighthouse | Chrome DevTools में अंतर्निहित |
| WebPageTest | विस्तृत विश्लेषण, तुलनात्मक परीक्षण |
| GTmetrix | विज़ुअल रिपोर्ट्स |
Chrome DevTools
1. F12 (डेवलपर टूल्स)
2. Performance टैब
3. Record → पेज रिफ्रेश
4. Web Vitals सेक्शन जांचें
फ्रेमवर्क-विशिष्ट ऑप्टिमाइजेशन
Next.js
// next.config.js
module.exports = {
images: {
formats: ['image/avif', 'image/webp'],
},
experimental: {
optimizeCss: true,
},
};
// कंपोनेंट
import Image from 'next/image';
export default function Hero() {
return (
<Image
src="/hero.jpg"
alt="Hero"
width={1200}
height={600}
priority // LCP इमेज
placeholder="blur"
/>
);
}
React
// Code splitting
const HeavyComponent = React.lazy(() => import('./HeavyComponent'));
// Suspense
<Suspense fallback={<Skeleton />}>
<HeavyComponent />
</Suspense>
Vanilla JavaScript
<!-- स्क्रिप्ट लोडिंग -->
<script src="critical.js"></script>
<script src="app.js" defer></script>
<script src="analytics.js" async></script>
<!-- इमेज लेज़ी लोड -->
<img src="below-fold.jpg" loading="lazy" alt="Below fold">
सुधार प्राथमिकता
प्रभाव के अनुसार
| रैंक | ऑप्टिमाइजेशन आइटम | प्रभाव |
|---|---|---|
| 1 | LCP इमेज ऑप्टिमाइजेशन | LCP ↓ |
| 2 | रेंडर-ब्लॉकिंग JS हटाएं | LCP, INP ↓ |
| 3 | इमेज/एम्बेड आयाम निर्दिष्ट | CLS ↓ |
| 4 | CDN का उपयोग | LCP ↓ |
| 5 | वेब फॉन्ट ऑप्टिमाइजेशन | CLS ↓ |
| 6 | JS बंडल स्प्लिटिंग | INP ↓ |
त्वरित जीत
<!-- 1. LCP इमेज प्रीलोड -->
<link rel="preload" href="hero.webp" as="image">
<!-- 2. इमेज आयाम निर्दिष्ट -->
<img width="800" height="600" ...>
<!-- 3. JS defer -->
<script src="app.js" defer></script>
अक्सर पूछे जाने वाले प्रश्न
Q1: Core Web Vitals रैंकिंग को कितना प्रभावित करता है?
A: यह एक प्रत्यक्ष रैंकिंग कारक है, लेकिन कंटेंट क्वालिटी से अधिक महत्वपूर्ण नहीं। प्रतिस्पर्धी पेजों के बीच कंटेंट क्वालिटी समान होने पर यह निर्णायक भूमिका निभाता है।
Q2: मोबाइल और डेस्कटॉप स्कोर अलग क्यों हैं?
A: Google मुख्य रूप से मोबाइल डेटा का उपयोग करता है। मोबाइल ऑप्टिमाइजेशन को प्राथमिकता दें।
Q3: "कोई डेटा नहीं" क्यों दिखाता है?
A: Chrome UX Report में पर्याप्त ट्रैफ़िक डेटा नहीं है। साइट का ट्रैफ़िक कम हो सकता है या नई हो सकती है।
Q4: कौन सी मेट्रिक पहले सुधारनी चाहिए?
A: आमतौर पर:
- LCP - सबसे ध्यान देने योग्य सुधार
- CLS - उपयोगकर्ता निराशा कम करता है
- INP - अधिक इंटरैक्शन वाली साइटों के लिए महत्वपूर्ण
Q5: अगर थर्ड-पार्टी स्क्रिप्ट्स समस्या हैं तो?
A:
- अनावश्यक स्क्रिप्ट्स हटाएं
asyncयाdeferएट्रिब्यूट्स का उपयोग करें- Partytown जैसी Web Worker लाइब्रेरीज़ का उपयोग करें
चेकलिस्ट
LCP ऑप्टिमाइजेशन
- LCP इमेज प्रीलोड
- इमेज ऑप्टिमाइजेशन (WebP/AVIF)
- रेंडर-ब्लॉकिंग रिसोर्सेज हटाएं
- TTFB < 200ms
- CDN का उपयोग
INP ऑप्टिमाइजेशन
- भारी JS चंक्स स्प्लिट करें
- Debounce/throttle लागू करें
- अनावश्यक JS हटाएं
- थर्ड-पार्टी स्क्रिप्ट्स साफ करें
CLS ऑप्टिमाइजेशन
- इमेज/वीडियो आयाम निर्दिष्ट
- विज्ञापन स्थान आरक्षित
- font-display सेट करें
- डायनामिक कंटेंट के लिए स्थान आरक्षित
निष्कर्ष
Core Web Vitals आवश्यकताएं:
- LCP ≤ 2.5s: सबसे बड़े कंटेंट को तेज़ी से रेंडर करें
- INP ≤ 200ms: इंटरैक्शन पर तुरंत प्रतिक्रिया दें
- CLS ≤ 0.1: कोई लेआउट शिफ्ट नहीं
मोबाइल ऑप्टिमाइजेशन कुंजी है।
संबंधित उपकरण
| उपकरण | उद्देश्य |
|---|---|
| PageSpeed एनालाइज़र | Core Web Vitals मापें |
| इमेज ऑप्टिमाइज़र | WebP रूपांतरण |
| मेटा टैग जनरेटर | SEO मेटा टैग्स |
Core Web VitalsLCPINPCLSपेज स्पीडSEOपरफॉर्मेंस ऑप्टिमाइजेशन
लेखक के बारे में
Toolypet Team
Development Team
The Toolypet Team creates free, privacy-focused web tools for developers and designers. All tools run entirely in your browser with no data sent to servers.
Web DevelopmentCSS ToolsDeveloper ToolsSEOSecurity