अपने ऑनलाइन स्टोर का परफ़ॉर्मेंस बेहतर बनाना

आपका ऑनलाइन स्टोर सुविधाओं के एक सेट से बना है, जैसे थीम कोड, ऐप, इमेज, वीडियो, कैरोसेल, सोशल मीडिया फ़ीड और आंकड़े। ये सुविधाएं, विज़िटर के अनुभव को बेहतर बना सकती हैं और आपकी साइट की क्षमताओं को बढ़ा सकती हैं।

हालांकि, आप अपने ऑनलाइन स्टोर में जो भी सुविधा जोड़ते हैं, वह आपके स्टोर के परफ़ॉर्मेंस पर असर डाल सकती है। कुछ सुविधाएं आपकी साइट को धीमा कर सकती हैं या ऐसे अनपेक्षित व्यवहार पैदा कर सकती हैं, जो यूज़र के अनुभव पर असर डाल सकते हैं।

वेब परफ़ॉर्मेंस, यूज़र के अनुभव को ऑप्टिमाइज़ करने पर फ़ोकस करता है। वर्तमान में, वेब परफ़ॉर्मेंस तीन प्रमुख क्षेत्रों पर फ़ोकस करता है जो कोर वेब वाइटल्स में भी दिखाई देते हैं:

• लोडिंग स्पीड, जिसे लार्जेस्ट कंटेंटफ़ुल पेंट (LCP) से मापा जाता है
• लेआउट की स्थिरता, जिसे क्यूमुलेटिव लेआउट शिफ़्ट (CLS) से मापा जाता है
• यूज़र इंटरैक्शन पर प्रतिक्रिया, जिसे इंटरेक्शन टू नेक्स्ट पेंट (INP) से मापा जाता है

वेब परफ़ॉर्मेंस को ऑप्टिमाइज़ करने का मतलब है कि आपके ग्राहकों के आपकी साइट पर बने रहने और कन्वर्ट होने की ज़्यादा संभावना है।

आपके ऑनलाइन स्टोर के लिए ऑप्टिमाइज़ेशन

आपके ऑनलाइन स्टोर में वेब ऑप्टिमाइज़ेशन पहले से ही मौजूद है। वेब ऑप्टिमाइज़ेशन किसी भी नई सुविधा में भी पहले से मौजूद होता है। इन सुविधाओं का लाभ उठाने के लिए आपको कुछ भी खास करने की ज़रूरत नहीं है:

• आपका ऑनलाइन स्टोर तेज़, ग्लोबल सर्वर पर होस्ट किया गया है और यह आपके स्टोर के बैंडविड्थ को सीमित नहीं करता है। आप Shopify स्टेटस पर अपने Shopify स्टोर का स्टेटस देख सकते हैं।
• आपके ऑनलाइन स्टोर में Cloudflare द्वारा संचालित एक कंटेंट डिलीवरी नेटवर्क (CDN) है जो यह सुनिश्चित करता है कि आपका ऑनलाइन स्टोर दुनिया भर में तेज़ी से लोड हो। आप Cloudflare स्टेटस पेज पर CDN का स्टेटस देख सकते हैं।
• लोड होने में लगने वाले समय को तेज़ रखने के लिए, इमेज CDN का उपयोग करके इमेज को ऑटोमैटिक रूप से ऑप्टिमाइज़ किया जाता है। आपकी थीम कोड के साथ मिलकर, इमेज CDN सबसे अच्छा इमेज फ़ॉर्मैट दे सकता है जिसे फ़ाइल का साइज़ छोटा रखने के लिए रीसाइज़ और कंप्रेस भी किया जाता है।

वेब परफ़ॉर्मेंस पर असर डालने वाले कारक

Shopify स्टोर के लिए, वेब परफ़ॉर्मेंस पर असर डालने वाले सबसे बड़े कारक ये हैं:

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

इसका मतलब है कि आपको अपना वेब परफ़ॉर्मेंस बेहतर बनाने के लिए इन चीज़ों पर फ़ोकस करना चाहिए:

