HTTP / 2 ने वेब पर काफी तेजी लाने का वादा किया था, और Cloudflare ने बहुत पहले ही सभी क्लाइंट के लिए HTTP / 2 एक्सेस की तैनाती की थी। लेकिन HTTP / 2 की एक विशेषता, प्राथमिकता, अपेक्षाओं को पूरा नहीं करती थी। इसलिए नहीं कि यह मौलिक रूप से टूट गया है, बल्कि ब्राउज़रों में कार्यान्वयन के कारण है।

आज, Cloudflare HTTP / 2 की प्राथमिकता को बदलने का सुझाव देता है, जो हमारे सर्वरों को प्राथमिकता वाले निर्णयों पर नियंत्रण देता है जो वास्तव में इंटरनेट को गति देते हैं।

ऐतिहासिक रूप से, यह ब्राउज़र था जो वेब सामग्री को डाउनलोड करने के लिए कैसे और कब नियंत्रित करता है। आज, सभी सशुल्क योजनाओं के लिए, हम इस मॉडल में आमूल-चूल परिवर्तन कर रहे हैं। वे सीधे साइट के मालिक को नियंत्रण स्थानांतरित करते हैं। Cloudflare डैशबोर्ड में "स्पीड" टैब पर, ग्राहक "उन्नत HTTP / 2 प्राथमिकताकरण" को सक्षम कर सकते हैं: यह डिफ़ॉल्ट ब्राउज़र सेटिंग्स को एक बेहतर शेड्यूलिंग योजना में ओवरराइड करता है, जो आगंतुकों के लिए उपयोग को काफी तेज करता है (कुछ मामलों में, हमने 50% की वृद्धि देखी)। Cloudflare श्रमिकों के साथ, साइट के मालिक आगे भी जा सकते हैं और अपनी विशिष्ट आवश्यकताओं के लिए सेटिंग्स को पूरी तरह से अनुकूलित कर सकते हैं।

वर्तमान स्थिति

वेब पेजों में दर्जनों (कभी-कभी सैकड़ों) व्यक्तिगत संसाधन होते हैं जो ब्राउज़र द्वारा अंतिम प्रदर्शित सामग्री में डाउनलोड और एकत्र किए जाते हैं। इसमें वह दृश्य सामग्री शामिल है जिसके साथ उपयोगकर्ता (HTML, CSS, छवियाँ) इंटरैक्ट करता है, साथ ही साथ साइट के लिए एप्लिकेशन लॉजिक (जावास्क्रिप्ट), विज्ञापन, एनालिटिक्स और मार्केटिंग ट्रैकिंग बीकन। उपयोगकर्ता के दृष्टिकोण से, इन संसाधनों को लोड करने का क्रम बहुत महत्वपूर्ण है: यह उस समय को प्रभावित करता है जब वह सामग्री को देखता है और पृष्ठ के साथ बातचीत कर सकता है।

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

HTML दस्तावेज़ को दो भागों में विभाजित किया गया है। <Head> दस्तावेज़ का शीर्षक शुरुआत में है और इसमें सामग्री प्रदर्शित करने के लिए स्टाइलशीट, स्क्रिप्ट और अन्य ब्राउज़र निर्देश शामिल हैं। शीर्षलेख के बाद दस्तावेज़ का मुख्य भाग <body> होता है, इसमें ब्राउज़र विंडो में प्रदर्शित वास्तविक सामग्री होती है (हालाँकि स्क्रिप्ट और शैली पत्रक शरीर में भी हो सकते हैं)। जब तक ब्राउज़र दस्तावेज़ निकाय तक नहीं पहुंचता, तब तक उपयोगकर्ता के पास दिखाने के लिए कुछ भी नहीं है, और पृष्ठ रिक्त रहता है। इसलिए, हेडर को जितनी जल्दी हो सके संसाधित करना महत्वपूर्ण है। यदि आप विवरण में रुचि रखते हैं, तो एचटीएमएल 5 रॉक्स वेबसाइट में ब्राउज़रों के काम करने का एक शानदार ट्यूटोरियल है ।

