टेक्स्ट-आधारित एसेट की एन्कोडिंग और ट्रांसफ़र आकार को ऑप्टिमाइज़ करें

इल्या ग्रिगोरिक
इलिया ग्रिगोरिक
जेरेमी वैगनर
जेरेमी वैगनर

गैर-ज़रूरी संसाधनों को खत्म करने के अलावा, पेज लोड करने की स्पीड को बेहतर बनाने के लिए, बाकी संसाधनों को ऑप्टिमाइज़ और कंप्रेस करके डाउनलोड के कुल साइज़ को कम करें.

डेटा कंप्रेशन 101

अपनी वेबसाइट को इस तरह सेट अप कर लेने के बाद कि इस्तेमाल न किए जा रहे संसाधन डाउनलोड न हों, अगला चरण उन बचे हुए संसाधनों को कंप्रेस करना है जिन्हें ब्राउज़र से डाउनलोड करना है. रिसॉर्स टाइप, जैसे कि टेक्स्ट, इमेज, फ़ॉन्ट वगैरह के आधार पर, चुनने के लिए कई अलग-अलग तकनीकें हैं: वेब सर्वर पर चालू किए जा सकने वाले सामान्य टूल, खास तरह के कॉन्टेंट के लिए प्री-प्रोसेसिंग ऑप्टिमाइज़ेशन, और ऐसे संसाधन के हिसाब से ऑप्टिमाइज़ेशन जिनमें डेवलपर से इनपुट ज़रूरी होता है.

सबसे अच्छा परफ़ॉर्मेंस डिलीवर करने के लिए, नीचे दी गई सभी तकनीकों का इस्तेमाल करना ज़रूरी है:

  • कंप्रेशन वह प्रक्रिया है जिसमें कम बिट का इस्तेमाल करके, जानकारी को कोड में बदला जाता है.
  • गैर-ज़रूरी डेटा को हटाने से हमेशा सबसे अच्छे नतीजे मिलते हैं.
  • कई अलग-अलग कंप्रेशन तकनीकें और एल्गोरिदम होते हैं.
  • आपको सबसे अच्छा कंप्रेशन हासिल करने के लिए कई तकनीकों की ज़रूरत होगी.

डेटा का साइज़ कम करने की प्रोसेस को डेटा कंप्रेशन कहते हैं. कई लोगों ने कंप्रेशन अनुपात, कंप्रेशन स्पीड, और अलग-अलग कंप्रेशन एल्गोरिदम के लिए ज़रूरी मेमोरी को बेहतर बनाने के लिए एल्गोरिदम, तकनीकों, और ऑप्टिमाइज़ेशन का योगदान दिया है.

डेटा कंप्रेशन के बारे में पूरी चर्चा इस गाइड के दायरे से बाहर है. हालांकि, यह समझना ज़रूरी है कि बड़े स्तर पर, कंप्रेशन कैसे काम करता है और उन अलग-अलग एसेट के साइज़ को कम करने के लिए तकनीकों का इस्तेमाल कैसे किया जा सकता है जिनकी आपके पेजों को ज़रूरत है.

इन तकनीकों के मुख्य सिद्धांतों को समझाने के लिए, एक ऐसे आसान टेक्स्ट मैसेज फ़ॉर्मैट को ऑप्टिमाइज़ करने की प्रोसेस पर विचार करें जिसे सिर्फ़ इस उदाहरण के लिए बनाया गया था:

# Below is a secret message, which consists of a set of headers in
# key-value format followed by a newline and the encrypted message.
format: secret-cipher
date: 08/25/16
AAAZZBBBBEEEMMM EEETTTAAA
  1. मैसेज में मनचाहे तरीके से दिखाए जाने वाले एनोटेशन हो सकते हैं. इन्हें कभी-कभी टिप्पणियां भी कहा जाता है. इन्हें "#" प्रीफ़िक्स के साथ दिखाया जाता है. व्याख्या से मैसेज के मतलब या उसके व्यवहार पर कोई असर नहीं पड़ता.
  2. मैसेज में headers हो सकते हैं. ये की-वैल्यू पेयर होते हैं (पिछले उदाहरण में ":" से अलग किए गए) जो मैसेज की शुरुआत में दिखते हैं.
  3. मैसेज में, टेक्स्ट पेलोड शामिल होते हैं.