• Horizon फ़ैमिली की सभी थीम और Shopify की ऑनलाइन स्टोर 2.0 थीम का इस्तेमाल करें, जो अप-टू-डेट और ऑप्टिमाइज़ की गई हैं, मुफ़्त हैं और वेब परफ़ॉर्मेंस के लिए ऑप्टिमाइज़ की गई हैं। इसके अलावा, कई अन्य थर्ड-पार्टी थीम भी वेब परफ़ॉर्मेंस के लिए ऑप्टिमाइज़ की गई हैं। आप सबसे नए थीम परफ़ॉर्मेंस डेटा की समीक्षा कर सकते हैं।
• अगर आपकी थीम, पेज ट्रांज़िशन या दूसरे एनिमेशन ऑफ़र करती है, तो उन्हें एक्टिवेट करने से पहले और बाद में अपने वेब परफ़ॉर्मेंस की तुलना करें। एनिमेशन, पेजों को धीमा कर सकते हैं।
• अपनी थीम में पेज टेम्पलेट में बहुत ज़्यादा सेक्शन जोड़ने से बचें। पेजों पर ज़्यादा संख्या में सेक्शन होने से वेब परफ़ॉर्मेंस कम हो सकता है।
• अगर आपके पास ऐसे कलेक्शन हैं जिनमें बड़ी संख्या में प्रोडक्ट हैं, तो एक बार में लोड होने वाले प्रोडक्ट की संख्या को सीमित करने के लिए पृष्ठ विभाजन को एक्टिवेट करने पर विचार करें।
• अपने इंस्टॉल किए गए ऐप और थर्ड-पार्टी कोड का मूल्यांकन करें, ताकि यह पक्का किया जा सके कि उनसे मिलने वाला फ़ायदा, परफ़ॉर्मेंस में होने वाले संभावित नुकसान से ज़्यादा है।
• किसी भी बिना इस्तेमाल किए गए या कम महत्व वाले टैग को हटाने के लिए अपने टैग मैनेजर का ऑडिट करें। टैग और टैग मैनेजर के लिए सबसे सही तरीकों के बारे में ज़्यादा जानें।

टेस्टिंग टूल

आप अपने ऑनलाइन स्टोर के परफ़ॉर्मेंस की जांच करने के लिए इन टूल का उपयोग कर सकते हैं:

• वेब परफ़ॉर्मेंस रिपोर्ट: Shopify की वेब परफ़ॉर्मेंस रिपोर्ट, कोर वेब वाइटल्स का उपयोग यह मापने के लिए करती है कि असली यूज़र आपके ऑनलाइन स्टोर का अनुभव कैसे करते हैं।
• PageSpeed Insights: आप अपने स्टोर के पेजों के लिए ज़्यादा विस्तृत मीट्रिक देखने के लिए, Google के PageSpeed Insights का उपयोग करके अपनी खुद की रिपोर्ट चला सकते हैं।

थर्ड-पार्टी परफ़ॉर्मेंस सुझावों को समझना

थर्ड-पार्टी परफ़ॉर्मेंस स्कैनिंग टूल आपके स्टोर की स्पीड को बेहतर बनाने के लिए बदलावों का सुझाव दे सकते हैं। हालांकि, इनमें से कई सुझाव Shopify द्वारा पहले से ही लागू किए गए हैं या Shopify स्टोर पर लागू नहीं होते हैं।

Shopify में पहले से शामिल ऑप्टिमाइज़ेशन

आपके Shopify स्टोर में ऑटोमैटिक रूप से ये परफ़ॉर्मेंस ऑप्टिमाइज़ेशन शामिल हैं:

कंटेंट डिलीवरी नेटवर्क (CDN): Shopify बिना किसी अतिरिक्त शुल्क के विश्व स्तरीय CDN मुहैया कराता है, जिससे दुनिया भर में तेज़ परफ़ॉर्मेंस सुनिश्चित होता है। सभी एसेट को HTTP/2 का उपयोग करके सर्व किया जाता है, जिससे पुराने प्रोटोकॉल की तुलना में ओवरहेड कम हो जाता है।

ब्राउज़र कैशिंग: Shopify कैश करने लायक रिसोर्स के लिए ब्राउज़र कैशिंग को एक साल पर सेट करता है, जो कि अधिकतम संभव अवधि है। इसका मतलब है कि आपके स्टोर पर दोबारा आने वाले विज़िटर को तेज़ लोडिंग समय का अनुभव होगा।

Gzip कंप्रेस करना: Shopify, बैंडविड्थ कम करने और लोड होने का समय बेहतर बनाने के लिए CSS, JavaScript, दस्तावेज़ों और पेजों पर Gzip कंप्रेस करने की सुविधा का इस्तेमाल करता है। कई फ़ाइलों को फिर से पाने के लिए कीप-अलाइव भी चालू किया गया है।

