कैरसेल के लिए सबसे सही तरीके

परफ़ॉर्मेंस और इस्तेमाल करने में आसानी के लिए कैरसेल ऑप्टिमाइज़ करें.

Katie Hempenius

कैरसेल एक UX कॉम्पोनेंट है, जो कॉन्टेंट को स्लाइड शो की तरह दिखाता है. कैरसेल "अपने-आप चल सकते हैं" या उपयोगकर्ता उन्हें मैन्युअल तरीके से नेविगेट कर सकते हैं. कैरसेल का इस्तेमाल कहीं भी किया जा सकता है. हालांकि, इन्हें ज़्यादातर होम पेजों पर इमेज, प्रॉडक्ट, और प्रमोशन दिखाने के लिए इस्तेमाल किया जाता है.

इस लेख में, कैरसेल की परफ़ॉर्मेंस और यूज़र एक्सपीरियंस को बेहतर बनाने के सबसे सही तरीकों के बारे में बताया गया है.

परफ़ॉर्मेंस

सही तरीके से लागू किए गए कैरसेल का परफ़ॉर्मेंस पर बहुत कम या कोई असर नहीं पड़ना चाहिए. हालांकि, कैरसेल में अक्सर बड़ी मीडिया ऐसेट होती हैं. बड़ी ऐसेट की वजह से परफ़ॉर्मेंस पर असर पड़ सकता है. भले ही, उन्हें कैरसेल में दिखाया गया हो या कहीं और.

• एलसीपी (सबसे बड़ा कॉन्टेंटफ़ुल पेंट)

  पेज के ऊपरी हिस्से में मौजूद कैरसेल में अक्सर पेज का एलसीपी एलिमेंट होता है. इसलिए, एलसीपी पर काफ़ी असर पड़ सकता है. इन स्थितियों में, कैरसेल को ऑप्टिमाइज़ करने से एलसीपी काफ़ी बेहतर हो सकता है. कैरसेल वाले पेजों पर एलसीपी मेज़रमेंट के काम करने के तरीके के बारे में ज़्यादा जानने के लिए, कैरसल के लिए एलसीपी मेज़रमेंट सेक्शन देखें.

• आईएनपी (पेज के रिस्पॉन्स में लगने वाला समय)

  कैरसेल में JavaScript की बहुत कम शर्तें होती हैं. इसलिए, इससे पेज के रिस्पॉन्स पर कोई असर नहीं पड़ता. अगर आपको पता चलता है कि आपकी साइट के कैरसेल में लंबे समय तक चलने वाली स्क्रिप्ट हैं, तो आपको अपने कैरसेल टूल को बदलना चाहिए.

• सीएलएस (कुल लेआउट शिफ़्ट)

  काफ़ी सारे कैरसेल में, खराब क्वालिटी वाले और कंपोज़िट नहीं किए गए ऐनिमेशन का इस्तेमाल किया जाता है. इनसे सीएलएस बढ़ सकता है. अपने-आप चलने वाले कैरसेल वाले पेजों पर, इससे कभी न खत्म होने वाला सीएलएस हो सकता है. आम तौर पर, इस तरह का सीएलएस साफ़ तौर पर नहीं दिखता है, जिसकी वजह से इस समस्या को आसानी से समझा जा सकता है. इस समस्या से बचने के लिए, अपने कैरसेल में कंपोज़िट नहीं किए गए ऐनिमेशन का इस्तेमाल करने से बचें. उदाहरण के लिए, स्लाइड ट्रांज़िशन के दौरान.

परफ़ॉर्मेंस के सबसे सही तरीके

एचटीएमएल का इस्तेमाल करके कैरसेल कॉन्टेंट लोड करना

कैरसेल कॉन्टेंट को पेज के एचटीएमएल मार्कअप के ज़रिए लोड किया जाना चाहिए, ताकि पेज लोड होने की प्रोसेस के शुरुआती दौर में ही ब्राउज़र उसे ढूंढ सके. कैरसेल कॉन्टेंट लोड करना शुरू करने के लिए JavaScript का इस्तेमाल करना, कैरसेल का इस्तेमाल करते समय परफ़ॉर्मेंस से जुड़ी सबसे बड़ी गलती हो सकती है. इससे इमेज लोड होने में देरी होती है और LCP पर बुरा असर पड़ सकता है.