पिछले मैसेज के साइज़ को कम करने के लिए, क्या किया जा सकता है? यह मैसेज, 200 वर्णों से शुरू होता है?

  1. टिप्पणी दिलचस्प है, लेकिन इससे मैसेज के मतलब पर कोई असर नहीं पड़ता. संदेश प्रेषित करते समय इसे हटा दें.
  2. किसी असरदार तरीके से हेडर को कोड में बदलने की कई अच्छी तकनीकें हैं. उदाहरण के लिए, अगर आपको पता है कि सभी मैसेज में "फ़ॉर्मैट" और "तारीख" हैं, तो उन्हें छोटे-छोटे पूर्णांक आईडी में बदलकर भेजें. हालांकि, ऐसा हो सकता है कि यह सही न हो, इसलिए बेहतर होगा कि फ़िलहाल आप इस बात को न मानें.
  3. पेलोड में सिर्फ़ टेक्स्ट शामिल है. हालांकि, हमें नहीं पता कि इसका कॉन्टेंट क्या है (ज़ाहिर तौर पर, इसमें "secret-cipher" का इस्तेमाल किया जा रहा है), लेकिन टेक्स्ट को देखने से पता चलता है कि इसमें बहुत सारी चीज़ें हैं. बार-बार पत्र भेजने के बजाय, आपको सिर्फ़ दोहराए जाने वाले अक्षरों की गिनती करनी होगी और उन्हें बेहतर तरीके से कोड में बदलना होगा. उदाहरण के लिए, "AAA", "3A" हो जाता है, जो तीन A के क्रम को दिखाता है.

इन तकनीकों को मिलाने पर यह नतीजा मिलता है:

format: secret-cipher
date: 08/25/16
3A2Z4B3E3M 3E3T3A

नया मैसेज 56 वर्णों का है. इसका मतलब है कि आपने ओरिजनल मैसेज को 72% कंप्रेस कर दिया है. यह बहुत बड़ी कमी है!

यह इस बात का एक उदाहरण है कि टेक्स्ट आधारित संसाधनों के ट्रांसफ़र साइज़ को कम करने में कंप्रेशन एल्गोरिदम कैसे असरदार हो सकते हैं. असल में, कंप्रेशन एल्गोरिदम पिछले उदाहरण से कहीं ज़्यादा बेहतर हैं. वेब पर, रिसॉर्स को डाउनलोड करने में लगने वाले समय को काफ़ी कम करने के लिए, कंप्रेशन एल्गोरिदम का इस्तेमाल किया जा सकता है. टेक्स्ट-आधारित एसेट पर कंप्रेशन लागू करने से, वेब पेज संसाधनों को लोड करने में कम समय बिता सकता है. इससे उपयोगकर्ता उन संसाधनों के असर को जल्दी देख सकते हैं, जितना वे कंप्रेस नहीं करते.

छोटा करना: प्री-प्रोसेसिंग और कॉन्टेक्स्ट के हिसाब से ऑप्टिमाइज़ेशन

यहां जिस पहली तकनीक के बारे में बताया गया है वह है छोटा करना. काट-छांट करना, पूरी तरह से कंप्रेशन एल्गोरिदम नहीं है. यह सोर्स कोड में इस्तेमाल किए गए गै़र-ज़रूरी और ग़ैर-ज़रूरी वर्णों को हटाने का एक तरीका है. इससे संसाधनों को इंसानों के लिए पढ़ने लायक बनाने में मदद मिलती है. हालांकि, प्रोडक्शन वेबसाइटों पर उस सोर्स कोड के फ़ंक्शन को बनाए रखने के लिए, उसे पढ़ना ज़रूरी नहीं होता. इससे, वेब पर रिसॉर्स के लोड होने में देरी हो सकती है.