ब्राउज़र आमतौर पर उस क्रम के लिए जिम्मेदार होता है जिसमें पेज बनाने के लिए आवश्यक विभिन्न संसाधनों और दस्तावेज़ को लोड करने की प्रक्रिया को आगे बढ़ाया जाता है। HTTP / 1.x में, इस बात पर प्रतिबंध है कि ब्राउज़र कितनी वस्तुओं को एक बार में किसी भी सर्वर से अनुरोध कर सकता है (आमतौर पर 6 कनेक्शन और प्रति कनेक्शन एक समय में केवल एक संसाधन), इसलिए अनुरोधों का क्रम ब्राउज़र द्वारा सख्ती से नियंत्रित किया जाता है। HTTP / 2 में, स्थिति पूरी तरह से अलग है। ब्राउज़र एक बार में सभी संसाधनों का अनुरोध कर सकता है (कम से कम जैसे ही उनके बारे में पता चलता है), और सर्वर को इन संसाधनों को कैसे वितरित करें, इस बारे में विस्तृत निर्देश प्रदान करता है।

इष्टतम संसाधन लोडिंग ऑर्डर

अधिकांश हिस्सों के लिए, पृष्ठ लोडिंग चक्र में एक इष्टतम आदेश है जो उपयोगकर्ता के लिए पृष्ठ की उपलब्धता को अधिकतम करता है (और इष्टतम और गैर-इष्टतम लोडिंग आदेश के बीच का अंतर 50% या अधिक तक पहुंच सकता है)।

जैसा कि ऊपर वर्णित है, इससे पहले कि ब्राउज़र किसी भी सामग्री को प्रदर्शित कर सकता है, यह <head> अनुभाग में CSS और JavaScript द्वारा अवरुद्ध है। इस स्तर पर, अवरुद्ध संसाधनों को लोड करने के लिए चैनल के 100% का उपयोग करना अधिक लाभदायक है, बजाय उन्हें क्रम में लोड करने के, क्योंकि वे HTML कोड में लिखे गए हैं। यह ब्राउज़र को अगले अवरुद्ध संसाधन को लोड करते समय प्रत्येक तत्व का विश्लेषण और चलाने की अनुमति देता है, जो एक इष्टतम पाइपलाइन बनाता है।

समानांतर या अनुक्रमिक लोडिंग के लिए स्क्रिप्ट लोडिंग का समय अलग नहीं होता है, लेकिन अनुक्रमिक लोडिंग के लिए पहली स्क्रिप्ट को दूसरी लोडिंग के दौरान संसाधित और निष्पादित किया जा सकता है।

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

एक नियम के रूप में, कुछ ट्रेड-ऑफ पर विचार करने की आवश्यकता है:

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

ज्यादातर मामलों में, व्यापार-नापसंद को देखते हुए, यह रणनीति अच्छी तरह से काम करती है:

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

इस प्रकार, उपयोगकर्ता को दिखाई देने वाली सामग्री को जितनी जल्दी हो सके लोड किया जाता है, एप्लिकेशन लॉजिक को कम से कम विलंबित किया जाता है, और अदृश्य छवियों को इस तरह से लोड किया जाता है ताकि लेआउट को जितनी जल्दी हो सके पूरा किया जा सके।

उदाहरण

उदाहरण के लिए, किसी विशिष्ट ई-कॉमर्स साइट से एक सरलीकृत उत्पाद श्रेणी पृष्ठ का उपयोग करें:

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

सादगी के लिए, मान लीजिए कि सभी संसाधनों का आकार 1 सेकंड में समान है और प्रत्येक भार है। सभी संसाधनों को डाउनलोड करने में कुल 20 सेकंड लगते हैं, लेकिन लोड करने का क्रम और तरीका बेहद महत्वपूर्ण है।

यहां बताया गया है कि एक ब्राउज़र में दिखने वाला इष्टतम संसाधन क्या होगा:

HTML, CSS लोड करने और स्क्रिप्ट्स को ब्लॉक करने के दौरान पेज पहले 4 सेकंड के लिए खाली है: वे सभी 100% कनेक्शन का उपयोग करते हैं।
4 सेकंड के निशान पर, पृष्ठभूमि और पृष्ठ संरचना पाठ या छवियों के बिना प्रदर्शित होती है।
एक सेकंड के बाद, लगभग 5 सेकंड में, पृष्ठ पाठ प्रदर्शित होता है।
5-10 सेकंड के अंतराल में, छवियां डाउनलोड की जाती हैं, पहली बार धुंधली होती हैं, लेकिन बहुत जल्दी वे स्पष्ट हो जाती हैं। लगभग 7 सेकंड में, परिणाम अंतिम संस्करण से लगभग अप्रभेद्य है।
लगभग 10 सेकंड में, पृष्ठ के दृश्य भाग में सभी दृश्य सामग्री का लोडिंग पूरा हो जाता है।
अगले दो सेकंड में, अतुल्यकालिक जावास्क्रिप्ट को लोड किया जाता है और निष्पादित किया जाता है, किसी भी गैर-महत्वपूर्ण तर्क (एनालिटिक्स, मार्केटिंग टैग आदि) को निष्पादित करता है।
अंतिम 8 सेकंड के दौरान, उपयोगकर्ता द्वारा पृष्ठ को स्क्रॉल करने पर शेष चित्र लोड हो जाते हैं।

