Nuvemshop की इमेज को प्राथमिकता देने की रणनीति से, एलसीपी में 68% और कन्वर्ज़न में 8.9% की बढ़ोतरी कैसे हुई

Federico Iglesias

Jesus Biaggioni

Kaio Graco Cardamone

Lucas Demarchi

Mari Viana

पब्लिश होने की तारीख: 24 जून, 2026

Nuvemshop, लैटिन अमेरिका में स्पैनिश बोलने वाले लोगों के बीच Tiendanube के नाम से जाना जाता है. यह इस इलाके का सबसे बड़ा ई-कॉमर्स प्लैटफ़ॉर्म है. यह 1,80,000 से ज़्यादा ऑनलाइन स्टोर को सेवाएं देता है. कारोबारी या कंपनियां, कई थीम और डाइनैमिक कॉन्टेंट की व्यवस्थाओं के ज़रिए अपने स्टोरफ़्रंट को पसंद के मुताबिक बनाती हैं. ऐसे में, यह पक्का करना कि अलग-अलग तरह के स्टोरफ़्रंट पर पेज तेज़ी से लोड हो रहे हैं, तकनीकी तौर पर एक खास चुनौती है.

• सबसे बड़े एलिमेंट को रेंडर करने में लगने वाला समय (एलसीपी) 68%बेहतर हुआ. यह एक साल में 57% से बढ़कर 96% हो गया. इससे पता चलता है कि स्टोर, असली खरीदारों के लिए व्यूपोर्ट में सबसे ऊपर कॉन्टेंट को रेंडर करने के तरीके में बड़ा बदलाव कर रहे हैं.
• Core Web Vitals के थ्रेशोल्ड को पूरा करने वाले कारोबारियों या कंपनियों की संख्या 48% से बढ़कर 72%हो गई है. इसका मतलब है कि अब चार में से तीन स्टोर, Google के परफ़ॉर्मेंस थ्रेशोल्ड को पूरा करते हैं.
• शॉपिंग में लोगों की दिलचस्पी में काफ़ी बढ़ोतरी हुई: जनवरी 2025 और जनवरी 2026 में सक्रिय ब्राज़ीलियन स्टोर के एक ही ग्रुप का विश्लेषण करने पर, Google के ऑर्गैनिक सर्च नतीजों से मिले मोबाइल विज़िटर ने दिखाया:
  • कन्वर्ज़न रेट (सेशन से लेकर पैसे चुकाकर ऑर्डर करने तक) में 8.9% की बढ़ोतरी हुई
  • कार्ट में प्रॉडक्ट जोड़ने की दर (सेशन-टू-कार्ट) में 8.4% की बढ़ोतरी हुई
• मोबाइल पर सबसे ज़्यादा फ़ायदा हुआ. यह एलसीपी में हुए सबसे बड़े सुधारों के हिसाब से है.

ये नतीजे, Google की ओर से कमीशन की गई Deloitte की रिसर्च (37 ब्रैंड के 3 करोड़ से ज़्यादा सेशन) के मुताबिक हैं. इस रिसर्च में पाया गया कि लोड होने की स्पीड में 0.1 सेकंड की बढ़ोतरी से, खुदरा कन्वर्ज़न रेट में 8.4% की बढ़ोतरी हो सकती है. इससे, हमारे निवेश की दिशा की पुष्टि होती है.

चुनौती: डाइनैमिक ई-कॉमर्स लेआउट में एलसीपी का पता लगाना

साल 2025 की शुरुआत में, हमारे सिर्फ़ 48% स्टोर ने Core Web Vitals के थ्रेशोल्ड पूरे किए थे. साथ ही, 57% स्टोर के एलसीपी स्कोर अच्छे थे. हमारा शुरुआती अनुमान था कि इमेज का साइज़ या सर्वर की लेटेन्सी इसकी वजह हो सकती है. हमसे गलती हुई.

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

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

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

डाइनैमिक लेआउट से, एलसीपी एलिमेंट के चुनाव पर क्या असर पड़ता है

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

