इस पेज का अनुवाद Cloud Translation API से किया गया है.

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

परफ़ॉर्मेंस और उपयोगिता के लिए कैरसेल ऑप्टिमाइज़ करें.

Katie Hempenius

कैरसेल एक 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 को शामिल किया ही नहीं गया. नया स्क्रोल Snap एपीआई केवल HTML और टेम्प्लेट का उपयोग करके कैरसेल-जैसे ट्रांज़िशन लागू करना सीएसएस.

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

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

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

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

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

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

कैरसेल के लिए एलसीपी कैलकुलेशन कैसे काम करती है, यह समझने के लिए यहां कुछ ज़रूरी बातें बताई गई हैं:

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

Chrome 88 में कैरसेल के लिए, एलसीपी कैलकुलेशन में बदलाव

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

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

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

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

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

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

नेविगेशन से जुड़े सबसे सही तरीके

नेविगेट करने के बेहतर कंट्रोल उपलब्ध कराना

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

नेविगेशन की प्रोग्रेस के बारे में बताएं

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

मोबाइल जेस्चर के साथ काम करना

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

दूसरे नेविगेशन पाथ उपलब्ध कराना

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

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

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

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

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

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

टेक्स्ट और इमेज को अलग-अलग रखें

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

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

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

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

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

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

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

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

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

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

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