कॉन्टेंट पर आधारित वेब ऐप्लिकेशन के लिए ऑप्टिमाइज़ेशन को होस्ट करना

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

स्टैटिक ऐसेट होस्ट करना

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

स्टैटिक फ़ाइलों के टाइप
इमेज फ़ोटो, आइकॉन, इलस्ट्रेशन, ग्राफ़िक, और लोगो जैसी इमेज स्टैटिक फ़ाइलें होती हैं. उदाहरण के कुछ फ़ॉर्मैट में JPEG, PNG, WebP, GIF या SVG शामिल हैं.
स्टाइलशीट स्टाइलशीट (सीएसएस), यूज़र इंटरफ़ेस के लेआउट, फ़ॉन्ट, कलर, और विज़ुअल आसपेक्ट को कंट्रोल करती हैं. आम तौर पर, ये स्टैटिक होते हैं और ब्राउज़र में एचटीएमएल कॉन्टेंट पर लागू होते हैं.
ऑडियो और वीडियो ऑडियो और वीडियो फ़ाइलें स्टैटिक ऐसेट होती हैं. इन्हें आपके ऐप्लिकेशन में एम्बेड किया जा सकता है या मीडिया प्लेयर की मदद से दिखाया जा सकता है.
JavaScript स्टैटिक JavaScript (JS) फ़ाइलों में क्लाइंट-साइड कोड शामिल होता है, जो ऐप्लिकेशन के साथ इंटरैक्ट करता है. इन स्क्रिप्ट को उपयोगकर्ता के ब्राउज़र में इस्तेमाल किया जाता है और फ़ॉर्म की पुष्टि करने और डाइनैमिक कॉन्टेंट लोडिंग को हैंडल किया जाता है. तीसरे पक्ष की JavaScript लाइब्रेरी, जैसे कि jQuery और प्लगिन, जब आपके वेब ऐप्लिकेशन की सुविधाओं को बेहतर बनाते हैं, तो उन्हें स्टैटिक फ़ाइलों के तौर पर शामिल किया जाता है.
डब्ल्यूएएसएम WebAssembly (WASM) ऐसी फ़ाइलें हैं जो ब्राउज़र में स्टैक पर आधारित वीएम (वर्चुअल मशीन) चलाती हैं. ये वीएम काफ़ी करीब होती हैं. साथ ही, इन्हें अलग-अलग भाषाओं में इकट्ठा किया जा सकता है.

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

web.dev पर सीएसएस और एचटीएमएल के बारे में ज़्यादा जानें.

कैश मेमोरी में सेव किया गया डेटा और एसेट

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

इस टेबल में, कैश मेमोरी के अलग-अलग तरीकों के बारे में जानकारी दी गई है.

टाइप
ब्राउज़र कैशिंग उपयोगकर्ता का ब्राउज़र, इमेज, स्टाइलशीट, और JavaScript फ़ाइलों जैसी स्टैटिक एसेट को कैश मेमोरी में सेव कर सकता है. जब उपयोगकर्ता उसी वेबसाइट पर वापस आता है, तो इन एसेट को लोकल कैश मेमोरी से लोड किया जा सकता है.
सर्वर-साइड कैश मेमोरी आम तौर पर, कॉन्टेंट पर चलने वाले ऐप्लिकेशन, स्टैटिक कॉन्टेंट, डेटाबेस क्वेरी के नतीजे या पूरे वेबपेज को स्टोर करने के लिए, सर्वर साइड कैश मेमोरी में सेव करने के तरीके इस्तेमाल करते हैं. सर्वर साइड से कैश मेमोरी में सेव करने के सामान्य तरीकों में रिवर्स प्रॉक्सी (Ngnx, वार्निश), इन-मेमोरी कैश (Redis, Memcached), और डेटाबेस क्वेरी के नतीजों को कैश मेमोरी में सेव करना शामिल है.
सीडीएन कैश मेमोरी में सेव करना सीडीएन, उपयोगकर्ताओं के नज़दीक के किनारे वाले सर्वर पर स्टैटिक ऐसेट को कैश मेमोरी में सेव कर सकते हैं और उन्हें डिस्ट्रिब्यूट कर सकते हैं. इससे डिलीवरी की रफ़्तार बढ़ जाती है.
डेटाबेस क्वेरी कैशिंग डेटाबेस क्वेरी कैश मेमोरी में, बार-बार की जाने वाली डेटाबेस क्वेरी के नतीजों को मेमोरी या कैश स्टोर में सेव किया जाता है. इस तरह का डेटा इकट्ठा करने से डेटाबेस की परफ़ॉर्मेंस बेहतर होती है. ऐसा इसलिए, क्योंकि एक जैसे अनुरोधों के लिए, एक जैसी क्वेरी को फिर से चलाने की ज़रूरत कम होती है.
सर्विस वर्कर कैश मेमोरी में सेव करना सर्विस वर्कर को कैश मेमोरी में सेव करने की सुविधा से, वेब ऐप्लिकेशन को एचटीएमएल, सीएसएस या JavaScript फ़ाइलों जैसे रिसॉर्स को कैश और मैनेज करने में मदद मिलती है. इन संसाधनों को वेब पेज के मुख्य एक्ज़ीक्यूशन थ्रेड से अलग भी किया जा सकता है. ये ऐप्लिकेशन बैकग्राउंड में चलते हैं और ऐप्लिकेशन और नेटवर्क के बीच मध्यस्थ के तौर पर काम करते हैं. फ़ायदों में, ऑफ़लाइन काम करने की क्षमता और बैंडविथ का कम इस्तेमाल शामिल है.

एसेट को कैश मेमोरी में सेव करने का तरीका

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

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

स्केलिंग:

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

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

इंतज़ार का समय

किसी उपयोगकर्ता को आपके वेब ऐप्लिकेशन से इंटरैक्ट करने पर, इंतज़ार का समय कहते हैं. वेब अनुरोध को उपयोगकर्ता के ब्राउज़र या डिवाइस से वेब सर्वर पर जाने में और उपयोगकर्ता के डिवाइस पर वापस जाने में लगने वाले समय को आम तौर पर मिलीसेकंड (मि॰से॰) में मापा जाता है. इंतज़ार का समय उपयोगकर्ता अनुभव पर बहुत ज़्यादा असर डालता है, क्योंकि इससे उपयोगकर्ता परेशान हो सकता है और निराश हो सकता है.

इंतज़ार के समय पर असर डालने वाली वजहों में ये शामिल हैं:

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

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