महत्वपूर्ण प्रतिपादन पथ

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

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

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

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

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

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

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

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