अपनी वेबसाइट का लोडिंग टाइम कैसे घटाएं

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

वेबसाइट की स्पीड किसी एक सुधार से नहीं बढ़ती। यह कई स्वतंत्र कारकों के साथ मिलकर काम करने का नतीजा है: पेज कितना भारी है, सर्वर कितनी जल्दी जवाब देता है, एसेट कितनी कुशलता से पहुंचती हैं, और विज़िटर जो देखता है उसे रेंडर करने के लिए ब्राउज़र को कितना काम करना पड़ता है। सबसे बड़े योगदानकर्ताओं पर पहले काम करने से सबसे तेज़ फ़ायदे मिलते हैं। कौन से लोडिंग मेट्रिक्स मायने रखते हैं और क्यों, इसकी पृष्ठभूमि के लिए पेज लोड टाइम क्या है और इसे कैसे मापा जाता है वाला लेख देखें।

वेबसाइट की धीमी लोडिंग की सबसे आम वजहें क्या हैं?

बदलाव करने से पहले यह समझना काम आता है कि समय असल में कहां खो रहा है। धीमी वेबसाइटों में लगभग हमेशा इनमें से एक या ज़्यादा बातें एक जैसी होती हैं।

बिना ऑप्टिमाइज़ की इमेज

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

कैशिंग नहीं है

• कैशिंग के बिना हर विज़िट में सर्वर को पेज दोबारा बनाना पड़ता है और ब्राउज़र को हर फ़ाइल शुरू से डाउनलोड करनी पड़ती है
• कैशिंग लौटने वाले विज़िटर को सब कुछ दोबारा डाउनलोड करने की जगह सहेजी हुई कॉपियों से पेज लोड करने देती है

बिना मिनिफ़ाई की कोड फ़ाइलें

• CSS और JavaScript फ़ाइलों में अक्सर स्पेस, कमेंट और फ़ॉर्मेटिंग होती है जो उन्हें डेवलपर के लिए पढ़ने लायक बनाती है पर ब्राउज़र के लिए बेवजह वज़न जोड़ती है
• मिनिफ़िकेशन यह फ़ालतू सामग्री हटाता है और फ़ाइल साइज़ घटाता है, कभी-कभी 30 से 50 प्रतिशत तक

धीमा सर्वर रिस्पॉन्स

• सब कुछ सर्वर का इंतज़ार करता है। अगर सर्वर को जवाब देने में 800 मिलीसेकंड से ज़्यादा लगते हैं, तो हर दूसरा मेट्रिक शुरू से ही देर से चलता है
• शेयर्ड होस्टिंग माहौल और बिना ऑप्टिमाइज़ किए डेटाबेस ऊंचे Time to First Byte की सबसे आम वजहें हैं

रेंडर-ब्लॉकिंग रिसोर्स

• डॉक्यूमेंट हेड में लोड होने वाली स्क्रिप्ट और स्टाइलशीट ब्राउज़र को कुछ भी रेंडर करने से पहले रोक देती हैं
• गैर-ज़रूरी स्क्रिप्ट को मुख्य कंटेंट के बाद लोड होने के लिए ले जाने से यह रुकावट हट जाती है

पेज का वज़न घटाने के लिए इमेज कैसे ऑप्टिमाइज़ करें?

ज़्यादातर वेबसाइटों के लिए इमेज ऑप्टिमाइज़ेशन सबसे ज़्यादा असर वाला सुधार है, क्योंकि यह सीधे पेज की सबसे बड़ी फ़ाइलें घटाता है। तीन बदलाव मिलकर इमेज फ़ाइल साइज़ में सबसे बड़ी कमी लाते हैं।

सही फ़ॉर्मेट चुनें

• WebP उसी विज़ुअल क्वालिटी पर JPEG से छोटी फ़ाइलें बनाता है और PNG की तरह ट्रांसपेरेंसी भी सपोर्ट करता है
• सभी फ़ोटो और आम ग्राफ़िक्स के लिए WebP पर जाएं। PNG तभी इस्तेमाल करें जब ट्रांसपेरेंसी चाहिए हो

अपलोड से पहले साइज़ बदलें

• 800 पिक्सेल चौड़ाई पर दिखाने के लिए 4,000 पिक्सेल चौड़ी इमेज अपलोड करने से हर विज़िटर को ज़रूरत से चार गुना ज़्यादा डेटा डाउनलोड करना पड़ता है
• अपलोड से पहले इमेज को उनकी अधिकतम डिस्प्ले चौड़ाई पर रीसाइज़ करें

