Core Web Vitals क्या हैं: LCP, CLS और INP

Core Web Vitals तीन मेट्रिक्स हैं जिनसे Google पेज एक्सपीरियंस मापता है। LCP लोडिंग स्पीड मापता है। CLS विज़ुअल स्थिरता मापता है। INP रिस्पॉन्स मापता है।

हर मेट्रिक परफ़ॉर्मेंस का अलग पहलू मापती है। तीनों मिलकर यूज़र एक्सपीरियंस की पूरी तस्वीर देती हैं।

Largest Contentful Paint (LCP)

LCP उस समय को मापता है जब तक मुख्य कंटेंट लोड नहीं हो जाता। मुख्य कंटेंट पेज की सबसे बड़ी इमेज या टेक्स्ट ब्लॉक होता है। होमपेज पर LCP आमतौर पर हीरो इमेज होती है। आर्टिकल में LCP आर्टिकल की हेडलाइन और मुख्य इमेज होती है।

LCP तब से मापा जाता है जब यूज़र लिंक पर क्लिक करता है, उस समय तक जब मुख्य कंटेंट स्क्रीन पर दिखता है। अगर LCP एक सेकंड है, तो यूज़र को क्लिक के एक सेकंड बाद मुख्य कंटेंट दिखता है। अगर LCP तीन सेकंड है, तो यूज़र को तीन सेकंड इंतज़ार करना पड़ता है।

लक्ष्य: LCP 2.5 सेकंड से कम हो तो अच्छा है। LCP 2.5 से 4 सेकंड के बीच हो तो सुधार की ज़रूरत है। LCP 4 सेकंड से ज़्यादा हो तो ख़राब है।

उदाहरण: होमपेज की हीरो इमेज पाँच मेगाबाइट की है। डाउनलोड होने में तीन सेकंड लगते हैं। LCP तीन सेकंड है। लक्ष्य 2.5 सेकंड है। परफ़ॉर्मेंस में सुधार की ज़रूरत है।

Cumulative Layout Shift (CLS)

CLS विज़ुअल स्थिरता मापता है। लेआउट शिफ़्ट तब होता है जब पेज लोड होने के बाद कंटेंट खिसक जाता है। उदाहरण: यूज़र आर्टिकल पढ़ना शुरू करता है। एक विज्ञापन लोड होता है। आर्टिकल नीचे खिसक जाता है। यूज़र जहाँ पढ़ रहा था वह जगह खो देता है। यह झुँझलाहट भरा है।

CLS कुल लेआउट शिफ़्ट को नंबर में बदलता है। अगर कंटेंट दो सौ पिक्सेल नीचे खिसकता है, तो CLS बढ़ता है। अगर कंटेंट कई बार खिसकता है, तो CLS जुड़ता जाता है।

लक्ष्य: CLS 0.1 से कम हो तो अच्छा है। CLS 0.1 से 0.25 के बीच हो तो सुधार की ज़रूरत है। CLS 0.25 से ज़्यादा हो तो ख़राब है।

उदाहरण: पेज लोड होने के बाद विज़्ञापन लोड होता है। विज़्ञापन तीन सौ पिक्सेल की ऊँचाई घेरता है। विज्ञापन के नीचे का कंटेंट नीचे खिसक जाता है। CLS 0.15 है। सुधार की ज़रूरत है।

Interaction to Next Paint (INP)

INP रिस्पॉन्स मापता है। यूज़र बटन पर क्लिक करता है। सिस्टम क्लिक को प्रोसेस करता है। पेज अपडेट करता है। बदलाव स्क्रीन पर दिखाता है। क्लिक से लेकर विज़ुअल अपडेट तक का समय INP है।

INP इंटरैक्टिव पेज (फ़ॉर्म, बटन, मेन्यू) के लिए ज़रूरी है। स्टैटिक पेज (आर्टिकल, ब्लॉग) के लिए कम ज़रूरी है।

लक्ष्य: INP दो सौ मिलीसेकंड से कम हो तो अच्छा है। INP दो सौ से पाँच सौ मिलीसेकंड के बीच हो तो सुधार की ज़रूरत है। INP पाँच सौ मिलीसेकंड से ज़्यादा हो तो ख़राब है।