हमें तीन मुख्य वजहें मिली हैं:

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

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

लागू करना: बड़े पैमाने पर तीन मुख्य वजहों को ठीक करना

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

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

• व्यू पोर्ट के सबसे ऊपर मौजूद इमेज से लेज़ी लोडिंग की सुविधा हटा दी गई है. पहले सेक्शन में मौजूद इमेज के लिए, हम loading="lazy" को कुछ शर्तों के साथ हटा देते हैं, ताकि संसाधन लोड होने में होने वाली देरी को कम किया जा सके. हमने इस सुविधा को सिर्फ़ पहले सेक्शन में मौजूद पहली इमेज के लिए उपलब्ध कराया है:

  <!-- Before -->
  <img src="slide-1.webp" loading="lazy" alt="Featured product">
  <!-- After -->
  <img src="slide-1.webp" alt="Featured product">
  

• प्राथमिकता वाले सिग्नल जोड़े गए. fetchpriority="high" जोड़ने से, हम ब्राउज़र के प्रीलोड स्कैनर को बताते हैं कि एलसीपी इमेज सबसे ज़रूरी संसाधन है. इससे लेआउट और रेंडरिंग पूरी होने से पहले, इमेज को खोजा और डाउनलोड किया जा सकता है. हमने पुष्टि करने का लॉजिक जोड़ा है, ताकि यह पक्का किया जा सके कि प्राथमिकता वाले सिग्नल सिर्फ़ तब लागू हों, जब एलिमेंट ऐसी जगह पर हो जहां वह एलसीपी कैंडिडेट हो सकता है: बहुत ज़्यादा इमेज में fetchpriority="high" जोड़ने से कोई फ़ायदा नहीं होगा, क्योंकि अगर सभी इमेज को ज़्यादा प्राथमिकता दी जाती है, तो किसी को भी प्राथमिकता नहीं दी जाएगी.

  <!-- Before -->
  <img src="slide-1.webp" alt="Featured product">
  <!-- After -->
  <img src="slide-1.webp" fetchpriority="high" alt="Featured product">
  

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

असर और नतीजे: एलसीपी में 57% से 96% तक का सुधार हुआ

इन सुधारों की वजह से, Nuvemshop और Tiendanube को ब्राज़ील, अर्जेंटीना, और मेक्सिको में परफ़ॉर्मेंस के हिसाब से #1 ई-कॉमर्स प्लैटफ़ॉर्म के तौर पर रैंक किया गया.

अहम जानकारी और पोस्ट-मॉर्टम रिफ़्लेक्शन

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

समस्या की मुख्य वजहों का पता चलने के बाद, इसे ठीक करना आसान हो गया: पहली पोज़िशन वाले सेक्शन से ट्रांज़िशन हटाएं, व्यूपोर्ट में सबसे ऊपर मौजूद इमेज से लेज़ी लोडिंग हटाएं, और प्राथमिकता वाले सिग्नल जोड़ें. हमने इसे सभी मुख्य थीम, पेज टाइप, और हमारे प्लैटफ़ॉर्म पर मौजूद 1,80,000 से ज़्यादा स्टोर पर लगातार लागू किया.

नतीजे खुद ही सब कुछ बताते हैं: एलसीपी पास रेट 57% से बढ़कर 96% हो गया. साथ ही, Core Web Vitals पास रेट 48% से बढ़कर 72% हो गया. इसके अलावा, कारोबारियों या कंपनियों को भी फ़ायदे मिले: कन्वर्ज़न रेट में 8.9% की बढ़ोतरी हुई और मोबाइल पर कार्ट में जोड़े गए प्रॉडक्ट में 8.4% की बढ़ोतरी हुई. तेज़ी से लोड होने वाले स्टोरफ़्रंट सिर्फ़ एक तकनीकी उपलब्धि नहीं हैं, बल्कि ये कारोबारी या कंपनी की सफलता में सीधे तौर पर मदद करते हैं.