छोटा करना, कॉन्टेंट पर आधारित एक ऐसा ऑप्टिमाइज़ेशन है, जो डिलीवर किए गए संसाधनों का साइज़ कम कर सकता है. ये ऑप्टिमाइज़ेशन, आपके प्रोजेक्ट बनाने और डिप्लॉयमेंट की प्रोसेस के हिस्से के तौर पर सबसे अच्छे तरीके से लागू होते हैं. उदाहरण के लिए, बंडलर आम तौर पर इस्तेमाल किए जाने वाले ऐसे सॉफ़्टवेयर होते हैं जो किसी वेबसाइट पर नए प्रोडक्शन कोड के लागू होने से पहले, संसाधनों को अपने-आप कम से कम कर सकते हैं.

गैर-ज़रूरी या गैर-ज़रूरी डेटा को कंप्रेस करने का सबसे अच्छा तरीका यह है कि उसे हटा दिया जाए. हालांकि, सिर्फ़ आर्बिट्रेरी डेटा ही नहीं मिटाया जा सकता. हालांकि, कुछ मामलों में जहां हमारे पास डेटा फ़ॉर्मैट और उसकी प्रॉपर्टी के बारे में कॉन्टेंट के हिसाब से जानकारी होती है, वहां पेलोड के असल मतलब और उसकी क्षमताओं पर असर डाले बिना, उसका साइज़ काफ़ी कम किया जा सकता है.

<html>
  <head>
    <style>
      /* awesome-container is only used on the landing page */
      .awesome-container {
        font-size: 120%;
      }

      .awesome-container {
        width: 50%;
      }
    </style>
  </head>
  <body>
    <!-- awesome container content: START -->
    <div>
      This is my awesome container, and it is <em>so</em> awesome.
    </div>
    <!-- awesome container content: END -->
    <script>
      awesomeAnalytics(); // Beacon conversion metrics
    </script>
  </body>
</html>

पिछले एचटीएमएल स्निपेट और उसमें मौजूद तीन अलग-अलग तरह के कॉन्टेंट को ध्यान में रखें:

  1. एचटीएमएल मार्कअप.
  2. सीएसएस का इस्तेमाल करके पेज के प्रज़ेंटेशन को पसंद के मुताबिक बनाना.
  3. JavaScript और अन्य बेहतर पेज क्षमताओं को बेहतर बनाने के लिए किया जा सकता है.

