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

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

Katie Hempenius
Katie Hempenius

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

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

कैरसेल दिखाने वाली इमेज

परफ़ॉर्मेंस

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

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

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

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

    कैरसेल में 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 का इस्तेमाल करने के बारे में यहां कुछ संसाधन दिए गए हैं. इनसे आपको मदद मिल सकती है:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

आसानी से पढ़े जा सकने वाले कॉन्टेंट के लिए सबसे सही तरीके

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

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

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

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

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

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

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

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

प्रॉडक्ट के लिए सबसे सही तरीके

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

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

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

प्रॉडक्ट को लेकर किए गए अनुमानों का आकलन करना

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

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

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