Above the Fold

Above the Fold क्या है?

Above the Fold (अबोव द फोल्ड) वेबसाइट के पेज का वह भाग है जो उपयोगकर्ता द्वारा स्क्रॉल करने से पहले ब्राउज़र विंडो में दिखाई देता है। यह शब्द प्रिंट समाचार पत्रों से आया है, जहाँ फ्रंट पेज का ऊपरी आधा हिस्सा न्यूज़स्टैंड पर दिखाई देता था। वेब पर कोई निश्चित “फ़ोल्ड” नहीं होता है: यह सीमा विज़िटर की स्क्रीन के आकार, डिवाइस और ब्राउज़र विंडो पर निर्भर करती है, इसलिए जो डेस्कटॉप पर दिखाई देता है उसके लिए मोबाइल पर स्क्रॉल करने की आवश्यकता हो सकती है।

Above the Fold क्यों महत्वपूर्ण है?

यह वह जगह है जहाँ आपके पास यह दिखाने के लिए कुछ सेकंड होते हैं कि आप क्या बेचते हैं और अगला कदम क्या है। नीलसन नॉर्मन ग्रुप के आई-ट्रैकिंग अध्ययनों से पता चलता है कि उपयोगकर्ता अपना अधिकांश ध्यान Above the Fold पर खर्च करते हैं, भले ही वे स्क्रॉल करते हों। इसलिए Above the Fold क्षेत्र में एक स्पष्ट मूल्य प्रस्ताव (value proposition) और एक दृश्यमान CTA एक ऑनलाइन स्टोर में रूपांतरण दर (conversion rate) के लिए एक क्लासिक लीवर है।

सामान्य उपयोग के मामले

• होमपेज हीरो। मोबाइल और डेस्कटॉप दोनों पर स्क्रॉल किए बिना अपना मुख्य संदेश, ऑफ़र या श्रेणी दिखाएं।
• उत्पाद पेज। सुनिश्चित करें कि कीमत, “कार्ट में जोड़ें” (Add to cart) और उत्पाद की छवि तुरंत दिखाई दे।
• अभियान पेज। ऑफ़र और CTA को Above the Fold रखें ताकि विज्ञापन ट्रैफ़िक को कार्रवाई खोजने के लिए भटकना न पड़े।
• कोर वेब वाइटल्स। अबोव द फोल्ड का सबसे बड़ा तत्व अक्सर LCP तत्व होता है, इसलिए एक भारी हीरो इमेज आपके LCP को धीमा कर सकती है।

Shopify का दृष्टिकोण

Shopify में, Above the Fold क्षेत्र थीम संपादक में थीम के सेक्शन और ब्लॉक द्वारा नियंत्रित किया जाता है। एक सामान्य गलती हीरो इमेज को लेज़ी-लोड (lazy-loading) करना है: जब यह LCP के लिए योग्य होती है, तो इससे लोडिंग में देरी होती है और कोर वेब वाइटल्स (Core Web Vitals) प्रभावित होते हैं। इसके बजाय हीरो इमेज पर loading="eager" (या fetchpriority="high") सेट करें और शीर्ष सेक्शन को हल्का रखें। हमेशा एक वास्तविक फ़ोन पर परीक्षण करें — न कि केवल डेस्कटॉप पर — क्योंकि छोटी स्क्रीन पर फ़ोल्ड बहुत ऊपर बैठता है।