मान्य कॉन्टेंट बनाने के लिए, इनमें से हर तरह के कॉन्टेंट के अलग-अलग नियम हैं. इसी तरह, टिप्पणियों के बारे में बताने के लिए अलग-अलग नियम वगैरह भी हैं. हालांकि, सवाल यह है कि "इस पेज का साइज़ कैसे कम किया जा सकता है?"

  • कोड टिप्पणियां डेवलपर के सबसे अच्छे दोस्त होती हैं, लेकिन ब्राउज़र को उनकी ज़रूरत नहीं होती! सीएसएस (/* ... */), एचटीएमएल (<!-- ... -->), और JavaScript (// ...) टिप्पणियों को अलग करने से, पेज और उसके सबरिसॉर्स का कुल ट्रांसफ़र साइज़ कम हो जाता है.
  • किसी "स्मार्ट" सीएसएस कंप्रेसर से यह पता चल सकता है कि हम .awesome-container के लिए, नियम तय करने के गलत तरीके का इस्तेमाल कर रहे हैं. साथ ही, यह किसी दूसरी स्टाइल पर असर डाले बिना, दोनों एलानों को छोटा कर देता है. इससे ज़्यादा बाइट की बचत होती है. सीएसएस नियमों के एक बड़े सेट को हटाने से, इस तरह के अतिरिक्त नियमों को हटाया जा सकता है. हालांकि, ऐसा हो सकता है कि इसे ऐसे तरीके से लागू न किया जा सके जिसे बड़े पैमाने पर लागू किया जा सकता है. इसकी वजह यह है कि सिलेक्टर को अक्सर अलग-अलग कॉन्टेक्स्ट में डुप्लीकेट किया जाता है, जैसे कि मीडिया क्वेरी में.
  • स्पेस और टैब, डेवलपर के लिए एचटीएमएल, सीएसएस, और JavaScript में काम करते हैं. एक अतिरिक्त कंप्रेसर सभी टैब और स्पेस को हटा सकता है. डुप्लीकेट कॉपी हटाने की दूसरी तकनीकों के उलट, इस तरह का ऑप्टिमाइज़ेशन काफ़ी हद तक लागू किया जा सकता है. ऐसा तब तक किया जा सकता है, जब तक पेज को प्रज़ेंट करने के लिए स्पेस या टैब ज़रूरी न हों. उदाहरण के लिए, आपको एचटीएमएल दस्तावेज़ के टेक्स्ट में स्पेस बनाए रखना चाहिए. इनसे यह पक्का होता है कि लोगों को दिखने वाला कॉन्टेंट आसानी से पढ़ा जा सके.
<html><head><style>.awesome-container{font-size:120%;width:50%}</style></head><body><div>This is my awesome container, and it is <em>so</em> awesome.</div><script>awesomeAnalytics()</script></body></html>

पिछले चरणों को लागू करने के बाद, पेज में 516 से 204 वर्ण हो जाते हैं, जो करीब 60% की बचत करता है. हां, लेकिन यह पढ़ने में आसान नहीं होता है, लेकिन इसे इस्तेमाल करने लायक होना ज़रूरी नहीं है. आधुनिक डेवलपमेंट के तरीकों से, आपको अपने सोर्स कोड के अच्छी तरह से फ़ॉर्मैट किए गए और पढ़ने लायक वर्शन को, प्रोडक्शन में शिप किए जाने वाले अच्छे से ऑप्टिमाइज़ किए गए कोड से अलग रखने में मदद मिलती है. सोर्स मैप की मदद से, बदले गए प्रोडक्शन कोड को आसानी से पढ़ा जा सकता है. इससे, प्रोडक्शन में आने वाली गड़बड़ियों को आसानी से हल किया जा सकता है. उपयोगकर्ताओं को बेहतर अनुभव देने के लिए, परफ़ॉर्मेंस को ऑप्टिमाइज़ करने के साथ-साथ डेवलपर को भी अच्छा अनुभव मिल सकता है.

पिछले उदाहरण में एक अहम जानकारी दी गई है: सामान्य मकसद वाला एक कंप्रेसर, जिसे आर्बिट्रेरी टेक्स्ट कंप्रेस करने के लिए डिज़ाइन किया गया है. पिछले उदाहरण में, पेज को कंप्रेस करने का काम बहुत अच्छा हो सकता है. हालांकि, इससे टिप्पणियों को अलग करने, सीएसएस के नियमों को छोटा करने या कई तरह के कॉन्टेंट के लिए बने कई ऑप्टिमाइज़ेशन की जानकारी नहीं मिलेगी. इसलिए, प्री-प्रोसेसिंग, छोटा करने की सुविधा, और कॉन्टेक्स्ट अवेयर ऑप्टिमाइज़ेशन बहुत ज़रूरी हैं.

इसी तरह, ऊपर बताई गई तकनीकों को सिर्फ़ टेक्स्ट-आधारित एसेट के अलावा, और भी इस्तेमाल किया जा सकता है. इमेज, वीडियो, और दूसरे कॉन्टेंट टाइप में अपने-आप मेटाडेटा और अलग-अलग पेलोड होते हैं. उदाहरण के लिए, जब भी आप किसी कैमरे से कोई तस्वीर लेते हैं, तो उसकी फ़ाइल आम तौर पर बहुत सारी अतिरिक्त जानकारी एम्बेड करती है: कैमरे की सेटिंग, जगह की जानकारी वगैरह. आपके ऐप्लिकेशन के आधार पर, यह डेटा अहम हो सकता है (उदाहरण के लिए, फ़ोटो शेयर करने वाली कोई साइट) या शायद यह पूरी तरह से काम का न हो. आपको सोचना चाहिए कि क्या इसे हटाना सही है. असल में, यह मेटाडेटा हर इमेज के लिए दसियों किलोबाइट तक बढ़ सकता है.

कम शब्दों में कहें, तो अपनी एसेट की परफ़ॉर्मेंस को ऑप्टिमाइज़ करने के पहले चरण के तौर पर, अलग-अलग तरह के कॉन्टेंट की इन्वेंट्री बनाएं. साथ ही, इस बात पर विचार करें कि उनका साइज़ कम करने के लिए, कॉन्टेंट के हिसाब से किस तरह के ऑप्टिमाइज़ेशन का इस्तेमाल किया जा सकता है. इसके बाद, यह पता करने के बाद कि ये क्या हैं, इन ऑप्टिमाइज़ेशन को अपने-आप चलने के लिए अपने बिल्ड और रिलीज़ के चरणों में जोड़ें. इससे यह पक्का होता है कि ऑप्टिमाइज़ेशन, प्रोडक्शन की हर नई रिलीज़ के लिए एक जैसे तरीके से लागू किए गए हैं.

टेक्स्ट को कंप्रेस करने वाले एल्गोरिदम की मदद से

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

  • gzip और Brotli आम तौर पर इस्तेमाल किए जाने वाले कंप्रेशन एल्गोरिदम हैं, जो टेक्स्ट आधारित एसेट: सीएसएस, JavaScript, और एचटीएमएल पर सबसे अच्छा परफ़ॉर्म करते हैं.
  • सभी आधुनिक ब्राउज़र gzip और Brotli कंप्रेस करने के साथ काम करते हैं. साथ ही, वे Accept-Encoding एचटीटीपी अनुरोध के हेडर में दोनों के लिए काम करते हैं.
  • कंप्रेशन चालू करने के लिए आपके सर्वर को कॉन्फ़िगर करना ज़रूरी है. वेब सर्वर सॉफ़्टवेयर अक्सर मॉड्यूल को डिफ़ॉल्ट रूप से, टेक्स्ट पर आधारित रिसॉर्स को कंप्रेस करने में मदद करता है.
  • gzip और Brotli को कंप्रेस करने के लेवल को अडजस्ट करके, कंप्रेशन अनुपात को बेहतर बनाने के लिए इन दोनों को ठीक किया जा सकता है. gzip के लिए, कंप्रेशन सेटिंग 1 से लेकर 9 तक होती हैं, जिसमें 9 सबसे बेहतरीन होती हैं. ब्रॉटली के लिए, यह रेंज 0 से 11 है और 11 सबसे अच्छी हैं. हालांकि, हाई कंप्रेशन सेटिंग के लिए ज़्यादा समय लगता है. ऐसे रिसॉर्स जो डाइनैमिक तौर पर कंप्रेस किए गए होते हैं, यानी कि अनुरोध करने के दौरान, रेंज के बीच में मौजूद सेटिंग की वजह से कंप्रेशन रेशियो और स्पीड के बीच बेहतर फ़ायदा मिलता है. हालांकि, स्टैटिक कंप्रेस किया जा सकता है. ऐसा तब होता है, जब रिस्पॉन्स को समय से पहले कंप्रेस किया जाता है. साथ ही, हर कंप्रेशन एल्गोरिदम के लिए उपलब्ध सबसे एग्रेसिव कंप्रेशन सेटिंग का इस्तेमाल किया जा सकता है.
  • कॉन्टेंट डिलीवरी नेटवर्क (सीडीएन) आम तौर पर ज़रूरी शर्तें पूरी करने वाले संसाधनों को अपने-आप कंप्रेस करने की सुविधा देते हैं. सीडीएन आपके लिए डाइनैमिक और स्टैटिक कंप्रेशन को भी मैनेज कर सकते हैं. इससे आपको कंप्रेशन का एक पहलू कम होता है.

gzip और Bromli ऐसे सामान्य कंप्रेसर हैं जिन्हें बाइट की किसी भी स्ट्रीम पर लागू किया जा सकता है. हुड के तहत, उन्हें पहले से जांची गई कुछ फ़ाइल की सामग्री याद रहती है और बाद में वे असरदार तरीके से डुप्लीकेट डेटा फ़्रैगमेंट को ढूंढने और बदलने की कोशिश करते हैं.

gzip और Brotli, दोनों ही टेक्स्ट-आधारित कॉन्टेंट पर सबसे अच्छा परफ़ॉर्म करते हैं. इससे अक्सर बड़ी फ़ाइलों के लिए 70-90% तक की कंप्रेशन दर हासिल की जाती है. हालांकि, इन एल्गोरिदम एसेट को चलाने के लिए, जिन्हें पहले से ही वैकल्पिक एल्गोरिदम का इस्तेमाल करके कंप्रेस किया गया है. उदाहरण के लिए, कम या नुकसान पहुंचाने वाली कंप्रेशन तकनीक का इस्तेमाल करने वाले ज़्यादातर इमेज फ़ॉर्मैट का इस्तेमाल करने पर, कोई सुधार नहीं होता.

सभी मॉडर्न ब्राउज़र, Accept-Encoding एचटीटीपी अनुरोध के हेडर में gzip और Brotli के साथ काम करने से जुड़े विज्ञापन दिखाते हैं. हालांकि, यह पक्का करना सर्वर देने वाली कंपनी की ज़िम्मेदारी है कि क्लाइंट के अनुरोध करने पर, वेब सर्वर को कंप्रेस किए गए संसाधन को दिखाने के लिए सही तरीके से कॉन्फ़िगर किया गया हो.

फ़ाइल एल्‍गोरि‍दम असंपीड़ित आकार संपीडित आकार कंप्रेशन का अनुपात
कोणीय-1.8.3.js ब्रॉटली 1,346 केआईबी 256 केआईबी 81%
कोणीय-1.8.3.js gzip 1,346 केआईबी 329 केआईबी 76%
कोणीय-1.8.3.min.js ब्रॉटली 173 केआईबी 53 केआईबी 69%
कोणीय-1.8.3.min.js gzip 173 केआईबी 60 केआईबी 65%
jquery-3.7.1.js ब्रॉटली 302 केआईबी 69 केआईबी 77%
jquery-3.7.1.js gzip 302 केआईबी 83 केआईबी 73%
jquery-3.7.1.min.js ब्रॉटली 85 केआईबी 27 केआईबी 68%
jquery-3.7.1.min.js gzip 85 केआईबी 30 केआईबी 65%
lodash-4.17.21.js ब्रॉटली 531 केआईबी 73 केआईबी 86%
lodash-4.17.21.js gzip 531 केआईबी 94 केआईबी 82%
lodash-4.17.21.min.js ब्रॉटली 71 केआईबी 23 केआईबी 68%
lodash-4.17.21.min.js gzip 71 केआईबी 25 केआईबी 65%

ऊपर दी गई टेबल से पता चलता है कि Brotli और gzip संपीड़न, दोनों ही कुछ मशहूर JavaScript लाइब्रेरी को होने वाली बचत बता सकते हैं. फ़ाइल और एल्गोरिदम के आधार पर बचत 65% से 86% तक हो सकती है. रेफ़रंस के लिए, Brotli और gzip, दोनों की हर फ़ाइल पर ज़्यादा से ज़्यादा कंप्रेशन लेवल लागू किया गया था. जहां भी हो सके, gzip की जगह Brotli को प्राथमिकता दें.

कंप्रेशन को चालू करना, लागू करने के सबसे आसान और असरदार ऑप्टिमाइज़ेशन में से एक है. अगर आपकी वेबसाइट इसका फ़ायदा नहीं उठा रही है, तो आप अपने उपयोगकर्ताओं के लिए परफ़ॉर्मेंस को बेहतर बनाने का एक बड़ा अवसर खो रहे हैं. अच्छी बात यह है कि कई वेब सर्वर डिफ़ॉल्ट कॉन्फ़िगरेशन उपलब्ध कराते हैं, जो इस ज़रूरी ऑप्टिमाइज़ेशन को चालू करते हैं. खास तौर पर, सीडीएन इसे इस तरह लागू करने में बहुत असरदार हैं कि कंप्रेस करने की स्पीड और रेशियो को संतुलित रखा जा सके.

कंप्रेशन को देखने का सबसे आसान तरीका यह है कि आप Chrome DevTools खोलें, नेटवर्क पैनल खोलें, अपनी पसंद का कोई पेज लोड करें, और नेटवर्क पैनल के सबसे निचले हिस्से को देखें.

DevTools के असल साइज़ और ट्रांसफ़र साइज़ के बीच तुलना करने के बारे में जानकारी.
Chrome DevTools के नेटवर्क पैनल में दिखाए गए तरीके के बजाय, सभी पेज रिसॉर्स के ट्रांसफ़र साइज़ (यानी कंप्रेस किए गए) के असल साइज़ की तुलना.

पिछली इमेज की तरह ही, आपको भी इसका ब्रेकडाउन दिखेगा:

  • अनुरोधों की संख्या, जो पेज के लिए लोड किए गए रिसॉर्स की संख्या है.
  • सभी अनुरोधों का ट्रांसफ़र साइज़. यह पेज के किसी भी रिसॉर्स पर लागू किए गए कंप्रेशन के असर को दिखाता है.
  • सभी अनुरोधों के संसाधन का साइज़. इससे पता चलता है कि डीकंप्रेस करने के बाद, पेज के लिए बनाए गए रिसॉर्स कितने बड़े होते हैं.

वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी पर असर

परफ़ॉर्मेंस में किए गए सुधारों को तब तक मेज़र नहीं किया जा सकता, जब तक इन सुधारों को दिखाने वाली मेट्रिक न हों. वेबसाइट की परफ़ॉर्मेंस की जानकारी देने वाली पहल, ऐसी मेट्रिक बनाने और उनके बारे में जागरूकता बढ़ाने के लिए की गई है जो उपयोगकर्ता के अनुभव के बारे में बताती हैं. यह मेट्रिक, जैसे कि पेज लोड होने में लगने वाला सामान्य समय, यानी कि पेज लोड होने में लगने वाले समय से अलग होती है. इस तरह की मेट्रिक, उपयोगकर्ता अनुभव की क्वालिटी से साफ़ तौर पर नहीं जुड़ती हैं.

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

  • कम से कम और कंप्रेस किए गए एचटीएमएल रिसॉर्स, एचटीएमएल की लोडिंग को बेहतर बना सकते हैं. इससे सबरिसॉर्स को आसानी से खोजा जा सकता है और उनका लोड होना भी बेहतर होता है. यह किसी पेज के सबसे बड़े कॉन्टेंटफ़ुल पेंट (एलसीपी) के लिए फ़ायदेमंद हो सकता है. हालांकि, rel="preload" जैसे संसाधन संकेतों का इस्तेमाल, संसाधनों को खोजने की योग्यता पर असर डालने के लिए किया जा सकता है. हालांकि, बहुत ज़्यादा संसाधनों का इस्तेमाल करने से बैंडविथ के विवाद से जुड़ी समस्याएं हो सकती हैं. यह पक्का करने से कि नेविगेशन अनुरोध के लिए एचटीएमएल रिस्पॉन्स कंप्रेस कर लिया जाए, उनमें मौजूद संसाधनों को प्रीलोड स्कैनर से जल्द से जल्द खोजा जा सकता है.
  • कंप्रेस करने का इस्तेमाल करके, कुछ एलसीपी कैंडिडेट को जल्दी लोड किया जा सकता है. उदाहरण के लिए, जिन SVG इमेज को एलसीपी के लिए इस्तेमाल किया जाता है उनकी संसाधन लोड होने में लगने वाला समय कम हो सकता है. इसके लिए, टेक्स्ट को कंप्रेस करने की सुविधा का इस्तेमाल करें. यह दूसरी तरह की इमेज के लिए किए जाने वाले ऑप्टिमाइज़ेशन से अलग है. इन ऑप्टिमाइज़ेशन को कंप्रेस करने के दूसरे तरीकों की मदद से असली तरीके से कंप्रेस किया जाता है. जैसे, JPEG इमेज, नुकसान पहुंचाने वाले कंप्रेशन का इस्तेमाल कैसे करते हैं.
  • इसके अलावा, टेक्स्ट नोड एलसीपी उम्मीदवार भी हो सकते हैं. इस गाइड में बताई गई तकनीकें, इस बात पर निर्भर करती हैं कि अपने वेब पेजों पर टेक्स्ट के लिए वेब फ़ॉन्ट का इस्तेमाल किया जा रहा है या नहीं. अगर वेब फ़ॉन्ट का इस्तेमाल किया जा रहा है, तो वेब फ़ॉन्ट ऑप्टिमाइज़ेशन के सबसे सही तरीके लागू होते हैं. हालांकि, अगर वेब फ़ॉन्ट का इस्तेमाल नहीं किया जा रहा है, बल्कि ऐसे सिस्टम फ़ॉन्ट का इस्तेमाल किया जा रहा है जो किसी भी रिसॉर्स लोड होने में लगने वाले समय पर असर डाले बिना दिखते हैं, तो आपकी सीएसएस को कम से कम और कंप्रेस करने से, उसके लोड होने में लगने वाला समय कम हो जाता है. इसका मतलब है कि संभावित एलसीपी टेक्स्ट नोड को रेंडर करने का समय जल्दी हो सकता है.

नतीजा

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

इस बात का ध्यान रखें कि ये प्रोसेस ऑटोमेटेड हों. कम करने की सुविधा के लिए, ज़रूरी शर्तें पूरी करने वाले संसाधनों पर छोटा करने की सुविधा लागू करने के लिए बंडलर का इस्तेमाल करें. पक्का करें कि आपके वेब सर्वर कॉन्फ़िगरेशन पर कंप्रेशन काम करता है. हालांकि, उसके अलावा, सबसे असरदार कंप्रेशन का इस्तेमाल करें. इसे जितना हो सके उतना आसान बनाने के लिए, सीडीएन इस्तेमाल करें. इससे आपके लिए कंप्रेस करना अपने-आप शुरू हो जाता है. ऐसा इसलिए, क्योंकि ये संसाधन न सिर्फ़ आपके लिए कंप्रेस कर सकते हैं, बल्कि बहुत जल्दी भी कर सकते हैं.

इन बेसलाइन परफ़ॉर्मेंस कॉन्सेप्ट को अपनी वेबसाइट के आर्किटेक्चर में शामिल करके, परफ़ॉर्मेंस ऑप्टिमाइज़ेशन के आपके काम अच्छी तरह से पूरे किए जा सकते हैं. साथ ही, बाद के ऑप्टिमाइज़ेशन, बेसलाइन के अच्छे तरीकों की ठोस बुनियाद पर टिके रह सकते हैं.