2 जी मोबाइल कनेक्शन (~ 0.1 एमबीपीएस) से कम से कम 500ms विलंबता वाले वातावरण में, सर्वर पर लगभग 5-10 फाइलों में, लगभग 10kb सीएसएस और जेएस भेजने का सबसे तेज़ और सबसे प्रभावी तरीका क्या है ? एक के बाद एक इनलाइन बनाम जेएस और सीएसएस शामिल थे?
- एक फाइल करने के लिए सभी js और एक फाइल
- करने के लिए सभी सीएसएस सभी CSS और JS फ़ाइलों को जोड़ने के संयोजन:
मैं तीन विकल्प के बारे में सोच सकते हैं
मुझे पता है कि Google इनलाइन का उपयोग करता है, लेकिन शायद यह सर्वर सॉकेट को बचाने के लिए है। वे स्टेटलेस मोड में चलकर राम को भी बचा रहे हैं - वे ग्राहकों के लिए सत्र याद रखने पर भरोसा करते हैं। सर्वर पावर बिल्कुल कोई मुद्दा नहीं है।
दूसरी ओर, फेसबुक अपने सीएसएस (उनके नाम बेस 64 एन्कोडेड हैं) को स्वत: उत्पन्न करने लगते हैं, लेकिन उपयोगकर्ता को भेजे गए 10 से अधिक विभिन्न फाइलों में, और वे इसे भी अनुकूलित करने के लिए प्रतीत नहीं होते हैं; केवल कुछ सफेद जगह हटाने।
मैं पहले से ही सभी फ़ाइलों को एक फ़ंक्शन के माध्यम से पास कर रहा हूं जो सब कुछ संपीड़ित करता है, इसलिए इनमें से कोई भी व्यवहार्य है। मैं पहला विकल्प नहीं चुनना चाहता क्योंकि यह आसान है।
पहले दो कैशिंग का लाभ लेते हैं (दूसरा एक पहले से थोड़ा कम होता है) लेकिन दूसरे को केवल सर्वर के लिए तीन अनुरोधों की आवश्यकता होती है, और तीसरे को केवल सर्वर से अनुरोध प्राप्त करने की आवश्यकता होती है (कुछ छवियों को अनदेखा करना हमारे पास कुछ पृष्ठों पर हो सकता है)।
क्या एंड्रॉइड/आईओएस ब्राउज़र के पुनरारंभ के दौरान जेएस और सीएसएस कैश करता है? यदि नहीं, तो इनलाइन बेहतर लगता है।
एकमात्र लक्ष्य उपयोगकर्ता के औसत लोड समय को कम करना है। प्रत्येक उपयोगकर्ता साइट पर लगभग 100 पेज लोड खर्च करेगा, प्रति दिन लगभग 40 सीएसएस और जेएस फाइलें देखेगा। सीएसएस और जेएस मूल रूप से स्थैतिक सामग्री है। यह 30 दिनों तक कैश करने के लिए सेट है, और यदि फ़ाइल
/path/to/file.ext?md5-hash-of-fileका उपयोग कर बदलती है तो हम यूआरएल बदलते हैं। इसके अलावा, जहां भी संभव हो सब कुछ gzipped है।संपादित करें:
मुझे लगता है कि मैं दो विकल्प मैं दो नंबर के लिए मिला स्पष्ट करना चाहिए। क्या पूरी साइट पर सीएसएस और जेएस के लिए एक फ़ाइल का उपयोग करना एक अच्छा विचार है? यह केवल दो अनुरोधों का उपयोग करेगा और किसी भी डबल (या सेप्टपल) कैशिंग को हटा देगा क्योंकि एक एकल फ़ंक्शन दो या दो से अधिक अलग संयुक्त जेएस फ़ाइलों में होता है, लेकिन 1 एमबी तक का डाउनलोड अच्छा नहीं लगता है।
आज यह मूल रूप से एक संयुक्त सीएसएस प्रति दृश्य है, इसलिए हर बार जब आप एक ही पृष्ठ को देखते हैं तो सामग्री को कैश किया जाता है। हालांकि, कुछ जेएस और सीएसएस का उपयोग एक से अधिक पृष्ठों पर किया जाता है।
1 का मतलब है कि कम अनुरोध भेजे जाते हैं, लेकिन जैसे ही आप कैश हेडर सेट कर रहे हैं, इससे कोई फर्क नहीं पड़ता। 3 के लिए, क्या आपका पृष्ठ गतिशील रूप से जेनरेट किया गया है? यदि ऐसा है तो इसे कैश नहीं किया जाएगा और सीएसएस/जेएस को रेखांकित करने का एक भयानक विचार होगा। एंड्रॉइड/आईओएस कैशिंग फाइलों के लिए या नहीं, यह उन फ़ाइलों के आकार पर निर्भर करेगा। –
यदि आप AJAX नेविगेशन का उपयोग करते हैं, इनलाइन आसान है और हमेशा बैंडविड्थ बर्बाद करने की आवश्यकता नहीं है: पूर्व; सिर में इनलाइन जेएस/सीएसएस छोड़कर, शरीर को स्वैप करें। यदि आप अक्सर पृष्ठ को रीफ्रेश करते हैं, तो कुछ अच्छी तरह से कैश किए गए बाहरी यूआरएल आमतौर पर सर्वश्रेष्ठ प्रदर्शन करते हैं। ध्यान रखें कि 2 जी पर दो 50 केबी फाइल आमतौर पर पाइप-अस्तर के कारण 1 100kb फ़ाइल से अधिक तेज़ी से स्थानांतरित हो जाएंगी। यदि आपके पास बहुत सारी अंतराल है, तो यह दो से अधिक यूआरएल को देखने/एक्सफर करने के लिए तेज़ हो सकता है। – dandavis
सभी पेज गतिशील रूप से जेनरेट किए गए हैं, php, तो कैशिंग तब भी काम नहीं करेगा। क्या आपको कोई जानकारी है कि फ़ाइल आकार कैश किए गए हैं? –