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

Ilya Grigorik

Jeremy Wagner

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

डेटा कंप्रेस करने की 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. मैसेज में हेडर शामिल हो सकते हैं. ये कुंजी-वैल्यू पेयर होते हैं. ऊपर दिए गए उदाहरण में, इन्हें ":" से अलग किया गया है. ये मैसेज की शुरुआत में दिखते हैं.
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 सबसे अच्छी सेटिंग है. Brotli के लिए, यह रेंज 0 से 11 तक होती है. इसमें 11 सबसे अच्छी वैल्यू है. हालांकि, कंप्रेस करने की ज़्यादा सेटिंग के लिए ज़्यादा समय लगता है. डाइनैमिक तरीके से कंप्रेस किए गए संसाधनों के लिए, अनुरोध के समय रेंज के बीच की सेटिंग, कंप्रेस करने के अनुपात और स्पीड के बीच सबसे अच्छा समझौता करती हैं. हालांकि, स्टैटिक कंप्रेशन किया जा सकता है. इसमें जवाब को पहले से कंप्रेस किया जाता है. इसलिए, यह हर कंप्रेशन एल्गोरिदम के लिए उपलब्ध सबसे बेहतर कंप्रेशन सेटिंग का इस्तेमाल कर सकता है.
• कॉन्टेंट डिलीवरी नेटवर्क (सीडीएन) आम तौर पर, ज़रूरी शर्तें पूरी करने वाले रिसॉर्स को अपने-आप कंप्रेस करने की सुविधा देते हैं. सीडीएन, डाइनैमिक और स्टैटिक कंप्रेशन को भी मैनेज कर सकते हैं. इससे आपको कंप्रेशन के एक पहलू के बारे में चिंता करने की ज़रूरत नहीं होती.

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

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

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

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

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

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

ऊपर दी गई इमेज की तरह, आपको इन चीज़ों की जानकारी दिखेगी:

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

Core Web Vitals पर असर

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

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

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

नतीजा

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

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

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