उदाहरण: यूज़र Add to Cart बटन पर क्लिक करता है। सिस्टम रिक्वेस्ट प्रोसेस करता है। कार्ट काउंटर अपडेट करता है। INP तीन सौ मिलीसेकंड है। सुधार की ज़रूरत है।

एक नहीं, तीन मेट्रिक्स क्यों

एक अकेली मेट्रिक यूज़र एक्सपीरियंस को पूरा नहीं पकड़ सकती। लोडिंग स्पीड मायने रखती है (LCP)। विज़ुअल स्थिरता मायने रखती है (CLS)। रिस्पॉन्स मायने रखता है (INP)। हो सकता है पेज जल्दी लोड हो, पर अस्थिर हो (ऊँचा CLS)। या जल्दी और स्थिर हो, पर क्लिक का जवाब देर से दे (ऊँचा INP)। तीनों मेट्रिक्स मिलकर यूज़र एक्सपीरियंस की क्वालिटी मापती हैं।

असली उदाहरण: ई-कॉमर्स साइट के Core Web Vitals

शुरुआती स्थिति

ई-कॉमर्स प्रोडक्ट पेज की शुरुआती स्थिति:

LCP: 2.8 सेकंड (लक्ष्य 2.5 से ऊपर)। CLS: 0.12 (लक्ष्य 0.1 से ऊपर)। INP: 220 मिलीसेकंड (लक्ष्य 200 से ऊपर)।

तीनों मेट्रिक्स में सुधार की ज़रूरत है।

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

LCP: हीरो इमेज ऑप्टिमाइज़ करें, फ़ोल्ड के नीचे का कंटेंट लेज़ी लोड करें। नतीजा: 1.8 सेकंड।

CLS: विज्ञापनों के लिए जगह पहले से रिज़र्व करें, कम ज़रूरी कंटेंट लेज़ी लोड करें। नतीजा: 0.05।

INP: JavaScript कम करें, इवेंट हैंडलर ऑप्टिमाइज़ करें। नतीजा: 180 मिलीसेकंड।

अब तीनों मेट्रिक्स Google के स्टैंडर्ड पूरे करती हैं।

Core Web Vitals का यूज़र एक्सपीरियंस से क्या संबंध है

अच्छा LCP: यूज़र को कंटेंट जल्दी दिखता है। साइट तेज़ लगती है।

ख़राब LCP: यूज़र को कंटेंट के लिए इंतज़ार करना पड़ता है। साइट धीमी लगती है।

अच्छा CLS: लेआउट स्थिर रहता है। यूज़र बिना कंटेंट उछले आराम से पढ़ सकता है।

ख़राब CLS: लेआउट खिसकता है। यूज़र अपनी जगह खो देता है। झुँझलाहट होती है।

अच्छा INP: यूज़र बटन दबाता है और तुरंत जवाब देखता है। साइट इंटरैक्टिव लगती है।

ख़राब INP: यूज़र बटन दबाता है और जवाब के लिए इंतज़ार करता है। साइट अटकी हुई लगती है।

अच्छे Core Web Vitals से अच्छा यूज़र एक्सपीरियंस बनता है। ख़राब Core Web Vitals से ख़राब यूज़र एक्सपीरियंस बनता है।

Core Web Vitals कैसे मापें

Google Core Web Vitals असली यूज़र्स से मापता है (रियल यूज़र मॉनिटरिंग)। Lighthouse जैसे लैब टेस्टिंग टूल Core Web Vitals का अंदाज़ा लगाते हैं, पर असली यूज़र के अनुभव से मेल नहीं भी खा सकते (नेटवर्क की स्थिति अलग होती है)।

Core Web Vitals Google Search Console में देखें। Google असली यूज़र्स का डेटा जोड़कर दिखाता है कि साइट स्टैंडर्ड पूरे करती है या नहीं (अच्छा, सुधार की ज़रूरत, ख़राब)।

PageSpeed Insights में भी देखें। वहाँ Lighthouse स्कोर के साथ Google के डेटाबेस से असली यूज़र डेटा मिलता है।

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