क्योंकि, आपके उदाहरण में, वेब सर्वर हमेशा सीएसएस और छवियां भेजेगा भले ही ग्राहक के पास पहले से ही हो, इस प्रकार बैंडविड्थ को बहुत बर्बाद कर रहा है (और इस प्रकार विलंब को कम करके कनेक्शन को धीमा करने के बजाय तेजी से बना रहा है, जो संभवतः आपका इरादा था)। ध्यान दें कि सीएसएस, जावास्क्रिप्ट और छवि फ़ाइलों को आमतौर पर वास्तव में उस कारण के लिए बहुत लंबे समय के साथ भेजा जाता है (जैसे कि जब आपको उन्हें बदलने की आवश्यकता होती है, तो आप नई प्रतिलिपि को बाध्य करने के लिए फ़ाइल का नाम बदल देते हैं जो फिर से लंबे समय तक कैश हो जाएगा)।
अब, आप " ओके " कहकर बैंडविड्थ की बर्बादी के आसपास काम करने की कोशिश कर सकते हैं , लेकिन क्लाइंट संकेत दे सकता है कि इसमें पहले से ही कुछ संसाधन हैं, इसलिए सर्वर इसे फिर से नहीं भेजेगा । कुछ इस तरह:
GET /index.html HTTP/1.1
Host: www.example.com
If-None-Match: "686897696a7c876b7e"
Connection: Keep-Alive
GET /style.css HTTP/1.1
Host: www.example.com
If-None-Match: "70b26618ce2c246c71"
GET /image.png HTTP/1.1
Host: www.example.com
If-None-Match: "16d5b7c2e50e571a46"
और फिर केवल उन फ़ाइलों को प्राप्त करें जो बदल नहीं गए हैं एक टीसीपी कनेक्शन पर भेजा गया है (लगातार कनेक्शन पर HTTP पाइपलाइनिंग का उपयोग करके)। और अंदाज लगाइये क्या? यह यह है कि यह पहले से ही कैसे काम करता है (आप इफ-मॉडिफाइड-चूंकि-इफ-नो -नो-मैच के बजाय) का उपयोग कर सकते हैं ।
लेकिन अगर आप वास्तव में बहुत सारे बैंडविड्थ को बर्बाद करके (अपने मूल अनुरोध के अनुसार) विलंबता को कम करना चाहते हैं, तो आप अपनी वेबसाइट डिजाइन करते समय मानक HTTP / 1.1 का उपयोग करके आज ऐसा कर सकते हैं। अधिकांश लोग ऐसा नहीं करते हैं, क्योंकि उन्हें नहीं लगता कि यह इसके लायक है।
ऐसा करने के लिए, आपको सीएसएस या जावास्क्रिप्ट को अलग फ़ाइल में रखने की आवश्यकता नहीं है, आप उन्हें मुख्य HTML फ़ाइल में उपयोग करके <style>
और <script>
टैग कर सकते हैं (आपको शायद इसे मैन्युअल रूप से करने की भी आवश्यकता नहीं है, आपका टेम्पलेट इंजन शायद इसे स्वचालित रूप से कर सकता है) । आप इस तरह से डेटा URI का उपयोग करके HTML फ़ाइल में चित्र भी शामिल कर सकते हैं :
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
बेशक, बेस 64 एन्कोडिंग बैंडविड्थ के उपयोग को थोड़ा बढ़ा देता है, लेकिन अगर आप व्यर्थ बैंडविड्थ की परवाह नहीं करते हैं, तो यह एक मुद्दा नहीं होना चाहिए।
अब, अगर आप वास्तव में परवाह करते हैं, तो आप दोनों दुनिया के सर्वश्रेष्ठ को पाने के लिए आपको वेब स्क्रिप्ट भी स्मार्ट बना सकते हैं: पहले अनुरोध पर (उपयोगकर्ता के पास कुकी नहीं है), सब कुछ भेजें (सीएसएस, जावास्क्रिप्ट, चित्र) केवल एक ही HTML में एम्बेडेड फ़ाइल के रूप में ऊपर वर्णित है, फ़ाइलों की बाहरी प्रतियों के लिए एक लिंक rel = "prefetch" टैग जोड़ें और एक कुकी जोड़ें। यदि उपयोगकर्ता के पास पहले से ही कुकी है (उदाहरण के लिए वह पहले का दौरा कर चुका है), तो उसे बस एक सामान्य HTML के साथ भेजें <img src="example.jpg">
, <link rel="stylesheet" type="text/css" href="style.css">
आदि।
इसलिए पहली बार ब्राउजर में सिर्फ एक ही HTML फाइल के लिए अनुरोध करना होगा और सब कुछ प्राप्त करना और दिखाना होगा। तब यह (जब निष्क्रिय) बाहरी सीएसएस, जेएस, छवियों को प्रीलोड करेगा। अगली बार जब उपयोगकर्ता आएगा, तो ब्राउज़र अनुरोध करेगा और केवल परिवर्तित संसाधन (शायद सिर्फ नया HTML) प्राप्त करेगा।
अतिरिक्त सीएसएस + जेएस + छवियों का डेटा केवल दो बार भेजा जाएगा, भले ही आपने वेबसाइट पर सैकड़ों बार क्लिक किया हो। आपके प्रस्तावित समाधान के अनुसार सैकड़ों बार से बेहतर है। और यह कभी नहीं (पहली बार नहीं, न ही अगली बार) एक से अधिक विलंबता-बढ़ती दौर-यात्रा का उपयोग करेगा।
अब, अगर यह बहुत अधिक काम की तरह लगता है, और आप SPDY जैसे किसी अन्य प्रोटोकॉल के साथ नहीं जाना चाहते हैं , तो Apache के लिए mod_pagespeed जैसे मॉड्यूल पहले से ही हैं , जो स्वचालित रूप से आपके लिए कुछ काम कर सकते हैं (कई CSS / JS फ़ाइलों को मर्ज करना) एक में, छोटे-छोटे सीएसएस को ऑटो-इनलाइन करना और उन्हें छोटा करना, छोटे प्लेसहोल्डर इनलाइन इमेज बनाते हैं, जबकि आपको अपने वेबपेज की सिंगल लाइन को संशोधित करने की आवश्यकता के बिना ओरिजनल को लोड करने, आलसी लोडिंग इमेज आदि की प्रतीक्षा करते हुए।