सही क्वालिटी स्तर तक कंप्रेस करें

• लॉसी फ़ॉर्मेट पर 75 से 85 की क्वालिटी सेटिंग मूल फ़ाइल से 60 से 80 प्रतिशत छोटी फ़ाइलें बनाती है, और ज़्यादातर फ़ोटो में क्वालिटी का कोई दिखने वाला फ़र्क नहीं होता
• सही फ़ॉर्मेट, सही साइज़ और सही कंप्रेशन का मेल पेज का इमेज वज़न 80 से 90 प्रतिशत घटा सकता है

फ़ाइल फ़ॉर्मेट, कंप्रेशन के प्रकार, लेज़ी लोडिंग और रिस्पॉन्सिव इमेज को कवर करने वाली पूरी गाइड के लिए तेज़ लोडिंग के लिए इमेज कैसे ऑप्टिमाइज़ करें वाला लेख देखें।

कैशिंग लोडिंग टाइम कैसे घटाती है?

कैशिंग पेज के रिसोर्स की कॉपियां सहेजती है ताकि उन्हें हर रिक्वेस्ट पर डाउनलोड या दोबारा न बनाना पड़े। दो प्रकार हैं जो डिलीवरी की कड़ी के अलग-अलग बिंदुओं पर काम करते हैं।

ब्राउज़र कैशिंग

• विज़िटर का ब्राउज़र पहले विज़िट के बाद CSS, JavaScript, इमेज और फ़ॉन्ट सहेज लेता है
• दोबारा के विज़िट उन फ़ाइलों को दोबारा डाउनलोड करने की जगह लोकल डिवाइस से लोड करते हैं, जिससे दोबारा आने वाले विज़िटर के लिए पेज लोड टाइम बहुत घट जाता है
• ब्राउज़र कैशिंग सर्वर पर सेट किए गए कैश हेडर से नियंत्रित होती है। ज़्यादातर आधुनिक होस्टिंग प्लेटफ़ॉर्म इन्हें अपने आप सेट करते हैं

सर्वर कैशिंग

• सर्वर पेजों के पहले से बने वर्शन सहेजता है ताकि उन्हें हर रिक्वेस्ट पर शुरू से दोबारा न बनाना पड़े
• इससे सभी विज़िटर के लिए Time to First Byte तेज़ होता है, पहली बार आने वालों के लिए भी
• सर्वर कैशिंग डायनामिक वेबसाइटों पर सबसे ज़्यादा असर करती है जहां पेज डेटाबेस क्वेरी से बनते हैं

ब्राउज़र कैशिंग कैसे काम करती है और उसे कैसे कॉन्फ़िगर करें, इसकी विस्तृत जानकारी के लिए ब्राउज़र कैशिंग क्या है और यह कैसे काम करती है वाला लेख देखें।

मिनिफ़िकेशन लोडिंग स्पीड के लिए क्या करता है?

डेवलपर के लिखे CSS और JavaScript फ़ाइलों में स्पेसिंग, लाइन ब्रेक और कमेंट होते हैं जो कोड को पढ़ना और संभालना आसान बनाते हैं। ब्राउज़र को इनमें से किसी की ज़रूरत नहीं होती। मिनिफ़िकेशन इन्हें हटा देता है, जिससे छोटी फ़ाइलें बनती हैं जो उनके काम करने का तरीका बदले बिना तेज़ डाउनलोड होती हैं।

• CSS मिनिफ़िकेशन आमतौर पर फ़ाइल साइज़ 20 से 30 प्रतिशत घटाता है
• JavaScript मिनिफ़िकेशन फ़ाइल साइज़ 30 से 50 प्रतिशत घटा सकता है, बड़ी फ़ाइलों में और ज़्यादा जिनमें कमेंट और व्हाइटस्पेस काफ़ी हों
• मिनिफ़िकेशन आसान जीतों में से एक है क्योंकि इसमें साइट के दिखने या काम करने के तरीके में कोई बदलाव नहीं करना पड़ता और अक्सर इसे प्लगइन या प्लेटफ़ॉर्म की सेटिंग से चालू किया जा सकता है

CSS, JavaScript और HTML में मिनिफ़िकेशन कैसे काम करता है, इसके पूरे ब्रेकडाउन के लिए मिनिफ़िकेशन क्या है और यह आपकी वेबसाइट की कैसे मदद करता है वाला लेख देखें।