इमेज ऑप्टिमाइज़ेशन: Shopify, कंप्रेस करने और विज़ुअल अपील को संतुलित करते हुए, एडवांस्ड एल्गोरिदम का उपयोग करके JPG इमेज को ऑटोमैटिक रूप से कंप्रेस करता है। बेहतर कंप्रेस करने और तेज़ी से लोड होने के लिए इमेज को अक्सर WebP फ़ॉर्मैट में सर्व किया जाता है।

फ़ाइल मिनिफ़िकेशन: Shopify, आपके स्टोरफ़्रंट द्वारा अनुरोध किए जाने पर CSS और JavaScript फ़ाइलों को ऑटोमैटिक रूप से छोटा कर देता है, जिससे फ़ंक्शनैलिटी पर असर डाले बिना फ़ाइल का साइज़ कम हो जाता है।

जब थर्ड-पार्टी के सुझाव लागू नहीं होते हैं

थर्ड-पार्टी स्कैनिंग टूल ऐसे बदलावों का सुझाव दे सकते हैं जो Shopify स्टोर के लिए प्रासंगिक नहीं हैं:

• सर्वर-स्तर का कॉन्फ़िगरेशन: सर्वर सेटअप, HTTP हैडर या कैशिंग नीतियों के बारे में सुझाव Shopify के इंफ़्रास्ट्रक्चर द्वारा पहले से ही ऑप्टिमाइज़ किए गए हैं।
• CDN लागू करना: CDN जोड़ने के सुझाव अनावश्यक हैं क्योंकि Shopify में डिफ़ॉल्ट रूप से एक उच्च-परफ़ॉर्मेंस वाला CDN शामिल होता है।
• कंप्रेस करने की सेटिंग्स: कंप्रेस करने की सुविधा को चालू करने के बारे में सुझाव, Shopify के पूरे प्लेटफ़ॉर्म पर पहले से ही लागू किए गए हैं।

प्रासंगिक सुझावों पर कार्रवाई करना

उन सिफ़ारिशों पर ध्यान दें, जो आपके स्टोर की खास सामग्री और सुविधाओं से संबंधित हैं:

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

धीमे लोड होने वाले पेजों की समस्या हल करना

अगर आपका स्टोर धीरे लोड हो रहा है, तो समस्या की पहचान करने और उसे हल करने के लिए इन चरणों का पालन करें:

चरण 1: समस्या की पुष्टि करें

1. अलग-अलग डिवाइस और इंटरनेट कनेक्शन से अपने स्टोर की लोडिंग स्पीड खुद टेस्ट करें।
2. दूसरों से अपने स्टोर को टेस्ट करने के लिए कहें, ताकि यह पुष्टि हो सके कि यह आपके इंटरनेट कनेक्शन से जुड़ी कोई स्थानीय समस्या नहीं है।
3. खास परफ़ॉर्मेंस मीट्रिक पाने के लिए PageSpeed Insights जैसे टेस्टिंग टूल का उपयोग करें।

चरण 2: कारण की पहचान करें

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

बड़ी इमेज की समीक्षा करें: कई हाई-क्वालिटी इमेज वाले पेज धीरे-धीरे लोड हो सकते हैं। अपनी इमेज को ऑप्टिमाइज़ करें या दिखाई जाने वाली संख्या कम करें। सुझाए गए इमेज साइज़ के बारे में ज़्यादा जानें।

धीमी स्क्रिप्ट की पहचान करें: अगर आपकी साइट एक साथ लोड होने से पहले एक खाली पेज के रूप में हैंग हो जाती है, तो धीमी गति से लोड होने वाली स्क्रिप्ट की पहचान करने के लिए अपने ब्राउज़र के डेवलपर टूल का उपयोग करें। समाधान के लिए ऐप या थीम डेवलपर से संपर्क करें।

चरण 3: कार्रवाई करें

गैर-ज़रूरी ऐप हटाएं: किसी ऐप को अनइंस्टॉल करने से उसका कोड आपकी थीम से अपने आप नहीं हट जाता है। पूरी तरह से हटाने के निर्देशों के लिए आपको ऐप डेवलपर से संपर्क करना पड़ सकता है।

