JavaScript के साथ एचटीएमएल को रेंडर करना, सर्वर से भेजे जाने वाले एचटीएमएल को रेंडर करने से अलग है—और इससे परफ़ॉर्मेंस पर असर पड़ सकता है. इस गाइड के अंतर के बारे में जानें. साथ ही, यह भी जानें कि अपनी वेबसाइट की रेंडरिंग परफ़ॉर्मेंस को बनाए रखने के लिए क्या किया जा सकता है—खास तौर पर जहां इंटरैक्शन की बात हो.
एचटीएमएल को पार्स और रेंडर करना एक ऐसी प्रक्रिया है जो ब्राउज़र उन वेबसाइटों के लिए डिफ़ॉल्ट रूप से बहुत अच्छा काम करते हैं जो ब्राउज़र के बिल्ट-इन नेविगेशन लॉजिक का इस्तेमाल करती हैं. इस लॉजिक को कभी-कभी "ट्रेडिशनल पेज लोड" भी कहा जाता है या "हार्ड नेविगेशन" का इस्तेमाल करें. ऐसी वेबसाइटों को कभी-कभी मल्टी-पेज ऐप्लिकेशन (एमपीए) कहा जाता है.
हालांकि, डेवलपर अपने ऐप्लिकेशन की ज़रूरतों के हिसाब से ब्राउज़र डिफ़ॉल्ट में बदलाव कर सकते हैं. सिंगल पेज ऐप्लिकेशन (एसपीए) पैटर्न का इस्तेमाल करने वाली वेबसाइटों पर भी ऐसा ही होता है. यह पैटर्न, JavaScript की मदद से क्लाइंट पर डाइनैमिक तौर पर एचटीएमएल/DOM के बड़े हिस्से बनाता है. क्लाइंट-साइड रेंडरिंग इस डिज़ाइन पैटर्न का नाम है. अगर बहुत ज़्यादा काम करना पड़ता है, तो इसका असर आपकी वेबसाइट के इंटरैक्शन टू नेक्स्ट पेंट (आईएनपी) पर पड़ सकता है.
इस गाइड से आपको यह समझने में मदद मिलेगी कि सर्वर से ब्राउज़र को भेजे गए एचटीएमएल का इस्तेमाल कैसे किया जाता है और JavaScript की मदद से इसे क्लाइंट पर कैसे बनाया जाता है. साथ ही, इससे यह समझने में भी मदद मिलेगी कि कैसे इसकी वजह से अहम पलों में इंटरैक्शन में देरी ज़्यादा हो सकती है.
ब्राउज़र, सर्वर से मिले एचटीएमएल को कैसे रेंडर करता है
पारंपरिक पेज लोड में इस्तेमाल किए जाने वाले नेविगेशन पैटर्न में, हर नेविगेशन पर सर्वर से एचटीएमएल मिलता है. ब्राउज़र के पता बार में कोई यूआरएल डालने या MPA में मौजूद किसी लिंक पर क्लिक करने पर, इवेंट की यह सीरीज़ होती है:
- ब्राउज़र, दिए गए यूआरएल के लिए नेविगेशन का अनुरोध भेजता है.
- सर्वर जवाब में एचटीएमएल कोड का इस्तेमाल करता है.
इनमें से आखिरी कदम अहम है. यह सर्वर/ब्राउज़र एक्सचेंज में सबसे बुनियादी परफ़ॉर्मेंस ऑप्टिमाइज़ेशन में से एक है और इसे स्ट्रीमिंग के नाम से जाना जाता है. अगर सर्वर जल्द से जल्द एचटीएमएल को भेजना शुरू कर देता है और ब्राउज़र पूरा जवाब आने का इंतज़ार नहीं करता, तो एचटीएमएल के उपलब्ध होते ही ब्राउज़र उसे कई हिस्सों में प्रोसेस कर सकता है.
ब्राउज़र में होने वाली ज़्यादातर चीज़ों की तरह, एचटीएमएल को पार्स करने की प्रोसेस भी टास्क के बीच की जाती है. जब एचटीएमएल को सर्वर से ब्राउज़र पर स्ट्रीम किया जाता है, तो ब्राउज़र एक-एक करके एचटीएमएल को पार्स करने की प्रोसेस को ऑप्टिमाइज़ करता है. ऐसा इसलिए, क्योंकि स्ट्रीम के कुछ हिस्से छोटे-छोटे होते हैं. इस वजह से ब्राउज़र, डेटा के हर हिस्से को प्रोसेस करने के बाद, समय-समय पर मुख्य थ्रेड में शामिल होता है. इसमें लंबे टास्क नहीं होते. इसका मतलब है कि एचटीएमएल को पार्स करते समय अन्य काम हो सकते हैं. इनमें, उपयोगकर्ता को पेज दिखाने के लिए ज़रूरी इंक्रीमेंटल रेंडरिंग काम के साथ-साथ, पेज के स्टार्टअप के दौरान होने वाले उपयोगकर्ता इंटरैक्शन को प्रोसेस करना भी शामिल है. इस तरीके से पेज के लिए इंटरैक्शन टू नेक्स्ट पेंट (आईएनपी) स्कोर बेहतर होता है.
क्या सीख रहे हैं? सर्वर से एचटीएमएल स्ट्रीम करने पर, आपको एचटीएमएल की इंक्रीमेंटल पार्सिंग और रेंडरिंग मिलती है. साथ ही, आपको मुख्य थ्रेड में बिना किसी शुल्क के अपने-आप बनने की सुविधा मिलती है. क्लाइंट-साइड रेंडरिंग में आपको यह सुविधा नहीं मिलती.
ब्राउज़र, JavaScript से मिले एचटीएमएल को कैसे रेंडर करता है
किसी पेज पर नेविगेट करने के हर अनुरोध के लिए सर्वर को कुछ एचटीएमएल कोड उपलब्ध कराना पड़ता है. हालांकि, कुछ वेबसाइटें एसपीए पैटर्न का इस्तेमाल करती हैं. इस तरीके में अक्सर सर्वर से एचटीएमएल का एक कम से कम शुरुआती पेलोड दिया जाता है. हालांकि, इसके बाद क्लाइंट, पेज के मुख्य कॉन्टेंट एरिया को सर्वर से फ़ेच किए गए डेटा से इकट्ठा किए गए एचटीएमएल से पॉप्युलेट करता है. इसके बाद के नेविगेशन—कभी-कभी इसे "सॉफ़्ट नेविगेशन" भी कहा जाता है इस मामले में—इसे पूरी तरह से JavaScript मैनेज करता है, ताकि पेज को नए एचटीएमएल से भरा जा सके.
क्लाइंट-साइड रेंडरिंग कुछ ऐसे मामलों में गैर-एसपीए में भी हो सकती है जहां एचटीएमएल को JavaScript के ज़रिए डाइनैमिक तौर पर डीओएम में जोड़ा जाता है.
एचटीएमएल बनाने या JavaScript के ज़रिए DOM में जोड़ने के कुछ सामान्य तरीके यहां दिए गए हैं:
innerHTMLप्रॉपर्टी आपको किसी स्ट्रिंग के ज़रिए किसी मौजूदा एलिमेंट पर कॉन्टेंट सेट करने की अनुमति देती है, जिसे ब्राउज़र, DOM में पार्स करता है.document.createElementवाला तरीका, आपको ब्राउज़र की एचटीएमएल पार्स करने की सुविधा का इस्तेमाल किए बिना, डीओएम में जोड़ने के लिए नए एलिमेंट बनाने की सुविधा देता है.document.writeवाला तरीका आपको दस्तावेज़ में एचटीएमएल लिखने की सुविधा देता है (और ब्राउज़र इसे पार्स करता है, जैसा कि तरीका #1 में किया गया है). हालांकि, कई वजहों से,document.writeके इस्तेमाल की सलाह नहीं दी जाती है.
क्लाइंट-साइड JavaScript की मदद से एचटीएमएल/DOM बनाने के नतीजे काफ़ी अहम हो सकते हैं:
- नेविगेशन के अनुरोध के जवाब में सर्वर से चलाए जाने वाले एचटीएमएल के उलट, क्लाइंट के JavaScript टास्क अपने-आप अलग-अलग कैटगरी में नहीं बांटे जाते. इस वजह से, मुख्य थ्रेड को ब्लॉक करने वाले लंबे टास्क बन सकते हैं. इसका मतलब है कि अगर एक समय में क्लाइंट पर बहुत ज़्यादा एचटीएमएल/DOM बनाया जा रहा है, तो आपके पेज के INP पर बुरा असर पड़ सकता है.
- अगर स्टार्टअप के दौरान क्लाइंट पर एचटीएमएल बनाया जाता है, तो उसमें बताए गए रिसॉर्स, ब्राउज़र के प्रीलोड स्कैनर से नहीं खोजे जाएंगे. इससे पेज के सबसे बड़े कॉन्टेंटफ़ुल पेंट (एलसीपी) पर बुरा असर पड़ेगा. यह रनटाइम परफ़ॉर्मेंस की समस्या नहीं है, बल्कि यह ज़रूरी संसाधन फ़ेच करने में नेटवर्क में देरी की समस्या है. हालांकि, ब्राउज़र की परफ़ॉर्मेंस को ऑप्टिमाइज़ करने के इस बुनियादी तरीके को बंद करने से, आपकी वेबसाइट के एलसीपी पर असर नहीं पड़ेगा.
क्लाइंट-साइड रेंडरिंग की परफ़ॉर्मेंस पर पड़ने वाले असर के बारे में क्या करना चाहिए
अगर आपकी वेबसाइट काफ़ी हद तक क्लाइंट-साइड रेंडरिंग पर निर्भर है और आपने अपने फ़ील्ड डेटा में आईएनपी वैल्यू खराब देखी हैं, तो हो सकता है कि आप यह सोच रहे हों कि क्लाइंट-साइड रेंडरिंग से जुड़ी समस्या का कोई लेना-देना है. उदाहरण के लिए, अगर आपकी वेबसाइट एसपीए है, तो आपके फ़ील्ड डेटा में ऐसे इंटरैक्शन के बारे में पता चल सकता है जो अच्छी रेंडरिंग के लिए ज़िम्मेदार हैं.
वजह चाहे जो भी हो, यहां कुछ ऐसी संभावित वजहों के बारे में बताया गया है जिनके बारे में पता करके, आपको फिर से काम करने में मदद मिल सकती है.
सर्वर से जितना हो सके उतना एचटीएमएल कोड उपलब्ध कराएं
जैसा कि पहले बताया गया है, ब्राउज़र डिफ़ॉल्ट रूप से सर्वर से एचटीएमएल को बहुत अच्छे तरीके से हैंडल करता है. यह एचटीएमएल को पार्स और रेंडर करने में रुकावट डालेगा. इससे आपको लंबे टास्क नहीं करने होंगे. साथ ही, यह मुख्य थ्रेड में लगने वाले कुल समय को ऑप्टिमाइज़ कर देगा. इससे टोटल ब्लॉकिंग टाइम (टीबीटी) कम हो जाता है. टीबीटी को आईएनपी के साथ जुड़ा हुआ है.
ऐसा हो सकता है कि अपनी वेबसाइट बनाने के लिए, फ़्रंटएंड फ़्रेमवर्क का इस्तेमाल किया जा रहा हो. अगर ऐसा है, तो आपको यह पक्का करना होगा कि सर्वर पर कॉम्पोनेंट एचटीएमएल को रेंडर किया जा रहा है. इससे आपकी वेबसाइट को, शुरुआती क्लाइंट-साइड रेंडरिंग की ज़रूरत कम हो जाएगी. साथ ही, आपको बेहतर अनुभव मिलेगा.
- React के लिए, सर्वर पर एचटीएमएल रेंडर करने के लिए, आपको Server DOM API का इस्तेमाल करना होगा. हालांकि, ध्यान रखें: सर्वर साइड रेंडरिंग के पारंपरिक तरीके में सिंक्रोनस अप्रोच का इस्तेमाल किया जाता है. इससे टाइम टू फ़र्स्ट बाइट (टीटीएफ़बी) के साथ-साथ, फ़र्स्ट कॉन्टेंटफ़ुल पेंट (एफ़सीपी) और एलसीपी जैसी बाद की मेट्रिक भी मिल सकती हैं. जहां भी हो सके, पक्का करें कि Node.js या अन्य JavaScript रनटाइम के लिए स्ट्रीमिंग एपीआई का इस्तेमाल किया जा रहा है, ताकि सर्वर जल्द से जल्द ब्राउज़र पर एचटीएमएल की स्ट्रीमिंग शुरू कर सके. Next.js, प्रतिक्रिया पर आधारित फ़्रेमवर्क है, जिसमें डिफ़ॉल्ट रूप से कई सबसे सही तरीके बताए गए हैं. सर्वर पर अपने-आप एचटीएमएल रेंडर करने के अलावा, यह स्टैटिक रूप से उन पेजों के लिए भी एचटीएमएल जनरेट कर सकता है जो उपयोगकर्ता के कॉन्टेक्स्ट (जैसे कि प्रमाणीकरण) के आधार पर नहीं बदलते हैं.
- Vue डिफ़ॉल्ट रूप से क्लाइंट-साइड रेंडरिंग भी करता है. हालांकि, React की तरह Vue, आपके कॉम्पोनेंट एचटीएमएल को सर्वर पर रेंडर भी कर सकता है. जहां भी हो सके वहां इन सर्वर-साइड एपीआई का फ़ायदा लें या अपने Vue प्रोजेक्ट के लिए, हाई-लेवल ऐब्स्ट्रक्शन का इस्तेमाल करें. इससे, सबसे सही तरीकों को आसानी से लागू करने में मदद मिलेगी.
- डिफ़ॉल्ट रूप से, सर्वर पर एचटीएमएल रेंडर करता है. हालांकि, अगर आपके कॉम्पोनेंट कोड को ब्राउज़र के लिए खास नेमस्पेस (उदाहरण के लिए,
window) का ऐक्सेस चाहिए, तो हो सकता है कि आप सर्वर पर उस कॉम्पोनेंट के एचटीएमएल को रेंडर न कर पाएं. जहां भी हो सके दूसरे तरीके एक्सप्लोर करें, ताकि आपकी वजह से ग़ैर-ज़रूरी क्लाइंट-साइड रेंडरिंग न हो. SvelteKit को Svelte के तौर पर Next.js के तौर पर React करना है. यह आपके Svelte प्रोजेक्ट में, सबसे सही तरीकों को एम्बेड करता है, ताकि आप अकेले Svelte का इस्तेमाल करने वाले प्रोजेक्ट में होने वाली संभावित रुकावटों से बच सकें.
क्लाइंट पर बनाए गए DOM नोड की संख्या को सीमित करें
जब डीओएम बड़े होते हैं, तो उन्हें रेंडर करने के लिए ज़रूरी प्रोसेसिंग आम तौर पर बढ़ जाती है. चाहे आपकी वेबसाइट पूरी तरह से तैयार एसपीए हो या किसी एमपीए के लिए इंटरैक्शन की वजह से किसी मौजूदा डीओएम में नए नोड इंजेक्ट किए जा रहे हों, उन डीओएम को जितना हो सके उतना छोटा रखें. इससे क्लाइंट-साइड रेंडरिंग के दौरान, एचटीएमएल को दिखाने में लगने वाले काम को कम करने में मदद मिलेगी. इससे आपकी वेबसाइट का आईएनपी कम रखने में मदद मिलेगी.
स्ट्रीमिंग सर्विस वर्कर आर्किटेक्चर पर ध्यान दें
यह एक बेहतर तकनीक है—ऐसा हो सकता है कि यह इस्तेमाल के हर उदाहरण में आसानी से काम न करे. हालांकि, यह एक ऐसी वेबसाइट है जो आपके MPA को एक ऐसी वेबसाइट में बदल सकती है जिसे लोगों के एक पेज से दूसरे पेज पर जाने पर तुरंत लोड होने का एहसास होता है. सर्वर से किसी पेज के बाकी एचटीएमएल को फ़ेच करने के लिए ReadableStream API का इस्तेमाल करते समय, CacheStorage में अपनी वेबसाइट के स्टैटिक हिस्सों को प्रीकैश करने के लिए, सर्विस वर्कर का इस्तेमाल किया जा सकता है.
इस तकनीक का इस्तेमाल करने पर, क्लाइंट पर एचटीएमएल नहीं बनाया जाता. हालांकि, कैश मेमोरी से कॉन्टेंट के कुछ हिस्से तुरंत लोड होने से ऐसा लगता है कि आपकी साइट तेज़ी से लोड हो रही है. इस तरीके का इस्तेमाल करने वाली वेबसाइट को एसपीए की तरह लग सकता है, लेकिन इसमें क्लाइंट-साइड रेंडरिंग में कोई कमी नहीं आएगी. इससे सर्वर से अनुरोध किए जा रहे एचटीएमएल की मात्रा भी कम हो जाती है.
कम शब्दों में कहें, तो स्ट्रीमिंग सर्विस वर्कर का आर्किटेक्चर, ब्राउज़र में पहले से मौजूद नेविगेशन लॉजिक को बदलने में मदद करता है. हालांकि, यह ब्राउज़र में जुड़ जाता है. वर्कबॉक्स की मदद से ऐसा करने के बारे में ज़्यादा जानने के लिए, स्ट्रीम वाले कई पेज के लिए तेज़ी से काम करने वाले ऐप्लिकेशन पढ़ें.
नतीजा
आपकी वेबसाइट को एचटीएमएल कैसे मिलता है और उसे रेंडर कैसे किया जाता है, इसका परफ़ॉर्मेंस पर असर पड़ता है. जब आपकी वेबसाइट को काम करने के लिए ज़रूरी एचटीएमएल को भेजने के लिए सर्वर पर भरोसा किया जाता है, तब आपको बहुत कुछ बिना किसी शुल्क के मिल रहा है: इंक्रीमेंटल (बढ़ने वाले) पार्सिंग और रेंडरिंग, और लंबे टास्क से बचने के लिए मुख्य थ्रेड पर अपने-आप जनरेट होना.
क्लाइंट-साइड एचटीएमएल रेंडरिंग में परफ़ॉर्मेंस से जुड़ी कई संभावित समस्याएं होती हैं. हालांकि, इन समस्याओं से कई मामलों में बचा जा सकता है. हालांकि, हर वेबसाइट की ज़रूरी शर्तों की वजह से, ऐसी जानकारी को 100% बार रोका नहीं जा सकता. बहुत ज़्यादा क्लाइंट-साइट रेंडरिंग की वजह से, लंबे समय तक चलने वाले संभावित कामों को कम करने के लिए, पक्का करें कि जब भी संभव हो, अपनी वेबसाइट का ज़्यादा से ज़्यादा एचटीएमएल सर्वर से ही भेजें. क्लाइंट पर रेंडर होने वाले एचटीएमएल के लिए, डीओएम का साइज़ जितना हो सके उतना छोटा रखें. साथ ही, क्लाइंट को एचटीएमएल की डिलीवरी की स्पीड बढ़ाने के लिए वैकल्पिक आर्किटेक्चर का इस्तेमाल करें. साथ ही, ब्राउज़र से लोड होने वाली इंक्रीमेंटल पार्सिंग और रेंडरिंग का फ़ायदा लेते हुए, सर्वर से एचटीएमएल के लिए रेंडर करें.
अगर आपको अपनी वेबसाइट के क्लाइंट-साइड रेंडरिंग को जितना हो सके उतना कम रखना चाहिए, तो न सिर्फ़ अपनी वेबसाइट के आईएनपी में सुधार किया जा सकता है, बल्कि एलसीपी, टीबीटी जैसी अन्य मेट्रिक में भी सुधार किया जा सकता है. कुछ मामलों में टीटीएफ़बी को भी बेहतर बनाया जा सकता है.
माइक जोनिट्ज़ की बनाई हुई Unस्प्लैश की हीरो इमेज.