CLS और INP ऐसे Core Web Vitals हैं जो स्पीड से अलग, यूज़र एक्सपीरियंस के दूसरे पहलू मापते हैं।
CLS विज़ुअल स्थिरता मापता है। लेआउट शिफ़्ट तब होता है जब लोड होने के बाद कंटेंट खिसक जाता है। यूज़र आर्टिकल पढ़ रहा है। विज्ञापन लोड होता है। आर्टिकल नीचे खिसक जाता है। यूज़र अपनी जगह खो देता है। CLS इस झुँझलाहट को नंबर में बदलता है।
INP रिस्पॉन्स मापता है। यूज़र बटन पर क्लिक करता है। सिस्टम जवाब देता है। जवाब आने में कितना समय लगता है। INP रिस्पॉन्स की इस देरी को नंबर में बदलता है।
Cumulative Layout Shift (CLS) विस्तार से
CLS किन वजहों से होता है
विज्ञापन लोड होकर जगह घेरते हैं। एम्बेड लोड होकर जगह घेरते हैं। इमेज बिना ऊँचाई तय किए लोड होती हैं। फ़ॉन्ट बदलता है और टेक्स्ट दोबारा सेट होता है। JavaScript से कंटेंट बीच में डाला जाता है।
असली उदाहरण
पेज का लेआउट स्थिर है। यूज़र पढ़ना शुरू करता है। विज्ञापन लोड होता है। विज्ञापन तीन सौ पिक्सेल ऊँचा है। विज्ञापन के नीचे का कंटेंट तीन सौ पिक्सेल नीचे खिसक जाता है। यूज़र अपनी जगह खो देता है। झुँझलाहट होती है।
माप
CLS व्यूपोर्ट के खिसके हुए हिस्से के प्रतिशत के रूप में मापा जाता है। अगर व्यूपोर्ट एक हज़ार पिक्सेल ऊँचा है और कंटेंट तीन सौ पिक्सेल खिसकता है, तो CLS 0.3 है। लक्ष्य 0.1 से कम है (दस प्रतिशत शिफ़्ट चल जाता है, तीस प्रतिशत नहीं)।
CLS सुधारना
रणनीति एक: जगह रिज़र्व करें
विज्ञापन, एम्बेड और इमेज के लिए जगह रिज़र्व करें। लेआउट इंजन को बताएँ: विज्ञापन तीन सौ पिक्सेल लेगा। जगह रिज़र्व करें। विज्ञापन रिज़र्व की गई जगह में लोड होता है। कोई शिफ़्ट नहीं।
रणनीति दो: नीचे डालें
पेज के बीच में कंटेंट डालने से बचें। नीचे डालें (नीचे का कंटेंट पहले से व्यूपोर्ट के बाहर होता है)। या स्टिकी हेडर में डालें (यूज़र हेडर के बदलने की उम्मीद रखता है)।
रणनीति तीन: फ़ॉन्ट बदलने से बचें
पेज लोड के बीच में फ़ॉन्ट बदलने से बचें। फ़ॉन्ट बदलने से टेक्स्ट दोबारा सेट होता है। उस फ़ॉन्ट वाला सारा टेक्स्ट खिसक जाता है। शिफ़्ट घटाने के लिए `font-display: optional` या `font-display: swap` इस्तेमाल करें।
रणनीति चार: इमेज की ऊँचाई तय करें
इमेज के लिए तय ऊँचाई इस्तेमाल करें। इमेज लोड होती है। ऊँचाई तय है। इमेज रिज़र्व की गई जगह भर देती है। कोई शिफ़्ट नहीं।
असली उदाहरण: ई-कॉमर्स प्रोडक्ट पेज का CLS ऑप्टिमाइज़ेशन
शुरुआती CLS: 0.25 (ख़राब)।
जाँच
प्रोडक्ट इमेज बिना ऊँचाई तय किए लोड होती हैं। इमेज कंटेंट को खिसकाती हैं। CLS में 0.10 का योगदान। प्रोडक्ट के नीचे का विज्ञापन पेज लोड के बाद लोड होता है। विज्ञापन जगह घेरता है। कंटेंट खिसकता है। CLS में 0.12 का योगदान। यूज़र रिव्यू API से लोड होते हैं। पेज में डाले जाते हैं। कंटेंट खिसकता है। CLS में 0.3 का योगदान।
ऑप्टिमाइज़ेशन
HTML में इमेज की ऊँचाई तय करें। इमेज रिज़र्व की गई जगह भर देती हैं। CLS में योगदान: शून्य। विज्ञापन के लिए जगह रिज़र्व करें। विज्ञापन रिज़र्व की गई जगह में लोड होता है। CLS में योगदान: शून्य। यूज़र रिव्यू को फ़ोल्ड के नीचे लेज़ी लोड करें। फ़ोल्ड के ऊपर न डालें। CLS में योगदान: शून्य (शिफ़्ट व्यूपोर्ट के नीचे होता है)।
नया CLS: 0.05 (अच्छा)।
Interaction to Next Paint (INP) विस्तार से
INP क्या मापता है
INP रिस्पॉन्स मापता है। यूज़र बटन पर क्लिक करता है। सिस्टम क्लिक प्रोसेस करता है। स्टेट अपडेट करता है। बदलाव रेंडर करता है। स्क्रीन पर पेंट करता है। क्लिक से लेकर विज़ुअल अपडेट के पहले पेंट तक का समय INP है।
असली उदाहरण
यूज़र Add to Cart बटन पर क्लिक करता है। सिस्टम इन्वेंटरी जाँचता है। कार्ट काउंटर अपडेट करता है। नई गिनती स्क्रीन पर दिखाता है। अगर INP सौ मिलीसेकंड है, तो यूज़र को कार्ट काउंटर तुरंत अपडेट होता दिखता है। अगर INP एक सेकंड है, तो कार्ट काउंटर एक सेकंड बाद अपडेट होता है। साइट अटकी हुई लगती है।
माप
INP मिलीसेकंड में मापा जाता है। दो सौ मिलीसेकंड से कम का लक्ष्य अच्छा है।
INP सुधारना
रणनीति एक: JavaScript एक्ज़ीक्यूशन टाइम घटाएँ
लंबी JavaScript रेंडरिंग रोक देती है। लंबे टास्क को छोटे टास्क में तोड़ें। भारी कंप्यूटेशन के लिए async, defer या Web Workers इस्तेमाल करें।
रणनीति दो: इवेंट हैंडलर ऑप्टिमाइज़ करें
इवेंट हैंडलर को कम से कम काम करना चाहिए। भारी काम बैकग्राउंड में भेजें।
रणनीति तीन: CSS ऑप्टिमाइज़ करें
भारी CSS पेंट में देरी कर सकती है। ब्राउज़र को बताने के लिए CSS containment इस्तेमाल करें: यह एलिमेंट अपने आप में पूरा है, इसके बदलने पर पूरे पेज की स्टाइल दोबारा न निकालो।
रणनीति चार: तेज़ रेंडरिंग तकनीक इस्तेमाल करें
CSS अपडेट, JavaScript DOM अपडेट से तेज़ होते हैं। left/top पोज़िशनिंग की जगह CSS transforms इस्तेमाल करें। visibility बदलने की जगह CSS opacity इस्तेमाल करें।
असली उदाहरण: फ़ॉर्म इंटरैक्शन का रिस्पॉन्स
शुरुआती INP: चार सौ मिलीसेकंड (ख़राब)।
जाँच
फ़ॉर्म में वैलिडेशन JavaScript है। यूज़र फ़ील्ड में टाइप करता है। वैलिडेशन चलता है। वैलिडेशन सिंक्रोनस है। वह इनपुट फ़ील्ड का अपडेट रोक देता है। वैलिडेशन पूरा होने तक इनपुट फ़ील्ड अपडेट नहीं होता। साइट अटकी हुई लगती है।
ऑप्टिमाइज़ेशन
वैलिडेशन को बैकग्राउंड में ले जाएँ (Web Worker या setTimeout)। इनपुट फ़ील्ड तुरंत अपडेट होता है। वैलिडेशन बैकग्राउंड में होता है। फ़ॉर्म पर CSS containment इस्तेमाल करें। ब्राउज़र को बताएँ: फ़ॉर्म अपने आप में पूरा है, पूरे पेज की स्टाइल दोबारा न निकालो। एनिमेशन के लिए JavaScript पोज़िशनिंग की जगह CSS transform इस्तेमाल करें।
नया INP: एक सौ पचास मिलीसेकंड (अच्छा)।
CLS और INP साथ में
CLS से पेज अस्थिर लगता है। INP से पेज अटका हुआ लगता है। साथ में ये यूज़र की नज़र में क्वालिटी को प्रभावित करते हैं।
अच्छे LCP पर ख़राब CLS वाला पेज (तेज़ पर उछलता हुआ) झुँझलाहट भरा लगता है। यूज़र धीमेपन को दोष देता है, जबकि समस्या स्थिरता की होती है।
अच्छे LCP और CLS पर ख़राब INP वाला पेज (तेज़ और स्थिर पर जवाब न देने वाला) टूटा हुआ लगता है। बटन क्लिक का जवाब नहीं देते।
अच्छे यूज़र एक्सपीरियंस के लिए तीनों Core Web Vitals मायने रखते हैं।
अक्सर पूछे जाने वाले सवाल
हम CLS की समस्याएँ कैसे पकड़ें?
Chrome DevTools इस्तेमाल करें। पेज पर राइट-क्लिक करें। Inspect चुनें। Performance टैब खोलें। पेज लोड रिकॉर्ड करें। DevTools लोड के दौरान लेआउट शिफ़्ट दिखा देता है। PageSpeed Insights भी देखें। Lighthouse CLS की समस्याएँ बता देता है। Search Console की Core Web Vitals रिपोर्ट भी देखें। वह ख़राब CLS वाले पेज दिखाती है। WEMASY के वेबसाइट बिल्डर से आप यह सब सीधे अपनी वेबसाइट पर सेट कर सकते हैं।
क्या सभी विज्ञापनों के लिए जगह रिज़र्व करें या सिर्फ़ ज़रूरी विज्ञापनों के लिए?
फ़ोल्ड के ऊपर के विज्ञापनों के लिए जगह रिज़र्व करें (जो तुरंत लोड होते हैं)। फ़ोल्ड के नीचे के विज्ञापनों के लिए रिज़र्व न करें (जो स्क्रॉल के बाद लोड होते हैं)। फ़ोल्ड के नीचे के विज्ञापन उसके नीचे के कंटेंट को खिसका सकते हैं, पर यूज़र को वह शिफ़्ट दिखता नहीं।
भारी JavaScript वाली जटिल एप्लिकेशन के लिए INP कैसे ऑप्टिमाइज़ करें?
भारी कंप्यूटेशन Web Workers में ले जाएँ। Web Worker अलग थ्रेड पर चलता है। वह मुख्य थ्रेड को नहीं रोकता। मुख्य थ्रेड यूज़र इनपुट पर रिस्पॉन्सिव रहता है। React Suspense या ऐसे ही फ़्रेमवर्क भी इस्तेमाल करें जो भारी कंप्यूटेशन को इंटरैक्शन संभालने के बाद के लिए टाल देते हैं।
क्या CLS मोबाइल के लिए डेस्कटॉप से ज़्यादा ज़रूरी है?
मोबाइल के लिए ज़्यादा ज़रूरी है। मोबाइल स्क्रीन छोटी होती है। लेआउट शिफ़्ट ज़्यादा दिखते हैं। मोबाइल यूज़र के शिफ़्ट नोटिस करने और झुँझलाने की संभावना ज़्यादा होती है। मोबाइल पर CLS ऑप्टिमाइज़ेशन को प्राथमिकता दें।
क्या अच्छा CLS और INP ख़राब LCP की भरपाई कर सकते हैं?
नहीं। अगर पेज को लोड होने में पाँच सेकंड लगते हैं, तो CLS और INP मायने रखने से पहले ही यूज़र झुँझला चुका होता है। यूज़र इंटरैक्ट करने से पहले ही चला जाता है। तेज़ लोडिंग (अच्छा LCP) अच्छे अनुभव की पहली शर्त है। अच्छा CLS और INP तेज़ पेज का अनुभव सुधारते हैं, धीमे पेज का नहीं।
हम CLS और INP के सुधार कैसे मापें और ट्रैक करें?
शुरुआती माप: ऑप्टिमाइज़ेशन से पहले मापें। ऑप्टिमाइज़ेशन लागू करें। नया माप: बाद में मापें। रियल यूज़र मॉनिटरिंग में ट्रैक करने के लिए Web Vitals लाइब्रेरी (Core Web Vitals मापने वाली JavaScript लाइब्रेरी) इस्तेमाल करें। अलर्ट सेट करें: अगर CLS या INP बिगड़े, तो अलर्ट टीम को बता देता है।