CDN विज़िटर के लिए लोडिंग टाइम कैसे घटाता है?

कंटेंट डिलीवरी नेटवर्क विज़िटर और आपकी फ़ाइलें परोसने वाले सर्वर के बीच की भौतिक दूरी घटाता है। CDN के बिना सभी विज़िटर एक जगह के एक सर्वर से जुड़ते हैं। CDN के साथ हर विज़िटर को उसके सबसे नज़दीकी सर्वर से परोसा जाता है।

• मूल सर्वर के पास के विज़िटर के लिए CDN से स्पीड सुधार मामूली होता है
• दूसरे देशों या क्षेत्रों के विज़िटर के लिए CDN Time to First Byte सैकड़ों मिलीसेकंड घटा सकता है
• CDN उन वेबसाइटों पर सबसे ज़्यादा असर करते हैं जिनका ऑडियंस अंतरराष्ट्रीय है या जिनमें मीडिया कंटेंट काफ़ी है
• कुछ होस्टिंग प्लेटफ़ॉर्म CDN डिलीवरी अपने आप शामिल करते हैं। जहां यह शामिल है, वहां किसी अतिरिक्त कॉन्फ़िगरेशन की ज़रूरत नहीं

CDN कैसे काम करते हैं और किसे इसकी ज़रूरत है, इसकी पूरी व्याख्या के लिए CDN क्या है और यह आपकी वेबसाइट की कैसे मदद करता है वाला लेख देखें।

लेज़ी लोडिंग क्या है और यह शुरुआती लोड टाइम कैसे घटाती है?

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

• बीस इमेज वाले पेज पर लेज़ी लोडिंग का मतलब है कि पेज पहली बार खुलने पर ब्राउज़र सिर्फ़ स्क्रीन पर दिखने वाली तीन-चार इमेज डाउनलोड करता है
• बाकी इमेज विज़िटर के स्क्रॉल करने पर लोड होती हैं, जिससे डाउनलोड शुरुआत में एक साथ होने की जगह समय में फैल जाता है
• लेज़ी लोडिंग सीधे Time to Interactive सुधारती है और जब फ़ोल्ड के ऊपर का कंटेंट इमेज-भारी न हो तब Largest Contentful Paint पर भी नापा जा सकने वाला असर डाल सकती है
• फ़ोल्ड के ऊपर की इमेज पर लेज़ी लोडिंग न लगाएं। उन्हें तुरंत लोड होना चाहिए

लेज़ी लोडिंग कैसे काम करती है और इसे कैसे लागू करें, इसकी पूरी गाइड के लिए लेज़ी लोडिंग क्या है और यह कैसे काम करती है वाला लेख देखें।

रेंडर-ब्लॉकिंग रिसोर्स पेज को कैसे धीमा करते हैं?

जब ब्राउज़र को डॉक्यूमेंट हेड में कोई स्क्रिप्ट या स्टाइलशीट मिलती है, तो वह उस फ़ाइल के लोड होने तक रेंडरिंग रोक देता है। इस दौरान विज़िटर को कुछ नहीं दिखता। इसे रेंडर-ब्लॉकिंग रिसोर्स कहते हैं।

रेंडर ब्लॉकिंग कैसे घटाएं

• गैर-ज़रूरी JavaScript को डॉक्यूमेंट के अंत में लोड होने के लिए ले जाएं या defer या async एट्रिब्यूट इस्तेमाल करें ताकि स्क्रिप्ट रेंडरिंग न रोकें
• पहचानें कि कौन सी CSS तुरंत चाहिए (फ़ोल्ड के ऊपर की स्टाइल) और कौन सी बाद में लोड हो सकती है
• जो थर्ड-पार्टी स्क्रिप्ट ज़रूरी नहीं हैं, उन्हें हटाएं या बदलें। चैट विजेट, सोशल मीडिया एम्बेड और ट्रैकिंग स्क्रिप्ट सब ब्लॉकिंग टाइम जोड़ते हैं

सर्वर रिस्पॉन्स टाइम का क्या?

बाकी हर सुधार इससे सीमित है कि सर्वर पहली जगह कितनी जल्दी जवाब देता है। धीमा सर्वर ब्राउज़र के कोई भी रिसोर्स लोड करना शुरू करने से पहले देरी जोड़ता है।

सर्वर रिस्पॉन्स टाइम को क्या प्रभावित करता है