<div class="slides">
  <img src="https://example.com/cat1.jpg">
  <img src="https://example.com/cat2.jpg">
  <img src="https://example.com/cat3.jpg">
</div>

const slides = document.querySelector(".slides");
const newSlide = document.createElement("img");
newSlide.src = "htttp://example.com/cat1.jpg";
slides.appendChild(newSlide);

कैरसेल को बेहतर तरीके से ऑप्टिमाइज़ करने के लिए, पहली स्लाइड को स्टैटिक तौर पर लोड करें. इसके बाद, नेविगेशन कंट्रोल और अतिरिक्त कॉन्टेंट को शामिल करने के लिए, उसे बेहतर बनाएं. यह तकनीक उन जगहों पर सबसे ज़्यादा कारगर होती है जहां उपयोगकर्ता का ध्यान लंबे समय तक बना रहता है. इससे, कॉन्टेंट को लोड होने में ज़्यादा समय मिलता है. होम पेज जैसे ऐसे प्लैटफ़ॉर्म पर जहां उपयोगकर्ता सिर्फ़ एक या दो सेकंड के लिए बने रहते हैं, वहां सिर्फ़ एक इमेज लोड करना भी उतना ही असरदार हो सकता है.

लेआउट शिफ़्ट से बचना

कैरसेल में लेआउट शिफ़्ट होने की दो सबसे सामान्य वजहें हैं: स्लाइड ट्रांज़िशन और नेविगेशन कंट्रोल:

• स्लाइड ट्रांज़िशन: स्लाइड ट्रांज़िशन के दौरान होने वाले लेआउट शिफ़्ट, आम तौर पर डीओएम एलिमेंट की लेआउट-इंड्यूसिंग प्रॉपर्टी को अपडेट करने की वजह से होते हैं. इनमें से कुछ प्रॉपर्टी के उदाहरणों में ये शामिल हैं: left, top, width, और marginTop. लेआउट शिफ़्ट से बचने के लिए, इन एलिमेंट को ट्रांज़िशन करने के लिए, सीएसएस transform प्रॉपर्टी का इस्तेमाल करें. इस डेमो में एक बेसिक कैरसेल बनाने के लिए, transform का इस्तेमाल करने का तरीका बताया गया है.

• नेविगेशन कंट्रोल: कैरसेल नेविगेशन कंट्रोल को DOM से हटाने या जोड़ने/हटाने पर, लेआउट में बदलाव हो सकता है. यह इस बात पर निर्भर करता है कि ये बदलाव कैसे लागू किए गए हैं. आम तौर पर, इस तरह के कैरसेल, उपयोगकर्ता के कर्सर घुमाने पर ऐसा करते हैं.

कैरसेल के लिए सीएलएस मेज़रमेंट से जुड़ी कुछ आम गलतफ़हमियां यहां दी गई हैं:

• अपने-आप चलने वाले कैरसेल: कैरसेल से जुड़े लेआउट शिफ़्ट का सबसे सामान्य सोर्स, स्लाइड ट्रांज़िशन होता है. अपने-आप चलने वाले कैरसेल के बजाय, किसी दूसरे कैरसेल में ये लेआउट शिफ़्ट, आम तौर पर उपयोगकर्ता इंटरैक्शन के 500 मिलीसेकंड के अंदर होते हैं. इसलिए, इन्हें क्युमुलटिव लेआउट शिफ़्ट (सीएलएस) में शामिल नहीं किया जाता. हालांकि, अपने-आप चलने वाले कैरसेल के लिए, ये लेआउट शिफ़्ट, सीएलएस में शामिल हो सकते हैं. साथ ही, ये अनलिमिटेड बार दोहराए जा सकते हैं. इसलिए, यह पुष्टि करना ज़रूरी है कि अपने-आप चलने वाला कैरसेल, लेआउट में बदलाव का सोर्स न हो.

• स्क्रोल करना: कुछ कैरसेल में, उपयोगकर्ताओं को कैरसेल की स्लाइड पर नेविगेट करने के लिए स्क्रोल करने की सुविधा मिलती है. अगर किसी एलिमेंट की शुरुआती पोज़िशन बदल जाती है, लेकिन उसका स्क्रोल ऑफ़सेट (यानी, scrollLeft या scrollTop) उतनी ही मात्रा में (लेकिन उल्टी दिशा में) बदल जाता है, तो इसे लेआउट शिफ़्ट नहीं माना जाता. हालांकि, ऐसा तब ही होता है, जब ये बदलाव एक ही फ़्रेम में होते हैं.

