गूगल कोर वेब वाइटल्स (Google Core Web Vitals) क्या है? | LCP, INP, CLS को समझें

अपने यूजर को बेहतरीन Page Experience देने के लिए गूगल ने गूगल कोर वेब वाइटल्स की शुरू किया है। अगर आपने अपने ब्लॉग को गूगल सर्च कंसोल में जोड़ा है। तो आपको Google Core Web Vitals और Page Experience ऑप्शन दिखाई देंगे। साथ ही LCP, INP, CLS को समझेंगे।

गूगल कोर वेब वाइटल क्या है? और इससे यूजर को अच्छा अनुभव कैसे मिलेगा? वेब वाइटल के कितने प्रकार हैं? ऐसे कई प्रश्न आपके दिमाग में होंगे।

इस पोस्ट में हम इन सभी टॉपिक्स पर विस्तार से आपको बातएंगे।

ये भी पढ़ें:

गूगल रैंकिंग सिग्नल्स क्या है?	Search Console में दिख रहे INP Issue ठीक कैसे करें

गूगल कोर वेब वाइटल्स (Core Web Vitals) क्या है?

Google Core Web Vitals तीन महत्वपूर्ण मेट्रिक्स (metrics) का सेट है जो वेबसाइट के प्रदर्शन और यूजर एक्सपीयरन्स को मापता है। यह Google द्वारा वेबसाइट की रैंकिंग को प्रभावित करने के लिए इस्तेमाल किए जाने वाले महत्वपूर्ण Indicators हैं। ये तीन मेट्रिक्स हैं:

Core Web Vitals में तीन मुख्य मैट्रिक्स होते हैं:

• LCP (Largest Contentful Paint): यह मेट्रिक उस समय को मापता है जब एक वेबपेज पर सबसे बड़ा तत्व (जैसे कि इमेज, टेक्स्ट) लोड होता है।
• INP (Interaction to Next Paint): यह मेट्रिक मापता है कि यूजर्स के इंटरैक्शन के बाद वेबसाइट को प्रतिक्रिया देने में कितना समय लगता है। यह मेट्रिक यूजर्स के साथ वेबसाइट की इंटरैक्टिविटी को मापता है।
• CLS (Cumulative Layout Shift): यह मेट्रिक पेज के लोड होने के दौरान लेआउट में होने वाले अचानक बदलावों को मापता है।
• इन तीनों मैट्रिक्स को ध्यान में रखकर वेबसाइट की परफॉर्मेंस और यूज़र एक्सपीरियंस को बेहतर बनाया जा सकता है।

Core Web Vitals assessment को पास करने के लिए, आपको सभी तीन कोर वेब वाइटलके लिए “अच्छा” स्कोर करना होगा।

गूगल कोर वेब वाइटल्स (Core Web Vitals) क्यों हैं जरूरी?

कोर वेब वाइटल्स आपकी वेबसाइट के प्रदर्शन को मापने के लिए Google द्वारा निर्धारित कुछ महत्वपूर्ण मापदंड हैं। ये मापदंड आपके वेबसाइट के उपयोगकर्ता अनुभव को बेहतर बनाने और Google खोज परिणामों में आपकी रैंकिंग को बढ़ाने में मदद करते हैं।

यहां जानिए क्यों कोर वेब वाइटल्स आपके लिए जरूरी हैं:

• बेहतर यूजर अनुभव: जब एक वेबसाइट तेजी से लोड होती है और बिना किसी अचानक बदलाव के काम करती है, तो उपयोगकर्ता को बेहतर अनुभव होता है। वे वेबसाइट पर अधिक समय बिताते हैं और आपकी सामग्री को अधिक ध्यान से पढ़ते हैं।
• Google सर्च रैंकिंग: Google अब कोर वेब वाइटल्स को अपनी सर्च रैंकिंग में एक महत्वपूर्ण कारक मानता है। अगर आपकी वेबसाइट के कोर वेब वाइटल्स अच्छे हैं, तो Google आपकी वेबसाइट को उच्च रैंक देगा।
• कन्वर्शन रेट बढ़ाना: एक तेज़ और स्थिर वेबसाइट उपयोगकर्ताओं को खरीदारी करने, फॉर्म भरने या अन्य कार्रवाइयाँ करने के लिए प्रेरित करती है।
• बाउंस रेट कम करना: एक धीमी या अस्थिर वेबसाइट उपयोगकर्ताओं को वेबसाइट छोड़ने के लिए प्रेरित कर सकती है, जिससे आपकी वेबसाइट का बाउंस रेट बढ़ सकता है।