• होस्टिंग क्वालिटी: शेयर्ड होस्टिंग माहौल CPU और मेमोरी कई साइटों में बांटते हैं, जिससे रिस्पॉन्स टाइम अनिश्चित रहता है
• डेटाबेस परफ़ॉर्मेंस: धीमी या बिना ऑप्टिमाइज़ की डेटाबेस क्वेरी सर्वर की जवाब बनाने की क्षमता में देरी करती हैं
• सर्वर-साइड कैशिंग: कैशिंग के बिना हर रिक्वेस्ट डेटाबेस से पेज को पूरा दोबारा बनवाती है
• सर्वर तक भौगोलिक दूरी: CDN के आने से पहले भी, विज़िटर से दूर बना सर्वर लेटेंसी जोड़ता है

अच्छा Time to First Byte 800 मिलीसेकंड से कम है। अगर आपका TTFB लगातार इससे ऊपर रहता है, तो होस्टिंग सुधारने या सर्वर-साइड कैशिंग लागू करने से ऐसे फ़ायदे मिलेंगे जिनकी बराबरी कोई फ़्रंट-एंड ऑप्टिमाइज़ेशन नहीं कर सकता।

वेबसाइट को तेज़ करने की शुरुआत कहां से करें?

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

ज़्यादातर वेबसाइटों के लिए प्राथमिकता क्रम

• पहला: इमेज ऑप्टिमाइज़ करें। यह पेज के वज़न के सबसे बड़े स्रोत को संभालता है और अक्सर टाले जा सकने वाले लोड टाइम के 60 से 80 प्रतिशत के लिए ज़िम्मेदार होता है
• दूसरा: कैशिंग चालू करें। ब्राउज़र और सर्वर कैशिंग हर विज़िट पर होने वाला काम घटाती हैं, खासकर लौटने वाले विज़िटर के लिए
• तीसरा: CSS और JavaScript मिनिफ़ाई करें। कम मेहनत, फ़ाइल ट्रांसफ़र टाइम में भरोसेमंद सुधार
• चौथा: अगर आपका ऑडियंस भौगोलिक रूप से फैला है या मीडिया डिलीवरी आपकी साइट का अहम हिस्सा है, तो CDN जोड़ें
• पांचवां: अगर ऊपर के कदम लागू हो चुके हैं और स्कोर अब भी खराब हैं, तो रेंडर-ब्लॉकिंग रिसोर्स और सर्वर रिस्पॉन्स टाइम पर काम करें

बदलावों का कोई भी सेट करने के बाद, अगले क्षेत्र पर जाने से पहले सुधार को मापने के लिए स्पीड टेस्ट चलाएं। स्पीड टेस्ट के नतीजे सही तरह से कैसे पढ़ें, इसकी गाइड के लिए अपनी वेबसाइट की स्पीड कैसे टेस्ट करें वाला लेख देखें। इन सुधारों से प्रभावित होने वाले खास मेट्रिक्स के ब्रेकडाउन के लिए Core Web Vitals क्या हैं वाला लेख देखें।

WEMASY वेबसाइट का लोडिंग टाइम कैसे घटाता है

WEMASY का वेबसाइट बिल्डर सबसे आम स्पीड सुधारों में से कई अपने आप संभालता है। इमेज अपलोड पर कंप्रेस होकर WebP में बदल जाती हैं। ब्राउज़र कैशिंग हेडर डिफ़ॉल्ट रूप से कॉन्फ़िगर होते हैं। प्लेटफ़ॉर्म से परोसी जाने वाली CSS और JavaScript फ़ाइलें मिनिफ़ाई होती हैं। CDN डिलीवरी सभी प्लान में शामिल है, जो स्टैटिक एसेट को हर विज़िटर के सबसे नज़दीकी स्थान से परोसती है।

पेज स्पीड स्कोर और Core Web Vitals डेटा WEMASY एनालिटिक्स डैशबोर्ड में दिखते हैं, साथ में पेज-वार सिफ़ारिशें जो बची हुई समस्याएं फ़्लैग करती हैं। इसका मतलब है कि आप किसी भी कंटेंट या डिज़ाइन बदलाव के बाद बाहरी टेस्ट हाथ से चलाए बिना सुधारों पर नज़र रख सकते हैं।

क्या-क्या शामिल है, यह WEMASY वेबसाइट बिल्डर पर देखें, या प्राइसिंग पेज पर प्लान के विकल्प देखें।

अक्सर पूछे जाने वाले सवाल