लेआउट में होने वाले बदलावों के बारे में ज़्यादा जानने के लिए, लेआउट में होने वाले बदलावों को डीबग करना लेख पढ़ें.

आधुनिक टेक्नोलॉजी का इस्तेमाल करना

कई साइटें कैरसेल लागू करने के लिए, तीसरे पक्ष की JavaScript लाइब्रेरी का इस्तेमाल करती हैं. अगर फ़िलहाल पुराने कैरसेल टूल का इस्तेमाल किया जा रहा है, तो नए टूल पर स्विच करके परफ़ॉर्मेंस को बेहतर बनाया जा सकता है. नए टूल, ज़्यादा असरदार एपीआई का इस्तेमाल करते हैं. साथ ही, jQuery जैसी अतिरिक्त डिपेंडेंसी की ज़रूरत कम होती है.

हालांकि, कैरसेल के टाइप के आधार पर, हो सकता है कि आपको JavaScript की ज़रूरत न पड़े. Scroll Snap एपीआई के नए वर्शन की मदद से, सिर्फ़ एचटीएमएल और सीएसएस का इस्तेमाल करके कैरसेल जैसे ट्रांज़िशन लागू किए जा सकते हैं.

scroll-snap का इस्तेमाल करने के बारे में यहां कुछ संसाधन दिए गए हैं. इनसे आपको मदद मिल सकती है:

• स्टोरीज़ कॉम्पोनेंट (web.dev) बनाना
• नए वर्शन की वेब स्टाइल: स्क्रोल स्नैप (web.dev)
• सीएसएस-ओनली कैरसेल (सीएसएस ट्रिक)
• सीएसएस-ओनली कैरसेल बनाने का तरीका (सीएसएस ट्रिक)

कैरसेल कॉन्टेंट को ऑप्टिमाइज़ करना

कैरसेल में अक्सर साइट की कुछ बड़ी इमेज होती हैं. इसलिए, यह पक्का करना ज़रूरी है कि ये इमेज पूरी तरह से ऑप्टिमाइज़ की गई हों. इमेज का सही फ़ॉर्मैट और कंप्रेशन लेवल चुनना, इमेज सीडीएन का इस्तेमाल करना, और एक से ज़्यादा इमेज वर्शन दिखाने के लिए srcset का इस्तेमाल करना, ये सभी तकनीकें इमेज के ट्रांसफ़र साइज़ को कम कर सकती हैं.

परफ़ॉर्मेंस मेज़रमेंट

इस सेक्शन में, एलसीपी मेज़रमेंट के बारे में चर्चा की गई है, क्योंकि यह कैरसेल से जुड़ा है. हालांकि, एलसीपी का हिसाब लगाते समय कैरसेल को किसी दूसरे UX एलिमेंट से अलग माना जाता है, लेकिन अपने-आप चलने वाले कैरसेल के लिए एलसीपी का हिसाब लगाने का तरीका आम तौर पर भ्रम की स्थिति पैदा करता है.

कैरसेल के लिए एलसीपी मेज़रमेंट

कैरसेल के लिए एलसीपी का हिसाब लगाने का तरीका समझने के लिए, ये मुख्य बातें ध्यान में रखें:

