परफ़ॉर्मेंस और इस्तेमाल के लिए कैरसेल को ऑप्टिमाइज़ करें.
कैरसेल, ऐसा UX कॉम्पोनेंट होता है जो कॉन्टेंट को स्लाइड शो की तरह दिखाता है. कैरसेल, "ऑटोप्ले" या उपयोगकर्ताओं के ज़रिए मैन्युअल तरीके से नेविगेट किए जा सकते हैं. कैरसेल का इस्तेमाल दूसरी जगहों पर भी किया जा सकता है, लेकिन होम पेज पर इमेज, प्रॉडक्ट, और प्रमोशन दिखाने के लिए इनका इस्तेमाल सबसे ज़्यादा किया जाता है.
इस लेख में, कैरसेल की परफ़ॉर्मेंस और उपयोगकर्ता अनुभव के सबसे सही तरीकों के बारे में बताया गया है.
परफ़ॉर्मेंस
अच्छी तरह लागू किए गए कैरसेल का परफ़ॉर्मेंस पर न के बराबर असर पड़ सकता है या कोई असर नहीं पड़ना चाहिए. हालांकि, कैरसेल में अक्सर बड़ी मीडिया ऐसेट होती हैं. बड़ी ऐसेट, परफ़ॉर्मेंस पर असर डाल सकती हैं. इस बात से कोई फ़र्क़ नहीं पड़ता कि उन्हें कैरसेल में दिखाया गया है या किसी दूसरी जगह पर.
एलसीपी (सबसे बड़ा कॉन्टेंटफ़ुल पेंट)
पेज का ऊपरी हिस्सा दिखाने वाले बड़े कैरसेल में अक्सर पेज का एलसीपी एलिमेंट होता है. इसलिए, इससे एलसीपी पर काफ़ी असर पड़ सकता है. ऐसी स्थितियों में, कैरसेल को ऑप्टिमाइज़ करने से एलसीपी काफ़ी बेहतर हो सकता है. कैरसेल वाले पेजों पर एलसीपी मेज़रमेंट कैसे काम करता है, इस बारे में ज़्यादा जानने के लिए, कैरसेल के लिए एलसीपी मेज़रमेंट सेक्शन देखें.
आईएनपी (इंटरैक्शन टू नेक्स्ट पेंट)
कैरसेल के लिए JavaScript की ज़रूरी शर्तें कम होती हैं. इसलिए, पेज के रिस्पॉन्स पर असर नहीं डालना चाहिए. अगर आपको पता चलता है कि आपकी साइट की कैरसेल में लंबे समय तक चलने वाली स्क्रिप्ट हैं, तो आपको कैरसेल टूल को बदलना चाहिए.
सीएलएस (कुल लेआउट शिफ़्ट)
बहुत से कैरसेल ऐसे होते हैं जिन्हें कंपोज़िट नहीं किए गए ऐनिमेशन का इस्तेमाल किया जाता है. इससे सीएलएस में बढ़ोतरी हो सकती है. अपने-आप चलने वाले कैरसेल वाले पेजों पर, इससे अनगिनत सीएलएस हो सकता है. आम तौर पर, इस तरह का सीएलएस लोगों को नहीं दिखता. इससे समस्या को नज़रअंदाज़ करना आसान हो जाता है. इस समस्या से बचने के लिए, अपने कैरसेल में कंपोज़िट नहीं किए गए ऐनिमेशन का इस्तेमाल करने से बचें (उदाहरण के लिए, स्लाइड ट्रांज़िशन के दौरान).
परफ़ॉर्मेंस के सबसे सही तरीके
एचटीएमएल का इस्तेमाल करके कैरसेल कॉन्टेंट लोड करना
कैरसेल कॉन्टेंट को पेज के एचटीएमएल मार्कअप से लोड किया जाना चाहिए, ताकि पेज लोड होने की प्रोसेस के शुरुआती दौर में, ब्राउज़र उसे खोज सके. कैरसेल कॉन्टेंट को लोड करने की प्रक्रिया शुरू करने के लिए JavaScript का इस्तेमाल करना, शायद सबसे बड़ी परफ़ॉर्मेंस वाली गलती है. इससे कैरसेल का इस्तेमाल नहीं किया जा सकता. इससे इमेज लोड होने में देरी होती है और एलसीपी पर बुरा असर पड़ सकता है.
<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को कैसे इस्तेमाल किया जाता है.नेविगेशन कंट्रोल: डीओएम से कैरसेल नेविगेशन कंट्रोल की जगह बदलने या जोड़ने/हटाने से, इन बदलावों को लागू करने के तरीके के आधार पर लेआउट शिफ़्ट हो सकते हैं. आम तौर पर, ऐसा व्यवहार दिखाने वाले कैरसेल में उपयोगकर्ता के कर्सर घुमाने पर, ऐसा होता है.
कैरसेल के सीएलएस मेज़रमेंट को लेकर भ्रम की स्थिति में, यहां कुछ सामान्य बातें बताई गई हैं:
अपने-आप चलने वाले कैरसेल: कैरसेल से जुड़े लेआउट शिफ़्ट का सबसे आम सोर्स स्लाइड ट्रांज़िशन है. नॉन-ऑटोप्ले कैरसेल में, ये लेआउट शिफ़्ट, आम तौर पर उपयोगकर्ता के इंटरैक्शन के 500 मि॰से॰ के अंदर होते हैं. इसलिए, इन्हें कुल लेआउट शिफ़्ट (सीएलएस) में नहीं गिना जाता. हालांकि, अपने-आप चलने वाले कैरसेल के लिए, इन लेआउट शिफ़्ट को न सिर्फ़ सीएलएस में गिना जा सकता है, बल्कि इन्हें बार-बार भी दोहराया जा सकता है. इसलिए, यह पुष्टि करना खास तौर पर ज़रूरी है कि ऑटोप्ले कैरसेल, लेआउट शिफ़्ट का सोर्स नहीं है.
स्क्रोल करना: कुछ कैरसेल की मदद से लोग, कैरसेल स्लाइड पर नेविगेट करने के लिए स्क्रोल करने की सुविधा का इस्तेमाल कर सकते हैं. अगर किसी एलिमेंट की शुरुआती पोज़िशन बदल जाती है, लेकिन उसके स्क्रोल ऑफ़सेट (यानी,
scrollLeftयाscrollTop) में समान मात्रा (लेकिन विपरीत दिशा में) में बदलाव होता है, तो इसे लेआउट शिफ़्ट नहीं माना जाएगा, बशर्ते वे एक ही फ़्रेम में हों.
लेआउट शिफ़्ट के बारे में ज़्यादा जानकारी के लिए, लेआउट शिफ़्ट को डीबग करना देखें.
आधुनिक टेक्नोलॉजी का इस्तेमाल करें
कई साइटें, कैरसेल लागू करने के लिए तीसरे पक्ष की JavaScript लाइब्रेरी का इस्तेमाल करती हैं. अगर अभी पुराने कैरसेल टूल का इस्तेमाल किया जा रहा है, तो नए टूल का इस्तेमाल करके परफ़ॉर्मेंस को बेहतर बनाया जा सकता है. नए टूल ज़्यादा बेहतर एपीआई का इस्तेमाल करते हैं. साथ ही, इन्हें jQuery जैसी दूसरी डिपेंडेंसी की ज़रूरत भी कम होती है.
हालांकि, आपका बनाया जा रहा कैरसेल किस तरह का है, इसके आधार पर शायद आपको JavaScript की ज़रूरत न हो. नए Scroll Snap API की मदद से सिर्फ़ एचटीएमएल और सीएसएस का इस्तेमाल करके कैरसेल जैसे ट्रांज़िशन लागू किए जा सकते हैं.
यहां scroll-snap का इस्तेमाल करने के बारे में कुछ संसाधन दिए गए हैं. इनसे आपको मदद मिल सकती है:
- स्टोरीज़ वाला कॉम्पोनेंट बनाना (web.dev)
- अगली-पीढ़ी की वेब स्टाइलिंग: स्क्रोल स्नैप (web.dev)
- CSS-Only कैरसेल (CSS Tricks)
- सिर्फ़ सीएसएस वाला कैरसेल बनाने का तरीका (सीएसएस ट्रिक)
कैरसेल के कॉन्टेंट को ऑप्टिमाइज़ करें
कैरसेल में अक्सर साइट की कुछ सबसे बड़ी इमेज होती हैं. इसलिए, इन इमेज को पूरी तरह से ऑप्टिमाइज़ करने के लिए, आपको समय देना चाहिए. सही इमेज फ़ॉर्मैट और कंप्रेशन लेवल चुनना, इमेज सीडीएन का इस्तेमाल करना, और एक से ज़्यादा इमेज वर्शन दिखाने के लिए srcset का इस्तेमाल करना, ये सभी तकनीकें हैं जिनसे इमेज का ट्रांसफ़र साइज़ कम हो सकता है.
परफ़ॉर्मेंस मेज़रमेंट
इस सेक्शन में, कैरसेल से जुड़े एलसीपी मेज़रमेंट के बारे में बताया गया है. हालांकि, एलसीपी कैलकुलेशन के दौरान कैरसेल के मामले में किसी दूसरे UX एलिमेंट से अलग व्यवहार नहीं किया जाता. हालांकि, अपने-आप चलने वाले कैरसेल के लिए, एलसीपी का हिसाब लगाने के तरीके में भ्रम की स्थिति होती है.
कैरसेल के लिए एलसीपी मेज़रमेंट
कैरसेल के लिए एलसीपी कैलकुलेशन के काम करने का तरीका जानने के लिए, इन मुख्य बातों का ध्यान रखें:
- एलसीपी, फ़्रेम पर पेंट किए गए पेज एलिमेंट को ध्यान में रखता है. जब उपयोगकर्ता पेज के साथ इंटरैक्ट (टैप, स्क्रोल करना या बटन दबाने) करता है, तब एलसीपी एलिमेंट के लिए नए उम्मीदवारों पर विचार नहीं किया जाता. इसलिए, अपने-आप चलने वाले कैरसेल में मौजूद कोई भी स्लाइड, फ़ाइनल एलसीपी एलिमेंट हो सकती है. वहीं, स्टैटिक कैरसेल में सिर्फ़ पहली स्लाइड को संभावित एलसीपी एलिमेंट माना जा सकता है.
- अगर दो बराबर साइज़ की इमेज रेंडर की जाती हैं, तो पहली इमेज को एलसीपी एलिमेंट माना जाएगा. एलसीपी एलिमेंट को सिर्फ़ तब अपडेट किया जाता है, जब एलसीपी कैंडिडेट, मौजूदा एलसीपी एलिमेंट से बड़ा हो. इसलिए, अगर सभी कैरसेल एलिमेंट का साइज़ एक जैसा है, तो एलसीपी एलिमेंट ही दिखाई जाने वाली पहली इमेज होनी चाहिए.
- एलसीपी के उम्मीदवारों का आकलन करते समय, "दिखने वाले साइज़ या अंदरूनी साइज़ (जो भी छोटा हो)" को ध्यान में रखा जाता है. इसलिए, अगर अपने-आप चलने वाले कैरसेल में इमेज एक जैसी साइज़ में दिखाई जाती हैं, लेकिन उसमें अलग-अलग इंटिरिनिक साइज़ की ऐसी इमेज हैं जो डिसप्ले साइज़ से छोटी हैं, तो नई स्लाइड दिखने पर एलसीपी एलिमेंट बदल सकता है. इस मामले में, अगर सभी इमेज एक ही साइज़ में दिखाई जाती हैं, तो सबसे बड़े इंटिग्रिटी साइज़ वाली इमेज को एलसीपी एलिमेंट माना जाएगा. एलसीपी को कम रखने के लिए, आपको यह पक्का करना होगा कि अपने-आप चलने वाले कैरसेल में मौजूद सभी आइटम का साइज़ एक जैसा हो.
Chrome 88 में कैरसेल के लिए एलसीपी कैलकुलेशन में बदलाव
Chrome88 से, बाद में DOM से हटाए गए इमेज को सबसे बड़े कॉन्टेंटफ़ुल पेंट माना जाता है. Chrome 88 से पहले, इन इमेज को शामिल नहीं किया जाता था. अपने-आप चलने वाले कैरसेल का इस्तेमाल करने वाली साइटों के लिए, परिभाषा में हुए इस बदलाव का एलसीपी स्कोर पर सामान्य या अच्छा असर पड़ेगा.
यह बदलाव इस निगरानी को ध्यान में रखते हुए किया गया था कि कई साइटें, डीओएम ट्री से पहले दिखाई गई इमेज को हटाकर कैरसेल ट्रांज़िशन लागू करती हैं. Chrome 88 से पहले, हर बार नई स्लाइड प्रज़ेंट करने पर, पिछले एलिमेंट को हटाने से एलसीपी अपडेट ट्रिगर होता था. इस बदलाव से सिर्फ़ परिभाषा के हिसाब से, अपने-आप चलने वाले कैरसेल के असर पर असर पड़ता है. किसी उपयोगकर्ता के पेज से इंटरैक्ट करने से पहले ही सबसे बड़े कॉन्टेंटफ़ुल पेंट दिख सकते हैं.
Chrome 121 के थ्रेशोल्ड में बदलाव
Chrome 121 ने कैरसेल जैसी हॉरिज़ॉन्टल स्क्रोलिंग इमेज के काम करने का तरीका बदल दिया है. ये अब उन थ्रेशोल्ड का इस्तेमाल करेंगे जो वर्टिकल स्क्रोलिंग के लिए किए जाते हैं. इसका मतलब है कि कैरसेल के इस्तेमाल के उदाहरण में, इमेज व्यूपोर्ट में दिखने से पहले लोड हो जाएंगी. इसका मतलब यह है कि उपयोगकर्ता को इमेज लोड होने पर कम ध्यान मिलेगा, लेकिन डाउनलोड की लागत ज़्यादा होगी. Chrome, Safari और Firefox के व्यवहार की तुलना करने के लिए, हॉरिज़ॉन्टल लेज़ी लोडिंग डेमो का इस्तेमाल करें.
दूसरी ज़रूरी बातें
इस सेक्शन में, उपयोगकर्ता अनुभव (UX) और प्रॉडक्ट के सबसे सही तरीकों के बारे में बताया गया है. कैरसेल लागू करते समय इन बातों का ध्यान रखना चाहिए. कैरसेल से आपके कारोबार के लक्ष्यों को आगे बढ़ाने और कॉन्टेंट को नेविगेट करने और पढ़ने में आसान होना चाहिए.
नेविगेशन के सबसे सही तरीके
अहम नेविगेशन कंट्रोल दें
कैरसेल नेविगेशन के कंट्रोल ऐसे होने चाहिए जिन पर आसानी से क्लिक किया जा सके और वे आसानी से दिखें. यह कुछ ऐसा है जो शायद ही बेहतर तरीके से किया जाए. ज़्यादातर कैरसेल में नेविगेशन कंट्रोल होते हैं जो छोटे और छोटे, दोनों होते हैं. ध्यान रखें कि नेविगेशन कंट्रोल का कोई रंग या स्टाइल, शायद ही सभी स्थितियों में काम करे. उदाहरण के लिए, गहरे रंग के बैकग्राउंड में साफ़ तौर पर नज़र आने वाला ऐरो को हल्के रंग के बैकग्राउंड में देखना मुश्किल हो सकता है.
नेविगेशन की प्रोग्रेस दिखाएं
कैरसेल नेविगेशन कंट्रोल से, स्लाइड की कुल संख्या और उन पर उपयोगकर्ता की प्रोग्रेस के बारे में जानकारी मिलनी चाहिए. इस जानकारी से उपयोगकर्ता को किसी खास स्लाइड पर नेविगेट करने और यह समझने में मदद मिलती है कि कौनसा कॉन्टेंट पहले ही देखा जा चुका है. कुछ स्थितियों में, आने वाले कॉन्टेंट की झलक दिखाने से भी दर्शकों की दिलचस्पी बढ़ाने में मदद मिल सकती है. भले ही, वह अगली स्लाइड का हिस्सा हो या थंबनेल की सूची.
मोबाइल जेस्चर की सुविधा
मोबाइल पर, परंपरागत नेविगेशन कंट्रोल (जैसे कि स्क्रीन बटन) के साथ-साथ स्वाइप जेस्चर भी काम करने चाहिए.
नेविगेशन के वैकल्पिक पाथ देना
इस बात की संभावना कम है कि ज़्यादातर उपयोगकर्ता सभी कैरसेल कॉन्टेंट से जुड़ेंगे. इसलिए, कैरसेल स्लाइड से जुड़े जिस कॉन्टेंट को अन्य नेविगेशन पाथ से ऐक्सेस किया जा सकता है वह होना चाहिए.
रीडबिलिटी से जुड़े सबसे सही तरीके
अपने-आप चलने की सुविधा का इस्तेमाल न करें
ऑटोप्ले यानी वीडियो के अपने-आप चलने की सुविधा इस्तेमाल करने से दो तरह की समस्याएं पैदा होती हैं: स्क्रीन पर दिखने वाले ऐनिमेशन, उपयोगकर्ताओं का ध्यान ध्यान भटकाते हैं और ज़रूरी कॉन्टेंट से उनका ध्यान भटकने देते हैं. साथ ही, उपयोगकर्ता अक्सर विज्ञापनों में ऐनिमेशन जोड़ते हैं, इसलिए वे अपने-आप चलने वाले कैरसेल को अनदेखा कर देते हैं.
इसलिए, ऐसा बहुत कम होता है कि वीडियो अपने-आप चलने की सुविधा बेहतर विकल्प हो. अगर कॉन्टेंट ज़रूरी है, तो अपने-आप चलने की सुविधा का इस्तेमाल न करने से ज़्यादा से ज़्यादा लोगों तक आपकी पहुंच बढ़ेगी. अगर कैरसेल कॉन्टेंट ज़रूरी नहीं है, तो अपने-आप चलने वाला कॉन्टेंट ज़्यादा ज़रूरी कॉन्टेंट से हट जाएगा. इसके अलावा, अपने-आप चलने वाले कैरसेल को पढ़ना मुश्किल हो सकता है और परेशान करने वाला भी हो सकता है. लोग अलग-अलग स्पीड से पढ़ते हैं, इसलिए ऐसा बहुत कम होता है कि अलग-अलग उपयोगकर्ताओं के लिए कैरसेल लगातार "सही" समय पर बदल रहा हो.
आम तौर पर, स्लाइड नेविगेशन, उपयोगकर्ताओं के लिए नेविगेशन कंट्रोल होना चाहिए. अगर आपको अपने-आप चलने की सुविधा इस्तेमाल करनी है, तो उपयोगकर्ता के कर्सर घुमाने पर, वीडियो अपने-आप चलने की सुविधा बंद होनी चाहिए. इसके अलावा, स्लाइड के कॉन्टेंट में इस बात का ध्यान रखा जाना चाहिए कि स्लाइड में जितना ज़्यादा टेक्स्ट होगा वह स्क्रीन पर उतना ही ज़्यादा समय के लिए दिखेगा.
टेक्स्ट और इमेज को अलग-अलग रखें
कैरसेल टेक्स्ट वाले कॉन्टेंट को एचटीएमएल मार्कअप का इस्तेमाल करके अलग से दिखाने के बजाय, अक्सर उससे जुड़ी इमेज फ़ाइल में "बेक किया जाता है". यह तरीका सुलभता, स्थानीय भाषा के अनुसार लिखने, और कंप्रेशन रेट के लिए बुरा है. साथ ही, इससे ऐसेट बनाने के लिए, एक ही तरीका अपनाया जा सकता है. हालांकि, डेस्कटॉप और मोबाइल फ़ॉर्मैट पर एक ही इमेज और टेक्स्ट फ़ॉर्मैटिंग को शायद ही कभी समान रूप से पढ़ा जा सके.
कम से कम शब्द इस्तेमाल करें
किसी उपयोगकर्ता का ध्यान खींचने के लिए आपके पास कुछ ही सेकंड का समय होता है. शॉर्ट वीडियो में, सटीक जानकारी देने वाली कॉपी से मैसेज मिलने की संभावना बढ़ जाती है.
प्रॉडक्ट इस्तेमाल करने के सबसे सही तरीके
कैरसेल ऐसे मामलों में सही तरीके से काम करते हैं, जब अतिरिक्त कॉन्टेंट दिखाने के लिए, अतिरिक्त वर्टिकल स्पेस का इस्तेमाल नहीं किया जा सकता. आम तौर पर, प्रॉडक्ट के पेजों पर मौजूद कैरसेल इस इस्तेमाल के उदाहरण का अच्छा उदाहरण हैं.
हालांकि, कैरसेल का इस्तेमाल हमेशा असरदार तरीके से नहीं किया जाता है.
- अगर कैरसेल में प्रमोशन होते हैं या उसमें अपने-आप प्रमोशन होते हैं, तो उपयोगकर्ता विज्ञापनों के लिए उन्हें आसानी से गलत तरीके से समझ सकते हैं. उपयोगकर्ता विज्ञापनों को अनदेखा कर देते हैं. इस घटना को बैनर ब्लाइंडनेस कहा जाता है.
- कैरसेल का इस्तेमाल अक्सर कई डिपार्टमेंट को चुनने और कारोबार की प्राथमिकताओं के बारे में फ़ैसले लेने से बचने के लिए किया जाता है. ऐसे में, कैरसेल ऐसे कॉन्टेंट के लिए आसानी से डंप होते जा सकते हैं जो काम के नहीं हैं.
अपने अनुमानों को परखें
कैरसेल के कारोबार पर पड़ने वाले असर का आकलन और उसकी जांच की जानी चाहिए. खास तौर पर, होम पेज पर पड़ने वाले असर का. कैरसेल पर क्लिक मिलने की दरों से आपको यह तय करने में मदद मिल सकती है कि कोई कैरसेल और उसका कॉन्टेंट असरदार है या नहीं.
ज़रूरी जानकारी दें
कैरसेल सबसे अच्छे तरीके से तब काम करते हैं, जब उनमें दिलचस्प और काम की ऐसी सामग्री हो जो साफ़ तौर पर दिखाई गई हो. अगर कॉन्टेंट में कैरसेल के बाहर, उपयोगकर्ता को शामिल नहीं किया जाएगा, तो उसे कैरसेल में रखने से परफ़ॉर्मेंस बेहतर नहीं होगी. अगर आपको कैरसेल का इस्तेमाल करना है, तो कॉन्टेंट को प्राथमिकता दें. साथ ही, पक्का करें कि हर स्लाइड काफ़ी काम की हो, ताकि उपयोगकर्ता अगली स्लाइड पर क्लिक कर सके.