Core Web Vitals के सभी मेट्रिक्स की जानकरी

Google Core Web Vitals के तीन मुख्य मेट्रिक्स (LCP, FID, और CLS) वेबसाइट के प्रदर्शन और उपयोगकर्ता अनुभव को बेहतर बनाने में मदद करते हैं। आइए, इन तीनों मेट्रिक्स के बारे में विस्तार से जानें:

Largest Contentful Paint (LCP)

LCP (Largest Contentful Paint) एक मेट्रिक है जो यह मापता है कि किसी वेब पेज पर सबसे बड़ा दृश्य तत्व (जैसे कि इमेज, वीडियो, या बड़ा टेक्स्ट ब्लॉक) पूरी तरह से लोड होकर उपयोगकर्ता को कब दिखाई देता है। इसे वेबसाइट की लोडिंग स्पीड का एक महत्वपूर्ण संकेतक माना जाता है।

LCP का महत्व:

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

LCP का स्कोर:

• अच्छा स्कोर: 2.5 सेकंड या उससे कम
• सुधार की जरूरत: 2.5 से 4 सेकंड के बीच
• खराब स्कोर: 4 सेकंड से ज्यादा

LCP को सुधारने के तरीके:

1. फास्ट होस्टिंग सर्वर का उपयोग: तेज सर्वर रिस्पॉन्स टाइम से वेबसाइट की लोडिंग स्पीड बढ़ती है।
2. कैशिंग का उपयोग: कैशिंग से स्टेटिक फाइल्स को तेजी से लोड किया जा सकता है।
3. इमेज और वीडियो को ऑप्टिमाइज करें: इमेज के साइज को कम करना और नए इमेज फॉर्मेट (जैसे WebP) का उपयोग करना फायदेमंद हो सकता है।
4. सर्वर-साइड रेंडरिंग (SSR): SSR से कंटेंट पहले सर्वर पर प्रोसेस होकर तेजी से यूज़र तक पहुंचता है।
5. CSS और JavaScript को मिनिफाई करें: CSS और JS फाइलों को छोटा करके पेज लोडिंग समय को कम किया जा सकता है।

LCP पर खराब प्रदर्शन के कारण:

• सर्वर पर ज्यादा लोड या धीमी सर्वर रिस्पॉन्स टाइम
• धीमी नेटवर्क स्पीड
• बड़े इमेज और वीडियो फाइल्स
• रेंडर-ब्लॉकिंग JavaScript और CSS

Interaction to Next Paint (INP)

Interaction to Next Paint (INP) एक परफॉर्मेंस मेट्रिक है, जो यह मापता है कि वेबसाइट पर किसी इंटरैक्शन के बाद अगला पेंट (render) होने में कितना समय लगता है। यह मेट्रिक वेब पेज की इंटरैक्टिविटी और रिस्पॉन्स टाइम का एक बेहतर संकेतक है। INP उन इंटरैक्शन को ट्रैक करता है जो पेज पर लोड हो चुके होते हैं और यूज़र द्वारा किए गए किसी इनपुट (जैसे बटन क्लिक, फॉर्म भरना, या स्क्रॉल करना) के बाद पेज को पेंट होने में कितना समय लगता है।

INP का महत्व:

INP उपयोगकर्ता अनुभव का एक महत्वपूर्ण हिस्सा है क्योंकि यह इंटरैक्शन के बाद वेबसाइट की प्रतिक्रिया को मापता है। यदि कोई वेबसाइट तेजी से प्रतिक्रिया नहीं देती है, तो उपयोगकर्ता को पेज के साथ इंटरेक्ट करना कठिन लग सकता है, जिससे उनकी संतुष्टि कम हो सकती है और बाउंस रेट बढ़ सकती है।