• एलसीपी, पेज के एलिमेंट को फ़्रेम में पेंट किए जाने के हिसाब से तय करता है. जब उपयोगकर्ता पेज पर टैप, स्क्रोल या की दबाता है, तो एलसीपी एलिमेंट के लिए नए उम्मीदवारों को नहीं माना जाता. इसलिए, अपने-आप चलने वाले कैरसेल में मौजूद किसी भी स्लाइड को एलसीपी का फ़ाइनल एलिमेंट माना जा सकता है. वहीं, स्टैटिक कैरसेल में सिर्फ़ पहली स्लाइड को एलसीपी का संभावित एलिमेंट माना जाएगा.
• अगर एक ही साइज़ की दो इमेज रेंडर की जाती हैं, तो पहली इमेज को एलसीपी एलिमेंट माना जाएगा. एलसीपी एलिमेंट सिर्फ़ तब अपडेट किया जाता है, जब एलसीपी कैंडिडेट, मौजूदा एलसीपी एलिमेंट से बड़ा हो. इसलिए, अगर सभी कैरसेल एलिमेंट एक जैसे साइज़ के हैं, तो एलसीपी एलिमेंट ही पहली इमेज के तौर पर दिखना चाहिए.
• एलसीपी के लिए चुने गए पेजों का आकलन करते समय, एलसीपी "दिखने वाले साइज़ या असल साइज़, जो भी छोटा हो" को ध्यान में रखता है. इसलिए, अगर अपने-आप चलने वाला कैरसेल, इमेज को एक जैसा साइज़ में दिखाता है, लेकिन उसमें अलग-अलग इंटिग्रल साइज़ वाली इमेज शामिल हैं, जो डिसप्ले साइज़ से छोटी हैं, तो नई स्लाइड दिखने पर एलसीपी एलिमेंट बदल सकता है. इस मामले में, अगर सभी इमेज एक ही साइज़ में दिखाई जाती हैं, तो सबसे बड़े इंट्रिन्सिक साइज़ वाली इमेज को एलसीपी एलिमेंट माना जाएगा. एलसीपी को कम रखने के लिए, आपको यह पक्का करना होगा कि अपने-आप चलने वाले कैरसेल में मौजूद सभी आइटम का साइज़ एक ही हो.

Chrome 88 में कैरसेल के लिए एलसीपी की गिनती करने के तरीके में बदलाव

Chrome 88 के बाद से, जिन इमेज को बाद में डीओएम से हटा दिया जाता है उन्हें सबसे बड़े कॉन्टेंटफ़ुल पेंट के तौर पर माना जाता है. Chrome 88 से पहले, इन इमेज को ध्यान में नहीं रखा जाता था. अपने-आप चलने वाले कैरसेल का इस्तेमाल करने वाली साइटों के लिए, परिभाषा में हुए इस बदलाव का, एलसीपी स्कोर पर कोई असर नहीं पड़ेगा या फिर इसका असर अच्छा होगा.

यह बदलाव निगरानी के जवाब में किया गया था कि कई साइटें, डीओएम ट्री से पहले दिखाई गई इमेज को हटाकर कैरसेल ट्रांज़िशन लागू करती हैं. Chrome 88 से पहले, जब भी कोई नई स्लाइड दिखाई जाती थी, तो पिछले एलिमेंट को हटाने पर एलसीपी अपडेट होता था. इस बदलाव का असर सिर्फ़ अपने-आप चलने वाले कैरसेल पर पड़ेगा. आम तौर पर, सबसे ज़्यादा कॉन्टेंट वाले पेंट सिर्फ़ तब हो सकते हैं, जब उपयोगकर्ता पहली बार पेज से इंटरैक्ट करे.

Chrome 121 में थ्रेशोल्ड में हुए बदलाव

Chrome 121 में, कैरसेल जैसी हॉरिज़ॉन्टल-स्क्रोलिंग इमेज के व्यवहार में बदलाव किया गया है. अब ये वर्टिकल स्क्रोलिंग के थ्रेशोल्ड का इस्तेमाल करते हैं. इसका मतलब है कि कैरसेल के इस्तेमाल के उदाहरण के लिए, इमेज व्यूपोर्ट में दिखने से पहले लोड हो जाएंगी. इसका मतलब है कि उपयोगकर्ता को इमेज लोड होने में लगने वाले समय का पता कम चलेगा. हालांकि, इसके लिए ज़्यादा डाउनलोड की ज़रूरत होगी. Chrome बनाम Safari और Firefox के व्यवहार की तुलना करने के लिए, हॉरिज़ॉन्टल लेज़ी लोडिंग डेमो का इस्तेमाल करें.

दूसरी ज़रूरी बातें

इस सेक्शन में, यूज़र एक्सपीरियंस (UX) और प्रॉडक्ट के सबसे सही तरीकों के बारे में बताया गया है. कैरसेल लागू करते समय, आपको इन बातों का ध्यान रखना चाहिए. कैरसेल से आपके कारोबार के लक्ष्यों को बेहतर बनाने में मदद मिलती है. साथ ही, कॉन्टेंट को इस तरह पेश करना चाहिए कि उसे नेविगेट और पढ़ा जा सके.

