बैंडविड्थ को कम करने के प्रभावी तरीके (और इस प्रकार पृष्ठ लोड समय)?


12

किसी पृष्ठ को रेंडर करने के लिए किसी वेबसाइट की बैंडविड्थ की मात्रा कम करने की बात आती है तो सबसे प्रभावी तरीके क्या हैं?

आक्रामक कैशिंग? JS / CSS को न्यूनतम करना Gzip? सीएमएस? स्प्राइट?


डुप्लीकेट प्रश्न का डुप्लिकेट उत्तर मिलता है: webmasters.stackexchange.com/questions/569/…
ब्रायसन

1
यह सवाल पहले था, इसलिए दूसरा डुप्लिकेट है
मार्क हेंडरसन

जवाबों:


10

किसी भी वेबसाइट द्वारा आसानी से लागू किए जाने वाले कुछ बुनियादी तरीके:

  • अपने HTML, CSS और जावास्क्रिप्ट को साथ deflateया gzipयदि अनुरोध करने वाले ब्राउज़र ने इसे सपोर्ट किया है, तो संपीड़ित करें ।
  • Google क्लोजर कंपाइलर के साथ अपनी जावास्क्रिप्ट को छोटा करें
  • YUI कंप्रेसर के साथ अपने सीएसएस को छोटा करें

थोड़ा और शामिल:

  • यदि कोई पृष्ठ या छवि बदलने की संभावना नहीं है, तो ब्राउज़र को इसे कैश करने के लिए कहें। अधिकांश वेब सर्वर पहले से ही स्टैटिक फाइल्स के लिए ऐसा करते हैं, इसलिए आपको बस इसे अपनी डायनामिक स्क्रिप्ट्स में जोड़ना होगा जहाँ संभव हो।
  • अपने सीएसएस और जेएस फाइलों को एक एकल में स्वचालित रूप से मर्ज करें । यह लाभप्रद है क्योंकि यह HTTP अनुरोधों को घटाता है (जिनके पास ओवरहेड है और जो कुछ बेवकूफ ब्राउज़र हैं - और मेरा मतलब है कि इंटरनेट एक्सप्लोरर - प्रति डोमेन एक समय में डिफ़ॉल्ट 2 अनुरोधों द्वारा सीमा)।
  • अपनी स्थिर फ़ाइलों (CSS, JS, Images आदि) को एक अलग डोमेन नाम पर ले जाएँ। इसके कारण कुकी जानकारी HTTP अनुरोध में नहीं भेजी जाती है।
  • स्प्राइट्स का उपयोग करें जो स्वचालित रूप से उत्पन्न होते हैं । स्प्राइट एक एकल छवि है जिसमें कई आइकन या अन्य छोटी छवियां होती हैं; फिर आप सीएसएस backgroundसंपत्ति के साथ कौन सी छवि दिखाना चाहते हैं। उदाहरण है

    लाभ यह है कि क्लाइंट कम HTTP अनुरोध करता है (जिसके पास ओवरहेड है)।

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


मैं जवाब देने जा रहा था, लेकिन मुझे लगता है कि आपने सब कुछ कवर कर लिया :)
इको का कहना है कि मोनिका

ओवरहेड वास्तव में विचार करने के लिए एक महत्वपूर्ण चीज है, छोटी फ़ाइल के लिए, वे स्थानांतरित किए गए डेटा के एक अच्छे प्रतिशत का प्रतिनिधित्व कर सकते हैं।
होलीवीआरआर

तब तक डिफ्लेट का उपयोग न करें जब तक कि आप उपयोगकर्ता एजेंट की सावधानीपूर्वक जांच न करें, क्योंकि डिफ्लेट के आसपास इंटरनेट एक्सप्लोरर में एक बग है।

@Kinopiko: हाँ, अच्छी सलाह। स्टैक ओवरफ्लो पर मेरा प्रश्न देखें ।
थॉमस बोनीनी

5

Google ने पेलोड के आकार को न्यूनतम करने के लिए अपनी सिफारिशों को रेखांकित और समझाया है । उनमें निम्नलिखित तकनीकें शामिल हैं:

  1. दबाव शुरू कर दो
  2. अप्रयुक्त सीएसएस को हटा दें
  3. जावास्क्रिप्ट को छोटा करें
  4. CSS को छोटा करें
  5. HTML को छोटा करें
  6. जावास्क्रिप्ट का भार लोड करना
  7. छवियों का अनुकूलन करें
  8. स्केल की गई छवियों की सेवा करें
  9. एक सुसंगत URL से संसाधन परोसें

ये सुझाव उनके ओपन-सोर्स फ़ायरफ़ॉक्स / फायरबग ऐड-ऑन प्रोजेक्ट का एक हिस्सा हैं, जिसे पेज स्पीड कहा जाता है । याहू के YSlow प्लगइन के समान। वास्तविक पृष्ठ गति ऐड-ऑन उस सूची की तुलना में कई अधिक अनुकूलन के लिए जाँच करेगा जो विस्तार से बताता है। पेज स्पीड का उपयोग करने के निर्देश भी प्रस्तुत किए गए हैं।

याहू! आपकी वेबसाइट को गति देने के लिए सर्वोत्तम अभ्यास सर्वोत्तम प्रथाओं के समान सेट की पहचान करते हैं:

  1. HTTP रिक्वेस्ट को मिनिमाइज करें
  2. सामग्री वितरण नेटवर्क का उपयोग करें
  3. एक समय सीमा समाप्त करें या कैश-कंट्रोल हैडर जोड़ें
  4. Gzip घटक
  5. स्टाइल्सशीट्स को सबसे ऊपर रखें
  6. तल पर लिपियों रखो
  7. सीएसएस एक्सप्रेशन से बचें
  8. जावास्क्रिप्ट और सीएसएस बाहरी बनाओ
  9. DNS लुकअप कम करें
  10. ...

(Yahoo! की सूची ~ 35 आइटम लंबी है, इसे संपूर्णता में उद्धृत करने की आवश्यकता नहीं है।)

दोनों YSlow (छवि लिंक) और पृष्ठ गति (छवि लिंक) चीजों का सुझाव दे आप कर सकते हैं कि और आप दिखा क्या, उनकी सिफारिशों के, पहले से ही लागू किया गया है, आप अपने पृष्ठों पर परीक्षण चलाने के लिए अनुमति देगा।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.