INP का स्कोर:

• अच्छा स्कोर: 200 मिलीसेकंड या उससे कम
• सुधार की जरूरत: 200-500 मिलीसेकंड के बीच
• खराब स्कोर: 500 मिलीसेकंड से अधिक

INP को सुधारने के तरीके:

1. JavaScript को ऑप्टिमाइज करें: भारी और अनावश्यक JavaScript को हटा दें या मिनिफाई करें ताकि पेज के एलिमेंट्स जल्दी रेंडर हो सकें।
2. लेज़ी-लोडिंग का उपयोग करें: इमेज और अन्य बड़े एलिमेंट्स को उपयोगकर्ता के व्यूपोर्ट में आने पर ही लोड करें, ताकि मुख्य कंटेंट जल्दी से दिखाई दे।
3. सर्वर रिस्पॉन्स टाइम सुधारें: तेज सर्वर से वेबसाइट के पेजों का तेजी से लोड होना सुनिश्चित करें।
4. थ्रेडिंग का उपयोग करें: लंबी JavaScript प्रक्रियाओं को वेब वर्कर्स के जरिए अलग से प्रोसेस करें ताकि मुख्य थ्रेड पर लोड कम हो।
5. CSS और JS को डिफर (defer) करें: CSS और JavaScript फाइलों को डिफर करके पेज की लोडिंग प्राथमिकता को बढ़ाया जा सकता है, ताकि इंटरैक्शन के समय पेज तेजी से प्रतिक्रिया दे सके।

INP पर खराब प्रदर्शन के कारण:

• भारी JavaScript जो पेज लोडिंग और इंटरैक्शन के बाद रेंडरिंग को धीमा करती है।
• धीमी नेटवर्क कनेक्टिविटी या सर्वर से प्रतिक्रिया में देरी।
• रेंडर-ब्लॉकिंग स्क्रिप्ट्स जो पेज के इंटरैक्शन के बाद अगले पेंट में देरी करती हैं।

Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) वेबसाइट की visual stability मापने के लिए एक महत्वपूर्ण मेट्रिक है। इसका उद्देश्य यह देखना है कि वेबसाइट पर अचानक और अनपेक्षित layout changes कितनी बार होते हैं, जो उपयोगकर्ता अनुभव को प्रभावित कर सकते हैं। CLS यह सुनिश्चित करता है कि पेज का कंटेंट स्थिर रहे और अचानक से कुछ भी इधर-उधर न हो, जिससे उपयोगकर्ता को परेशानी हो।

CLS क्या मापता है?

CLS वेबसाइट के पेज पर अनपेक्षित लेआउट शिफ्ट को मापता है। इसका सीधा मतलब है कि जब पेज के एलिमेंट्स (जैसे इमेज, टेक्स्ट, बटन) अचानक अपनी जगह से हटकर अन्य जगह शिफ्ट हो जाते हैं। यह शिफ्ट तब होता है जब पेज पूरी तरह से लोड नहीं हुआ होता है या जब नए एलिमेंट्स अचानक पेज पर लोड होते हैं।

CLS का स्कोर और उसका महत्व:

• अच्छा स्कोर: 0.1 या उससे कम
• सुधार की जरूरत: 0.1 से 0.25 के बीच
• खराब स्कोर: 0.25 से ज्यादा

CLS कैसे मापा जाता है?

CLS स्कोर दो प्रमुख कारकों का उत्पाद है:

1. Impact Fraction: व्यूपोर्ट (स्क्रीन का दिखने वाला हिस्सा) में वह क्षेत्र जिसे किसी अनस्टेबल एलिमेंट ने ले लिया है।
2. Distance Fraction: यह उस दूरी को मापता है, जितनी दूरी से कोई अनस्टेबल एलिमेंट अपने स्थान से मूव करता है, और इसे व्यूपोर्ट के आकार के सबसे बड़े डायमेंशन (चौड़ाई या ऊंचाई) से डिवाइड किया जाता है।