नेविगेशन के सबसे सही तरीके

नेविगेशन कंट्रोल को प्रमुखता से दिखाना

कैरसेल नेविगेशन कंट्रोल पर आसानी से क्लिक किया जा सके और वे साफ़ तौर पर दिखें. आम तौर पर, ऐसा करना मुश्किल होता है. ज़्यादातर कैरसेल में नेविगेशन कंट्रोल छोटे और आसान होते हैं. ध्यान रखें कि नेविगेशन कंट्रोल का कोई एक रंग या स्टाइल, शायद सभी स्थितियों में काम न करे. उदाहरण के लिए, गहरे रंग के बैकग्राउंड पर साफ़ तौर पर दिखने वाला ऐरो, हल्के रंग के बैकग्राउंड पर शायद ठीक से न दिखे.

नेविगेशन की प्रोग्रेस दिखाना

कैरसेल नेविगेशन कंट्रोल से, स्लाइड की कुल संख्या और उपयोगकर्ता की प्रोग्रेस के बारे में जानकारी मिलनी चाहिए. इस जानकारी से, उपयोगकर्ता को किसी खास स्लाइड पर जाने में आसानी होती है. साथ ही, यह भी पता चलता है कि कौनसा कॉन्टेंट पहले से देखा जा चुका है. कुछ मामलों में, आने वाले कॉन्टेंट की झलक दिखाना भी मददगार हो सकता है. भले ही, यह अगली स्लाइड का कोई हिस्सा हो या थंबनेल की सूची. इससे दर्शकों की दिलचस्पी बढ़ सकती है.

मोबाइल पर जेस्चर की सुविधा

मोबाइल पर, परंपरागत नेविगेशन कंट्रोल (जैसे कि स्क्रीन बटन) के अलावा, स्वाइप करने के जेस्चर भी काम करने चाहिए.

नेविगेशन के लिए वैकल्पिक पाथ उपलब्ध कराना

ऐसा हो सकता है कि ज़्यादातर उपयोगकर्ता, कैरसेल के सभी कॉन्टेंट में दिलचस्पी न दिखाएं. इसलिए, कैरसेल की स्लाइड से लिंक किए गए कॉन्टेंट को दूसरे नेविगेशन पाथ से ऐक्सेस किया जा सकता है.

पढ़ने के सबसे सही तरीके

वीडियो अपने-आप चलने की सुविधा का इस्तेमाल न करना

अपने-आप चलने वाले वीडियो का इस्तेमाल करने से, दो समस्याएं आती हैं: स्क्रीन पर दिखने वाले एनिमेशन, उपयोगकर्ताओं का ध्यान भटका सकते हैं और उनकी नज़र ज़्यादा अहम कॉन्टेंट से हट सकती है. साथ ही, उपयोगकर्ता अक्सर एनिमेशन को विज्ञापनों से जोड़ते हैं. इसलिए, वे अपने-आप चलने वाले कैरसेल को अनदेखा कर देंगे.

इसलिए, वीडियो अपने-आप चलने की सुविधा का इस्तेमाल करना बहुत कम ही सही रहता है. अगर कॉन्टेंट ज़रूरी है, तो अपने-आप चलने की सुविधा का इस्तेमाल न करने से उसका एक्सपोज़र ज़्यादा बढ़ जाएगा. अगर कैरसेल कॉन्टेंट ज़रूरी नहीं है तो अपने-आप चलने की सुविधा का इस्तेमाल करने से, ज़्यादा ज़रूरी कॉन्टेंट नहीं दिखेगा. इसके अलावा, अपने-आप चलने वाले कैरसेल को पढ़ना मुश्किल हो सकता है. साथ ही, ये परेशान करने वाले भी होते हैं. लोग अलग-अलग स्पीड पर पढ़ते हैं. इसलिए, ऐसा बहुत कम होता है कि अलग-अलग उपयोगकर्ताओं के लिए, कोई कैरसेल "सही" समय पर लगातार बदलता रहे.