वर्तमान ब्राउज़र प्राथमिकता

सभी वर्तमान ब्राउज़र इंजन विभिन्न प्राथमिकता रणनीतियों को लागू करते हैं , जिनमें से कोई भी इष्टतम नहीं है।

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

नेत्रहीन, यह एक दर्दनाक अनुभव की ओर जाता है: उपयोगकर्ता 19 सेकंड के लिए एक रिक्त स्क्रीन को देखता है, और फिर पाठ को प्रदर्शित करने में 1 सेकंड की देरी होती है। नीचे दिए गए एनीमेशन को देखते समय, धैर्य रखें, क्योंकि 19 सेकंड के लिए ऐसा लग सकता है कि रिक्त स्क्रीन पर कुछ भी नहीं हो रहा है (हालांकि यह है):

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

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

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

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

हमारे उदाहरण में, यह सफ़ारी की तुलना में थोड़ा तेज़ है, क्योंकि छवियाँ स्टाइलशीट के लोड होने की प्रतीक्षा कर रही हैं:

लगभग 6 सेकंड में, मूल पृष्ठ सामग्री को उत्पाद की छवियों की पृष्ठभूमि और धुंधले संस्करणों के साथ प्रदर्शित किया जाता है (सफारी के लिए 8 सेकंड और सर्वोत्तम स्थिति में 4 सेकंड की तुलना में)।
8 सेकंड में, फ़ॉन्ट लोड किया गया है, और आप उत्पाद की थोड़ी तेज छवियों (सफारी के 11 सेकंड और सर्वश्रेष्ठ मामले में 7 सेकंड की तुलना में) के साथ पाठ प्रदर्शित कर सकते हैं।
शेष 12 सेकंड के लिए, चित्र तेज हो जाते हैं क्योंकि शेष सामग्री लोड होती है।

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

व्यवहार में, यह लगभग इष्टतम डाउनलोड परिदृश्य है, एकमात्र अंतर यह है कि छवियों को एक बार में डाउनलोड किया जाता है, और समानांतर में नहीं:

5 सेकंड तक, Chrome लोड करना इष्टतम परिदृश्य के समान है, 5 वें पर पृष्ठभूमि प्रदर्शित करना और 5 वीं पर पाठ सामग्री।
अगले 5 सेकंड में, दृश्यता क्षेत्र की छवियों को एक समय में लोड किया जाता है जब तक कि प्रक्रिया लगभग 10 सेकंड पर पूरी नहीं हो जाती है (इष्टतम परिदृश्य की तुलना में, जब वे लगभग 7 सेकंड पर थोड़े धुंधले रूप में प्रदर्शित होते हैं और शेष तीन सेकंड के लिए तेज हो जाते हैं)।
पृष्ठ का दृश्य भाग 10 सेकंड (इष्टतम परिदृश्य के समान) में पूरा होने के बाद, शेष 10 सेकंड अतुल्यकालिक स्क्रिप्ट चलाने और छिपी हुई छवियों (साथ ही साथ इष्टतम परिदृश्य) को लोड करने पर खर्च किए जाते हैं।

दृश्य तुलना

दृश्य अंतर काफी अलग है, हालांकि तकनीकी रूप से सभी सामग्री लोड करने में समान समय लगता है:

सर्वर साइड प्राथमिकता

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

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

Cloudflare की प्राथमिकता योजना में 64 प्राथमिकताएं "स्तर" शामिल हैं, और प्रत्येक स्तर के भीतर संसाधनों के समूह हैं जो निर्धारित करते हैं कि आपस में कनेक्शन कैसे विभाजित करें:

सबसे पहले, सभी संसाधनों को उच्च प्राथमिकता के स्तर पर डाउनलोड किया जाता है, फिर निचले स्तर पर संक्रमण होता है।

दिए गए प्राथमिकता स्तर के भीतर, तीन अलग-अलग संगति समूह हैं:

0 : समूह "0" में सभी संसाधन क्रमिक रूप से उस क्रम में भेजे जाते हैं जिसमें उन्हें 100% बैंडविड्थ का उपयोग करने का अनुरोध किया गया था। समूह "0" के सभी संसाधनों को लोड करने के बाद ही अन्य समूहों को समान स्तर पर माना जाता है।
1 : संगामिति समूह "1" में सभी संसाधन क्रमिक रूप से उस क्रम में भेजे जाते हैं जिसमें वे अनुरोध किए गए थे। उपलब्ध बैंडविड्थ समान रूप से समानता समूह "1" और समानता समूह "एन" के बीच वितरित किया जाता है।
n : संगामिति समूह "n" में संसाधन समानांतर में प्रेषित होते हैं, उपलब्ध बैंडविड्थ को साझा करते हैं।

व्यवहार में, समानता समूह "0" महत्वपूर्ण सामग्री के लिए उपयोगी है जिसे क्रमिक रूप से संसाधित करने की आवश्यकता होती है (स्क्रिप्ट, सीएसएस, आदि)। समूह "1" कम महत्वपूर्ण सामग्री के लिए उपयोगी है जो अन्य संसाधनों के साथ बैंडविड्थ साझा कर सकता है, लेकिन जहां संसाधन अभी भी अनुक्रमिक प्रसंस्करण (अतुल्यकालिक स्क्रिप्ट, गैर-प्रगतिशील छवियां, आदि) से लाभ उठाते हैं। समसामयिक समूह "n" उन संसाधनों के लिए उपयोगी है जो समानांतर प्रसंस्करण (प्रगतिशील चित्र, वीडियो, ऑडियो, आदि) से लाभान्वित होते हैं।

क्लाउडफ्लेयर डिफ़ॉल्ट प्राथमिकता

उन्नत प्राथमिकता के विकल्प के साथ, संसाधन लोडिंग का "इष्टतम" क्रम, जैसा कि ऊपर वर्णित है, कार्यान्वित किया गया है। लागू की गई विशिष्ट प्राथमिकताएं इस प्रकार हैं:

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

श्रमिकों के साथ प्राथमिकता तय करना

तेजी से डिफ़ॉल्ट कार्य महान है, लेकिन यह क्लाउडफ़ेयर वर्कर्स समर्थन के साथ प्राथमिकता को कॉन्फ़िगर करने की क्षमता के लिए वास्तव में दिलचस्प है, इसलिए साइटें संसाधनों के लिए डिफ़ॉल्ट प्राथमिकता को ओवरराइड कर सकती हैं या अपनी स्वयं की प्राथमिकता योजनाओं को लागू कर सकती हैं।

यदि कार्यकर्ता प्रतिक्रिया के लिए cf- cf-priority हैडर जोड़ता है, तो Cloudflare Edge Servers निर्दिष्ट प्राथमिकता और संगामिति लागू करेगा। शीर्ष लेख प्रारूप <प्राथमिकता> / <संगामिति> है, इसलिए response.headers.set('cf-priority', “30/0”); इस उत्तर के लिए प्राथमिकता 30 और समानांतरवाद 0 सेट करेगा। इसी तरह, "30/1" समानांतरवाद "1" सेट करेगा, और "30 / n" समानांतरवाद सेट करेगा n।

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

प्राथमिकता वाले निर्णयों के बारे में सूचित करने के लिए, श्रमिकों का रनटाइम अनुरोध ऑब्जेक्ट में प्राथमिकता पर ब्राउज़र द्वारा मांगी गई जानकारी को भी इंगित करता है, जो कि कार्यकर्ता घटनाओं (request.cf.requestPriority) के रिसीवर को दिया जाता है। आने वाली प्राथमिकताएं अर्धविराम द्वारा अलग की गई विशेषताओं की एक सूची है। यह कुछ इस तरह दिखता है: weight=192;exclusive=0;group=3;group-weight=127 ।

वजन : HTTP / 2 को प्राथमिकता देने के लिए वजन।
अनन्य : विशेष HTTP / 2 ध्वज (क्रोमियम-आधारित ब्राउज़रों के लिए 1, 0 अन्य के लिए)।
समूह : अनुरोध समूह के लिए HTTP / 2 स्ट्रीम पहचानकर्ता (फ़ायरफ़ॉक्स के लिए गैर-शून्य)।
समूह-वजन : अनुरोधों के समूह के लिए HTTP / 2 भार (फ़ायरफ़ॉक्स के लिए गैर-शून्य)।

यह सिर्फ शुरुआत है।

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

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

वेब त्वरण के लिए सर्वश्रेष्ठ HTTP / 2 प्राथमिकता