CLS स्कोर इन दोनों कंपोनेंट्स (impact fraction और distance fraction) का प्रोडक्ट है।

CLS में सुधार कैसे करें?

1. सभी इमेज के लिए साइज ऐट्रिब्यूट्स निर्धारित करें: इमेज के लिए height और width तय करें, ताकि वे अचानक से लोड होते समय लेआउट को शिफ्ट न करें।
2. विज्ञापनों के लिए Placeholder का उपयोग करें: विज्ञापन लोड होते समय उनके लिए पहले से जगह निर्धारित करें।
3. नए एलिमेंट्स को पहले से ही स्पेस दें: जब पेज लोड हो रहा हो, तो नए एलिमेंट्स जैसे बटन या फॉर्म अचानक से न आएं, इसके लिए पेज डिजाइन करते समय उन्हें पहले से स्पेस दें।
4. फॉन्ट को ठीक से लोड करें: फॉन्ट्स बदलने के कारण टेक्स्ट का आकार बदल सकता है, जिससे लेआउट में शिफ्ट हो सकता है। इसलिए, फॉन्ट को सही तरीके से लोड करें।

CLS का SEO और यूज़र अनुभव पर प्रभाव:

• अगर किसी वेबसाइट का CLS स्कोर ज्यादा है, तो उपयोगकर्ता को पेज के कंटेंट में अचानक बदलाव का सामना करना पड़ता है। यह अनुभव खासतौर पर फ्रस्ट्रेटिंग हो सकता है, जब वे किसी बटन को क्लिक करना चाहते हों, और वह बटन अचानक से अपनी जगह से हट जाए।
• Google ने इसे एक महत्वपूर्ण रैंकिंग फैक्टर बनाया है, और ज्यादा CLS स्कोर वाली वेबसाइटों की सर्च रैंकिंग को नीचे कर दिया जाता है, जिससे ट्रैफिक पर भी असर पड़ता है।

अन्य परफॉर्मेंस मैट्रिक्स

वेबसाइट की परफॉर्मेंस और उपयोगकर्ता अनुभव को बेहतर तरीके से समझने के लिए Core Web Vitals के अलावा कुछ और महत्वपूर्ण मैट्रिक्स होते हैं। ये मैट्रिक्स डेवलपर्स को उन तकनीकी पहलुओं के बारे में जानकारी प्रदान करते हैं, जो वेबसाइट के लोडिंग टाइम, इंटरैक्टिविटी, और रिस्पॉन्स टाइम पर प्रभाव डाल सकते हैं। आइए इन मैट्रिक्स को विस्तार से समझते हैं:

1. First Contentful Paint (FCP):

• क्या है: FCP मेट्रिक यह मापता है कि ब्राउज़र द्वारा पहला DOM कंटेंट (जैसे कि इमेज, टेक्स्ट, SVG) रेंडर करने में कितना समय लगता है। यह वह बिंदु होता है जब उपयोगकर्ता को पहली बार वेबसाइट पर कुछ दिखाई देता है।
• महत्व: यह मेट्रिक वेबसाइट की शुरुआती लोडिंग स्पीड का संकेत देता है। यदि FCP का समय ज्यादा होता है, तो उपयोगकर्ता को पेज लोडिंग में देरी का अनुभव होता है।
• सुधार के तरीके: इमेज ऑप्टिमाइजेशन, CSS और JavaScript को मिनिफाई करना, और तेज़ सर्वर का उपयोग करना।
• अच्छा स्कोर: 1.8 सेकंड या उससे कम।

2. Speed Index (SI):