आम तौर पर, स्लाइड नेविगेशन को नेविगेशन कंट्रोल की मदद से, उपयोगकर्ता के निर्देशों के मुताबिक होना चाहिए. अगर आपको वीडियो अपने-आप चलने की सुविधा का इस्तेमाल करना है, तो उपयोगकर्ता के कर्सर घुमाने पर, वीडियो अपने-आप चलने की सुविधा बंद हो जानी चाहिए. इसके अलावा, स्लाइड ट्रांज़िशन रेट तय करते समय स्लाइड के कॉन्टेंट का ध्यान रखना चाहिए. स्लाइड में ज़्यादा टेक्स्ट होने पर, उसे स्क्रीन पर ज़्यादा देर तक दिखाया जाना चाहिए.

टेक्स्ट और इमेज को अलग रखना

कैरसेल टेक्स्ट के कॉन्टेंट को अक्सर संबंधित इमेज फ़ाइल में "बेक किया जाता है". एचटीएमएल मार्कअप का इस्तेमाल करके इसे अलग से नहीं दिखाया जाता. यह तरीका सुलभता, स्थानीय भाषा, और कंप्रेशन रेट के लिए खराब है. इससे एसेट बनाने के लिए, एक ही तरीका सबके लिए इस्तेमाल करने का बढ़ावा मिलता है. हालांकि, इमेज और टेक्स्ट का एक जैसा फ़ॉर्मैट, डेस्कटॉप और मोबाइल फ़ॉर्मैट में शायद ही कभी एक जैसा हो.

कम से कम शब्द इस्तेमाल करें

आपके पास लोगों का ध्यान खींचने के लिए कुछ ही सेकंड होते हैं. कम शब्दों में, सटीक जानकारी वाली कॉपी से, आपके मैसेज के कहीं भी जाने की संभावना बढ़ जाती है.

प्रॉडक्ट इस्तेमाल करने के सबसे सही तरीके

कैरसेल उन स्थितियों में अच्छी तरह से काम करते हैं जहां ज़्यादा कॉन्टेंट दिखाने के लिए, वर्टिकल स्पेस का इस्तेमाल नहीं किया जा सकता. प्रॉडक्ट पेजों पर कैरसेल, अक्सर इस्तेमाल के इस उदाहरण का एक अच्छा उदाहरण होते हैं.

हालांकि, कैरसेल का इस्तेमाल हमेशा असरदार तरीके से नहीं किया जाता.

• कैरसेल, खास तौर पर अगर उनमें प्रमोशन शामिल हों या वे अपने-आप आगे बढ़ते हों, तो उपयोगकर्ता उन्हें आसानी से विज्ञापन समझ लेते हैं. उपयोगकर्ता, विज्ञापनों को अनदेखा कर देते हैं. इसे बैनर के लिए अंधापन कहा जाता है.
• कैरसेल का इस्तेमाल अक्सर कई विभागों को खुश करने और कारोबार की प्राथमिकताओं के बारे में फ़ैसले लेने से बचने के लिए किया जाता है. इस वजह से, कैरसेल में आसानी से ऐसा कॉन्टेंट डाला जा सकता है जो काम का न हो.

अपने अनुमानों की जांच करें

कैरसेल के कारोबार पर होने वाले असर का आकलन और जांच की जानी चाहिए. खास तौर पर, होम पेज पर मौजूद कैरसेल के असर का आकलन और जांच की जानी चाहिए. कैरसेल पर क्लिक मिलने की दरों से यह पता चलता है कि कैरसेल और उसका कॉन्टेंट असरदार है या नहीं.

ज़रूरी जानकारी दें

कैरसेल तब सबसे अच्छी तरह काम करते हैं, जब उनमें दिलचस्प और काम का कॉन्टेंट हो और उसे साफ़ तौर पर दिखाया गया हो. अगर कॉन्टेंट, कैरसेल के बाहर उपयोगकर्ता का ध्यान नहीं खींचता है, तो उसे कैरसेल में डालने से उसकी परफ़ॉर्मेंस बेहतर नहीं होगी. अगर आपको कैरसेल का इस्तेमाल करना है, तो कॉन्टेंट को प्राथमिकता दें. साथ ही, पक्का करें कि हर स्लाइड इतनी काम की हो कि उपयोगकर्ता अगली स्लाइड पर क्लिक करना चाहे.