इमेज ऑप्टिमाइज़ करें: सही फ़ाइल फ़ॉर्मैट (फ़ोटो के लिए JPG, ट्रांसपेरेंसी वाले ग्राफ़िक के लिए PNG) का उपयोग करें और इमेज को उनके डिस्प्ले साइज़ से मैच करने के लिए रीसाइज़ करें।

थीम परफ़ॉर्मेंस का मूल्यांकन करें: अगर आपकी मौजूदा थीम की वजह से काफ़ी स्लोडाउन हो रहा है, तो परफ़ॉर्मेंस-ऑप्टिमाइज़्ड थीम पर स्विच करने पर विचार करें।

ऑनलाइन स्टोर परफ़ॉर्मेंस के लिए सहायता पाएं

अगर आप Shopify की ओर से मुफ़्त थीम का उपयोग करते हैं, तो Shopify समर्थन बुनियादी परफ़ॉर्मेंस सुधारों में आपकी सहायता कर सकता है।

अगर आप किसी थर्ड-पार्टी थीम का उपयोग करते हैं और आपको सहायता चाहिए, तो आपको अपने थीम डेवलपर से संपर्क करना होगा, Shopify वेब परफ़ॉर्मेंस विशेषज्ञ को हायर करना होगा या साइट परफ़ॉर्मेंस और स्पीड के लिए Shopify पार्टनर को हायर करना होगा। Shopify पार्टनर को हायर करने के बारे में ज़्यादा जानें।

अगर आपकी परफ़ॉर्मेंस की समस्या किसी ऐप से आ रही है, तो आप अपने ऐप डेवलपर से संपर्क कर सकते हैं।

अगर आपके पास कोई डेवलपमेंट टीम या एजेंसी पार्टनर है, तो आप आगे की सहायता के लिए उनसे भी संपर्क कर सकते हैं।

समस्या हल करने के लिए तकनीकी जानकारी और संसाधन

अगर आप एक डेवलपर हैं जो Shopify स्टोरफ़्रंट, थीम या ऐप के लिए परफ़ॉर्मेंस में सुधार करना चाहते हैं, तो आप हर Core Web Vital के लिए नीचे दिए गए संसाधनों की समीक्षा कर सकते हैं। Shopify थीम के लिए परफ़ॉर्मेंस की सर्वोत्तम कार्यप्रणालियों के बारे में ज़्यादा जानें।

लोडिंग स्पीड

Largest Contentful Paint (LCP) लोडिंग स्पीड को मापता है, इस आधार पर कि स्क्रीन पर सबसे बड़ा एलिमेंट कितनी तेज़ी से दिखाई देता है। Time to first byte (TTFB) और first contentful paint (FCP) सहायक मीट्रिक हैं, जो आपको यह बेहतर ढंग से समझने में मदद करते हैं कि समस्या का मूल कारण कहां से आ रहा है। आप Shopify Liquid स्टोरफ़्रंट में धीमी लोडिंग के सामान्य कारणों को डीबग करने के बारे में ज़्यादा जान सकते हैं।

विज़ुअल स्थिरता

Cumulative Layout Shift (CLS) विज़ुअल स्थिरता को मापता है, इस आधार पर कि लोडिंग के दौरान सामग्री अप्रत्याशित रूप से कितनी शिफ़्ट होती है। CLS को डीबग करने के बारे में गहराई से जानने के लिए, Shopify साइट पर Cumulative Layout Shift (CLS) को कैसे ऑप्टिमाइज़ करें पढ़ें।

इंटरैक्टिविटी

Interaction to Next Paint (INP) इंटरैक्टिविटी को मापता है, इस आधार पर कि पेज को ज़्यादातर यूज़र एक्शन के लिए उत्तरदायी होने में कितना समय लगता है। उदाहरण के लिए, किसी लिंक या बटन पर क्लिक करने जैसे यूज़र एक्शन।

अगर आप खराब INP से जूझ रहे हैं, तो बहुत संभावना है कि आपके स्टोर में थीम कोड, ऐप कोड या थर्ड पार्टी/टैग मैनेजर कोड से बहुत ज़्यादा JavaScript है। सबसे ज़्यादा समस्या पैदा करने वाले कोड को ठीक करने पर काम करें। पेज लोड के लिए सबसे खराब JavaScript ऑफ़ेंडर्स को खोजने के 3 तरीके के बारे में ज़्यादा जानें। अगर आपको अभी भी INP से जुड़ी समस्याएं आ रही हैं, तो web.dev पर मौजूद संसाधनों से ज़्यादा जानें।