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

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. मैसेज में आर्बिट्रेरी एनोटेशन हो सकते हैं—जिन्हें कभी-कभी यह comments—जिन्हें "#" के साथ दिखाया जाता है उपसर्ग. टिप्पणियों से कोई असर नहीं पड़ता मैसेज का मतलब या उसके व्यवहार.
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 दस्तावेज़ में टेक्स्ट हो, ताकि वे पक्का कर सकें कि उपयोगकर्ता, कॉन्टेंट को आसानी से पढ़ सकें नहीं देख पाएगा.

<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 एचटीटीपी अनुरोध का हेडर. हालांकि, यह होस्टिंग सेवा देने वाली कंपनी यह सुनिश्चित करने की ज़िम्मेदारी कि वेब सर्वर क्लाइंट के अनुरोध करने पर कंप्रेस किए गए संसाधन.

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

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

कंप्रेशन को देखने का तुरंत तरीका यह है कि आप Chrome DevTools खोलें, नेटवर्क पैनल में अपनी पसंद का पेज लोड करें. साथ ही, पेज के निचले हिस्से में मौजूद नेटवर्क पैनल.

पिछली इमेज की तरह, आपको इस बारे में जानकारी मिलेगी:

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

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

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

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

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

नतीजा

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

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

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