• क्या है: Speed Index यह मापता है कि एक पेज का कंटेंट कितने समय में उपयोगकर्ता के स्क्रीन पर दिखाई देता है। यह उपयोगकर्ता के पूरे व्यूपोर्ट पर कंटेंट की तेजी से लोडिंग को मापता है।
• महत्व: यह वेबसाइट की समग्र लोडिंग स्पीड को मापता है और यह बताता है कि यूजर को वेबसाइट के कंटेंट को पूरी तरह देखने में कितना समय लग रहा है।
• सुधार के तरीके: JavaScript ऑप्टिमाइजेशन, फास्ट CDN का उपयोग, और पेज की लोडिंग प्राथमिकताओं को सेट करना।
• अच्छा स्कोर: 3.4 सेकंड या उससे कम।

3. Time to Interactive (TTI):

• क्या है: TTI मेट्रिक यह मापता है कि एक पेज किस समय तक पूरी तरह से इंटरैक्टिव हो जाता है, यानी यूजर पेज के सभी एलिमेंट्स (जैसे बटन, लिंक) के साथ इंटरैक्ट कर सकता है।
• महत्व: यह मेट्रिक बताता है कि पेज लोड होने के बाद यूज़र कितनी जल्दी वेबसाइट पर इंटरैक्शन शुरू कर सकता है। यदि TTI ज्यादा है, तो यूजर को पेज पर कोई क्रिया करने में देरी का अनुभव हो सकता है।
• सुधार के तरीके: रेंडर-ब्लॉकिंग स्क्रिप्ट्स को हटाना, JavaScript को डिफर (defer) करना, और फास्ट रिस्पॉन्स टाइम सुनिश्चित करना।
• अच्छा स्कोर: 3.8 सेकंड या उससे कम।

4. Total Blocking Time (TBT):

• क्या है: TBT मेट्रिक यह मापता है कि पहली इंटरैक्टिविटी और पूर्ण इंटरैक्टिविटी के बीच यूजर के इनपुट पर रिस्पॉन्स करने में कितना समय लगता है। यानी उस समय को मापा जाता है जब पेज लोड हो रहा होता है लेकिन यूज़र की कमांड पर तुरंत प्रतिक्रिया नहीं दे पाता।
• महत्व: TBT यह बताता है कि वेबसाइट उपयोगकर्ता के इनपुट पर कितनी तेजी से प्रतिक्रिया देती है। यह मेट्रिक उपयोगकर्ता अनुभव के “lag” को मापता है।
• सुधार के तरीके: JavaScript को ऑप्टिमाइज करना, लंबी स्क्रिप्ट्स को तोड़ना, और थर्ड-पार्टी स्क्रिप्ट्स को कम करना।
• अच्छा स्कोर: 200 मिलीसेकंड या उससे कम।

5. Page Performance Score:

• क्या है: यह स्कोर वेबसाइट के Core Web Vitals और अन्य परफॉर्मेंस मैट्रिक्स का एक कंपोजिट स्कोर होता है। इसका उपयोग वेबसाइट की समग्र परफॉर्मेंस को मापने और उसे समझने के लिए किया जाता है।
• महत्व: यह एक संकेतक है कि वेबसाइट कितनी उपयोगकर्ता-अनुकूल और तेज़ है। यह स्कोर जितना अच्छा होगा, वेबसाइट का यूजर एक्सपीरियंस उतना बेहतर माना जाएगा।
• सुधार के तरीके: सभी परफॉर्मेंस मैट्रिक्स (LCP, FID, CLS, TTI, आदि) में सुधार करके।

इन मैट्रिक्स को समझने और सुधारने का महत्व:

• बेहतर उपयोगकर्ता अनुभव: जब वेबसाइट तेजी से लोड होती है और इंटरैक्टिव होती है, तो उपयोगकर्ता को एक स्मूथ अनुभव मिलता है। इससे बाउंस रेट कम होती है और वेबसाइट पर यूज़र अधिक समय बिताते हैं।
• SEO में सुधार: Google पेज अनुभव को रैंकिंग में एक प्रमुख फैक्टर मानता है। वेबसाइट परफॉर्मेंस मैट्रिक्स अच्छे होने से सर्च रैंकिंग में सुधार होता है।
• बिजनेस ग्रोथ: तेज और इंटरैक्टिव वेबसाइटें उपयोगकर्ताओं को जोड़ने और उन्हें वेबसाइट पर लंबे समय तक रखने में सक्षम होती हैं, जिससे कन्वर्ज़न बढ़ सकते हैं।

