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

Ilya Grigorik

Jeremy Wagner

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

डेटा कंप्रेस करने के बारे में बुनियादी जानकारी

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

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

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

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

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

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

# 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. मैसेज में हेडलाइन हो सकती हैं. ये हेडलाइन, मैसेज की शुरुआत में दिखती हैं. ये हेडलाइन, कुंजी-वैल्यू पेयर होती हैं. पिछले उदाहरण में, इन्हें ":" से अलग किया गया है.
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% की बचत हुई. यह स्वीकार है कि इसे पढ़ना आसान नहीं है, लेकिन इसे इस्तेमाल करने के लिए ज़रूरी नहीं है कि इसे आसानी से पढ़ा जा सके. डेवलपमेंट के आधुनिक तरीकों की मदद से, सोर्स कोड के अच्छी तरह से फ़ॉर्मैट किए गए और पढ़ने लायक वर्शन को, प्रोडक्शन के लिए भेजे जाने वाले अच्छी तरह से ऑप्टिमाइज़ किए गए कोड से अलग रखा जा सकता है. सोर्स मैप के साथ मिलकर, आपको डेवलपर के तौर पर बेहतर अनुभव मिलता है. साथ ही, उपयोगकर्ता अनुभव के लिए परफ़ॉर्मेंस को ऑप्टिमाइज़ करने में भी मदद मिलती है. सोर्स मैप, आपके ट्रांसफ़ॉर्म किए गए प्रोडक्शन कोड को पढ़ने लायक बनाता है. इससे, प्रोडक्शन में मौजूद गड़बड़ियों को आसानी से हल किया जा सकता है.

ध्यान दें: SVG इमेज, टेक्स्ट पर आधारित एक और संसाधन है. हालांकि, ऊपर दिए गए उदाहरण में इसका इस्तेमाल नहीं किया जा सकता. SVGO जैसे टूल का इस्तेमाल करके, SVG को छोटा और ऑप्टिमाइज़ किया जा सकता है.

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

ध्यान दें: ध्यान दें कि लोकप्रिय फ़्रेमवर्क के बिना कंप्रेस किए गए डेवलपमेंट वर्शन, प्रोडक्शन में इस्तेमाल किए जाने वाले फ़्रेमवर्क से काफ़ी बड़े होते हैं. उदाहरण के लिए, Angular 1.8.3 के डेवलपमेंट वर्शन का साइज़ करीब 1.4 मेगाबाइट है. प्रोडक्शन वर्शन का साइज़ 177 किलोबाइट है. इससे इन ऑप्टिमाइज़ेशन की क्षमता साफ़ तौर पर दिखती है!

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

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

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

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

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

gzip और Brotli, आम तौर पर इस्तेमाल होने वाले कंप्रेसर हैं. इन्हें बाइट की किसी भी स्ट्रीम पर लागू किया जा सकता है. ये एल्गोरिदम, किसी फ़ाइल के पहले से जांचे गए कुछ कॉन्टेंट को याद रखते हैं. इसके बाद, वे डुप्लीकेट डेटा फ़्रैगमेंट को बेहतर तरीके से ढूंढने और बदलने की कोशिश करते हैं.

ध्यान दें:  अगर आपको कंप्रेस करने की सुविधा के काम करने के तरीके के बारे में ज़्यादा जानकारी चाहिए, तो gzip के बारे में कम शब्दों में दी गई यह बेहतरीन जानकारी देखें. अगर आपको टेक्स्ट को कम जगह में सेव करने की सुविधा आज़मानी है, तो gzip और Brotli कोडलैब आज़माएं.

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

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

फ़ाइल	एल्‍गोरि‍दम	बिना कंप्रेस किए साइज़	संपीडित आकार	कंप्रेशन का अनुपात
angular-1.8.3.js	ब्रॉटली	1,346 केआईबी	256 केआईबी	81%
angular-1.8.3.js	gzip	1,346 केआईबी	329 केबी	76%
कोणीय-1.8.3.min.js	Brotli	173 केबी	53 केबी	69%
कोणीय-1.8.3.min.js	gzip	173 केबी	60 केआईबी	65%
jquery-3.7.1.js	Brotli	302 केआईबी	69 केआईबी	77%
jquery-3.7.1.js	gzip	302 केआईबी	83 केआईबी	73%
jquery-3.7.1.min.js	Brotli	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	Brotli	71 केआईबी	23 केआईबी	68%
लोडाश-4.17.21.min.js	gzip	71 केआईबी	25 केआईबी	65%

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

अहम जानकारी: पहले वाली टेबल में यह साफ़ तौर पर बताया गया है कि छोटा करने जैसे ऑप्टिमाइज़ेशन के ऊपर, कंप्रेस करने की प्रोसेस को लागू करने से अतिरिक्त बचत कैसे की जा सकती है. ऐसा हमेशा नहीं होता कि सिर्फ़ कंप्रेस करने से, साइट को छोटा करने के असर का कोई मतलब न बचे. यह एक ऐडिटिव ऑप्टिमाइज़ेशन है.

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

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

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

पिछली इमेज की तरह, आपको यहां ब्रेकडाउन होकर दिखना चाहिए:

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

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

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

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

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

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

नतीजा

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

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

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