कोर वेब वाइटल्स को मापने के लिए टूल्स

कोर वेब वाइटल्स आपकी वेबसाइट के प्रदर्शन को मापने के लिए बेहद जरूरी हैं। इन मापदंडों को मापने के लिए कई तरह के टूल्स उपलब्ध हैं। ये टूल्स आपको यह जानने में मदद करते हैं कि आपकी वेबसाइट कितनी तेज़ और स्थिर है और इसे बेहतर बनाने के लिए आपको क्या करना चाहिए।

यहां कुछ लोकप्रिय टूल्स दिए गए हैं:

• Google PageSpeed Insights: यह Google का एक मुफ़्त टूल है जो आपकी वेबसाइट का विश्लेषण करता है और आपको कोर वेब वाइटल्स के बारे में विस्तृत रिपोर्ट देता है। यह आपको सुधार के लिए सुझाव भी देता है।
• Lighthouse: यह एक ओपन-सोर्स ऑडिटिंग टूल है जिसे आप Chrome डेवलपर टूल्स या Node.js के माध्यम से उपयोग कर सकते हैं। यह आपको वेबसाइट के प्रदर्शन, पहुंचयोग्यता और अन्य पहलुओं के बारे में जानकारी देता है।
• Chrome DevTools: Chrome ब्राउज़र में बिल्ट-इन डेवलपर टूल्स हैं जो आपको लाइव वेब पेज का विश्लेषण करने देते हैं। आप इन टूल्स का उपयोग करके नेटवर्क गतिविधि, JavaScript प्रदर्शन और अन्य मेट्रिक्स को माप सकते हैं।
• WebPageTest: यह एक मुफ़्त टूल है जो आपको विभिन्न स्थानों से अपनी वेबसाइट का प्रदर्शन परीक्षण करने की अनुमति देता है। यह आपको वीडियो रिकॉर्डिंग, वाटरफॉल चार्ट और अन्य विस्तृत डेटा प्रदान करता है।
• GTmetrix: यह एक और मुफ़्त टूल है जो आपकी वेबसाइट का विश्लेषण करता है और आपको प्रदर्शन सुधार के लिए सुझाव देता है। यह आपको PageSpeed Insights और YSlow दोनों स्कोर प्रदान करता है।

इन टूल्स का उपयोग कैसे करें:

1. अपनी वेबसाइट का URL दर्ज करें: आपको बस टूल में अपनी वेबसाइट का URL दर्ज करना होता है।
2. रिपोर्ट का विश्लेषण करें: टूल आपकी वेबसाइट का विश्लेषण करेगा और आपको एक रिपोर्ट प्रदान करेगा। रिपोर्ट में आपके कोर वेब वाइटल्स के स्कोर, साथ ही सुधार के लिए सुझाव शामिल होंगे।
3. सुधार के लिए कार्रवाई करें: रिपोर्ट में दिए गए सुझावों के आधार पर आप अपनी वेबसाइट में सुधार कर सकते हैं।

कोर वेब वाइटल्स को बेहतर बनाने के लिए आप क्या कर सकते हैं:

• इमेज ऑप्टिमाइज़ेशन: इमेजों को सही साइज़ और फॉर्मेट में कंप्रेस करें।
• सर्वर रिस्पांस टाइम: अपने वेबसाइट के होस्टिंग को बेहतर बनाएं।
• JavaScript और CSS को कम करें: इन फाइलों को मिनिफाई और कॉम्बाइन करें।
• लेआउट को स्थिर रखें: सुनिश्चित करें कि तत्वों की स्थिति लोड होने के बाद नहीं बदलती।
• लेज़ी लोडिंग: केवल उन इमेज और वीडियो को लोड करें जो स्क्रीन पर दिख रहे हों।
• कैशिंग: ब्राउज़र को फ़ाइलों को कैश करने दें ताकि उन्हें बार-बार डाउनलोड न करना पड़े।

Google Core Web Vitals FAQ’s