डेटा सेव करने की सुविधा का इस्तेमाल करके, तेज़ और कम डेटा वाले ऐप्लिकेशन डिलीवर करना

Dave Gash

Ilya Grigorik

Jeremy Wagner

Save-Data क्लाइंट संकेत अनुरोध हेडर जो Chrome, Opera, और Yandex ब्राउज़र में उपलब्ध है, डेवलपर को हल्का, ऐसे ऐप्लिकेशन तेज़ी से काम करते हैं जो अपने ब्राउज़र में डेटा बचाने वाले मोड में ऑप्ट-इन करते हैं.

लाइटवेट पेजों की ज़रूरत

हर कोई इस बात से सहमत है कि तेज़ी से काम करने वाले और आसान वेब पेज, उपयोगकर्ताओं को ज़्यादा अनुभव देते हैं अनुभव, कॉन्टेंट को बेहतर तरीके से समझने और उसे बनाए रखने के साथ-साथ, कन्वर्ज़न और रेवेन्यू में बढ़ोतरी हुई है. Google रिसर्च से पता चलता है कि "...ऑप्टिमाइज़ किए गए पेज, मूल पेज की तुलना में चार गुना तेज़ी से लोड होते हैं और 80% पेज का इस्तेमाल करते हैं कम बाइट. ये पेज बहुत तेज़ी से लोड होते हैं, इसलिए हमने 50% की बढ़ोतरी भी देखी इन पेजों पर ट्रैफ़िक में कितनी बढ़ोतरी होती है."

हालांकि, 2G कनेक्शन की संख्या आखिर में अस्वीकार करें, अब भी 2G नेटवर्क का मुख्य नेटवर्क था टेक्नोलॉजी 2015 में. 3G और 4G नेटवर्क की पहुंच और उनकी उपलब्धता बढ़ रही है लेकिन उससे जुड़ी मालिकाना हक की लागत और नेटवर्क की सीमाएं अब भी करोड़ों उपयोगकर्ताओं के लिए एक अहम फ़ैक्टर है.

ये पेज ऑप्टिमाइज़ेशन के लिए अहम तर्क हैं.

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

Save-Data अनुरोध का हेडर

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

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

ब्राउज़र समर्थन

• Chrome 49+, Save-Data विज्ञापन तब दिखाता है, जब उपयोगकर्ता "डेटा बचाने की सेटिंग" को चालू करता है मोबाइल या "डेटा बचाने की सेटिंग" का विकल्प डेस्कटॉप ब्राउज़र पर एक्सटेंशन इंस्टॉल करता है.
• जब उपयोगकर्ता "Opera" को चालू करता है, तो Opera 35+ Save-Data का विज्ञापन करता है टर्बो" डेस्कटॉप पर, या "डेटा की बचत" विकल्प Android ब्राउज़र पर.
• Turbo में Yandex 16.2+ का विज्ञापन, Save-Data का विज्ञापन दिखाता है मोड है डेस्कटॉप या मोबाइल पर चालू है ब्राउज़र से कनेक्ट होता है.

Save-Data सेटिंग का पता लगाया जा रहा है

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

जब उपयोगकर्ता अपने ब्राउज़र में डेटा सेविंग मोड को चालू करता है, तो ब्राउज़र लिंक हो जाता है सभी आउटगोइंग अनुरोधों (एचटीटीपी और एचटीटीपीएस दोनों) के लिए, Save-Data अनुरोध का हेडर. जब तक यह लिखा जाता है, ब्राउज़र हेडर में सिर्फ़ एक *on- टोकन दिखाता है (Save-Data: on), लेकिन अन्य उपयोगकर्ता को जानकारी देने के लिए, आने वाले समय में इस सुविधा को बढ़ाया जा सकता है प्राथमिकताएं.

इसके अलावा, यह पता लगाया जा सकता है कि JavaScript में Save-Data चालू है या नहीं:

if ('connection' in navigator) {
  if (navigator.connection.saveData === true) {
    // Implement data saving operations here.
  }
}

navigator में connection ऑब्जेक्ट की मौजूदगी की जांच की जा रही है ऑब्जेक्ट ज़रूरी है, क्योंकि यह Network Information API को दिखाता है, जो कि Chrome, Android के लिए Chrome, और Samsung इंटरनेट ब्राउज़र में लागू किया जा सकता है. इन्होंने भेजा: वहां आपको सिर्फ़ यह देखना होगा कि navigator.connection.saveData बराबर है या नहीं true, और इस स्थिति में डेटा बचाने वाली किसी भी कार्रवाई को लागू किया जा सकता है.

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

लागू करने के लिए सलाह और सबसे सही तरीके

1. Save-Data का इस्तेमाल करते समय, ऐसे यूज़र इंटरफ़ेस (यूआई) डिवाइस उपलब्ध कराएं जिन पर यह काम करता हो और जिन्हें उपयोगकर्ता ऐक्सेस कर सकें ताकि अलग-अलग ऐप्लिकेशन के बीच आसानी से टॉगल किया जा सके. उदाहरण के लिए:
   • उपयोगकर्ताओं को बताएं कि Save-Data काम करता है और उन्हें इसका इस्तेमाल करने के लिए बढ़ावा दें.
   • यह विकल्प, लोगों को सही प्रॉम्प्ट के साथ मोड पहचानने और चुनने की अनुमति देता है. आसान चालू/बंद बटन या चेकबॉक्स.
   • डेटा बचाने वाला मोड चुनने पर, एलान करना और आसान और साफ़ शब्दों में जानकारी देना को बंद करने और पूरी तरह से वापस चालू करने का तरीका बताएंगे.
2. याद रखें कि लाइटवेट ऐप्लिकेशन कम काम के नहीं हैं. वे नहीं या डेटा को अनदेखा कर दिया जाता है, तो वे और उपयोगकर्ता अनुभव को बेहतर बनाने में मदद मिलती है. जैसे:
   • फ़ोटो गैलरी वाला कोई ऐप्लिकेशन, कम रिज़ॉल्यूशन वाली झलक दिखा सकता है या कम रिज़ॉल्यूशन का इस्तेमाल कर सकता है कोड-हैवी कैरसेल सिस्टम.
   • खोज ऐप्लिकेशन एक बार में कम परिणाम दे सकता है, इसलिए सीमित करें बहुत ज़्यादा मीडिया वाले नतीजे नहीं दिखाए जा सकते या इमेज दिखाने के लिए ज़रूरी डिपेंडेंसी को कम किया जा सकता है पेज.
   • समाचार आधारित साइट कम खबरें दिखा सकती है, कम लोकप्रिय कैटगरी छोड़ सकती है, या मीडिया की छोटी झलक उपलब्ध कराएं.
3. Save-Data अनुरोध के हेडर की जांच करने और उस पर विचार करने के लिए, सर्वर लॉजिक दें चालू होने पर, पेज पर वैकल्पिक और कम शब्दों में जवाब देना — उदाहरण के लिए, इसलिए, ज़रूरी संसाधनों और डिपेंडेंसी की संख्या को कम करें. ज़्यादा असरदार तरीके से रिसॉर्स कंप्रेस करना वगैरह
   • अगर Save-Data हेडर के आधार पर जवाब दिया जा रहा है, तो बताना न भूलें कि उसे Vary सूची — Vary: Save-Data — में जोड़ें अपस्ट्रीम कैश मेमोरी में सेव करती हैं, जिन्हें उन्हें इस वर्शन को कैश मेमोरी में सेव करना चाहिए और सिर्फ़ तब दिखाना चाहिए, जब Save-Data अनुरोध का हेडर मौजूद है. ज़्यादा जानकारी के लिए, सबसे सही तरीके देखें इसके लिए कैश मेमोरी के साथ इंटरैक्शन.
4. अगर किसी सर्विस वर्कर का इस्तेमाल किया जाता है, तो आपका ऐप्लिकेशन यह पता लगा सकता है कि डेटा कब सेव किया जा रहा है विकल्प को चालू करने के लिए, यह पता लगाया जाता है कि Save-Data अनुरोध मौजूद है या नहीं हेडर या navigator.connection.saveData प्रॉपर्टी. अगर यह सुविधा चालू है, तो देखें कि क्या आप फ़ेच करने के अनुरोध को फिर से लिख सकते हैं या पहले से फ़ेच किए गए रिस्पॉन्स का इस्तेमाल करें.
5. Save-Data को अन्य सिग्नल की मदद से बेहतर बनाएं. जैसे, उपयोगकर्ता का कनेक्शन टाइप और टेक्नोलॉजी (NetInfo देखें API). उदाहरण के लिए, आपके पास 2G कनेक्शन पर किसी भी उपयोगकर्ता को सामान्य अनुभव देना चाहते हैं, भले ही Save-Data चालू नहीं है. इसके ठीक उलट, सिर्फ़ इसलिए कि उपयोगकर्ता "तेज़" है 4जी कनेक्शन का मतलब यह नहीं है कि वे डेटा बचाने में रुचि नहीं रखते — क्योंकि उदाहरण के लिए, रोमिंग के समय. साथ ही, आपको दुनिया भर में Save-Data के साथ Device-Memory क्लाइंट सुझाव, इन उपयोगकर्ताओं के हिसाब से और भी बेहतर तरीके से काम करता है सीमित मेमोरी वाले डिवाइस. उपयोगकर्ता के डिवाइस की मेमोरी का विज्ञापन इसमें भी दिखाया जाता है navigator.deviceMemory क्लाइंट हिंट.

रेसिपी

Save-Data से मिलने वाले फ़ायदे सिर्फ़ आपके लिए उपलब्ध हो सकते हैं के साथ. यह दिखाने के लिए कि यह कैसे किया जा सकता है, आइए, इन रणनीतियों का इस्तेमाल करके मामले. इसे पढ़ते समय, आपको खुद के इस्तेमाल के दूसरे उदाहरण दिख सकते हैं. इसलिए, ऐसा हो सकता है कि बेझिझक एक्सपेरिमेंट करें और देखें कि इससे क्या-क्या संभव है!

सर्वर साइड कोड में Save-Data की जांच की जा रही है

हालांकि, JavaScript में Save-Data स्थिति का पता को लगाया जा सकता है. navigator.connection.saveData प्रॉपर्टी की सर्वर साइड पर इसकी पहचान की जाती है और भी बेहतर होता है. कुछ मामलों में JavaScript लागू हो सकता है. साथ ही, सर्वर साइड डिटेक्शन के ज़रिए मार्कअप को क्लाइंट, जो Save-Data के कुछ सबसे फ़ायदेमंद इस्तेमाल के मामलों में शामिल है.

सर्वर साइड कोड में Save-Data हेडर का पता लगाने के लिए खास सिंटैक्स इस्तेमाल की जाने वाली भाषा पर निर्भर करता है, लेकिन बुनियादी आइडिया ऐप्लिकेशन बैक एंड. उदाहरण के लिए, PHP में अनुरोध हेडर $_SERVER सुपरग्लोबल इंडेक्स के लिए अरे HTTP_ से शुरू होता है. इसका मतलब है कि Save-Data हेडर का पता लगाने के लिए $_SERVER["HTTP_SAVE_DATA"] वैरिएबल की मौजूदगी और वैल्यू की जांच की जा रही है पसंद:

// false by default.
$saveData = false;

// Check if the `Save-Data` header exists and is set to a value of "on".
if (isset($_SERVER["HTTP_SAVE_DATA"]) && strtolower($_SERVER["HTTP_SAVE_DATA"]) === "on") {
  // `Save-Data` detected!
  $saveData = true;
}

अगर क्लाइंट को कोई मार्कअप भेजने से पहले यह जांच की जाती है, तो $saveData वैरिएबल में Save-Data स्थिति होगी. साथ ही, यह का इस्तेमाल करें. आइए, इस तरीक़े के कुछ उदाहरण देखते हैं. हम उपयोगकर्ता को भेजे जाने वाले डेटा की सीमा तय करने के लिए इसका इस्तेमाल कैसे कर सकते हैं.

हाई रिज़ॉल्यूशन वाली स्क्रीन के लिए, कम रिज़ॉल्यूशन वाली इमेज इस्तेमाल करें

वेब पर इमेज के लिए, इस्तेमाल के सामान्य उदाहरण में इन दो के सेट में इमेज शामिल की जाती हैं: "स्टैंडर्ड" के लिए एक इमेज स्क्रीन (1x) पर और दूसरी इमेज जो दोगुनी होगी हाई रिज़ॉल्यूशन वाली स्क्रीन के लिए (2x), जैसे कि Retina Display). उच्च स्तर की यह श्रेणी ज़रूरी नहीं है कि रिज़ॉल्यूशन वाली स्क्रीन, ज़्यादा कीमत वाले डिवाइसों तक ही सीमित हों. तेज़ी से सामान्य होता जा रहा है. उन मामलों में जहां आवेदन करने का कम अनुभव होता है नहीं, तो इन इमेज में कम रिज़ॉल्यूशन (1x) वाली इमेज भेजना सही रहेगा का इस्तेमाल करने के लिए, बड़े (2x) वैरिएंट इस्तेमाल करने चाहिए. लक्ष्य हासिल करने के लिए, जब Save-Data हेडर मौजूद है, तो हम सिर्फ़ क्लाइंट को भेजे गए मार्कअप में बदलाव करते हैं:

if ($saveData === true) {
  // Send a low-resolution version of the image for clients specifying `Save-Data`.
  ?><img src="butterfly-1x.jpg" alt="A butterfly perched on a flower."><?php
}
else {
  // Send the usual assets for everyone else.
  ?><img src="butterfly-1x.jpg" srcset="butterfly-2x.jpg 2x, butterfly-1x.jpg 1x" alt="A butterfly perched on a flower."><?php
}

इस्तेमाल का यह उदाहरण इस बात का सबसे अच्छा उदाहरण है कि बजट बनाने में कितनी कम मेहनत लगती है कोई ऐसा व्यक्ति जो खास तौर पर आपसे कम डेटा भेजने के लिए कह रहा हो. अगर आपको बैक एंड पर मार्कअप में बदलाव करके, आप वही नतीजा पा सकते हैं यूआरएल रीराइट मॉड्यूल जैसे कि Apache's का इस्तेमाल करके mod_rewrite. यह लीजिए Google Analytics 4 प्रॉपर्टी को ऑप्टिमाइज़ करके, इस को कॉन्फ़िगरेशन की ज़रूरत नहीं है.

इस कॉन्सेप्ट को सीएसएस background-image प्रॉपर्टी में भी इस्तेमाल किया जा सकता है बस <html> एलिमेंट में क्लास जोड़ना:

<html class="<?php if ($saveData === true): ?>save-data<?php endif; ?>">

यहां से, अपने यहां दिए गए <html> एलिमेंट पर save-data क्लास को टारगेट किया जा सकता है इमेज डिलीवर करने का तरीका बदलने के लिए सीएसएस. लो रिज़ॉल्यूशन वाला बैकग्राउंड भेजा जा सकता है इमेज को हाई रिज़ॉल्यूशन वाली स्क्रीन पर ले जाएं, जैसा कि ऊपर दिए गए एचटीएमएल के उदाहरण में दिखाया गया है या कुछ संसाधनों का इस्तेमाल कर सकते हैं.

गै़र-ज़रूरी तस्वीरों का संग्रह छोड़ें

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

<p>This paragraph is essential content. The image below may be humorous, but it's not critical to the content.</p>
<?php
if ($saveData === false) {
  // Only send this image if `Save-Data` hasn't been detected.
  ?><img src="meme.jpg" alt="One does not simply consume data."><?php
}

इस तकनीक का अपना खास असर हो सकता है, जैसा कि यह इमेज यहां दी गई है:

बेशक, इमेज को छोड़ने की ही संभावना नहीं है. इन विज्ञापनों पर भी कार्रवाई की जा सकती है Save-Data, ताकि दूसरे गैर-ज़रूरी संसाधनों को भेजे जाने से रोका जा सके, जैसे कि कुछ टाइपफ़ेस.

गै़र-ज़रूरी वेब फ़ॉन्ट हटाएं

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

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

उदाहरण के लिए, मान लें कि आपने 'Google Play Store' में Fira Google की ओर से Sans फ़ॉन्ट इस्तेमाल किए जा सकते हैं. Fira Sans एक बेहतरीन बॉडी है फ़ॉन्ट कॉपी कर सकते हैं, लेकिन हो सकता है कि डेटा सेव करने की कोशिश करने वाले उपयोगकर्ताओं के लिए यह ज़रूरी न हो. जोड़ने का Save-Data हेडर के होने पर <html> एलिमेंट की save-data क्लास हम ऐसी स्टाइल लिख सकते हैं जो शुरुआत में गै़र-ज़रूरी टाइपफ़ेस से शुरू होती हैं, लेकिन Save-Data हेडर के मौजूद होने पर, इसे ऑप्ट आउट कर देता है:

/* Opt into web fonts by default. */
p,
li {
  font-family: 'Fira Sans', 'Arial', sans-serif;
}

/* Opt out of web fonts if the `save-Data` class is present. */
.save-data p,
.save-data li {
  font-family: 'Arial', sans-serif;
}

इस तरीके का इस्तेमाल करके, Google Fonts से <link> स्निपेट को छोड़ा जा सकता है क्योंकि ब्राउज़र, अनुमान के हिसाब से सीएसएस रिसॉर्स (जिसमें वेब भी शामिल है) फ़ॉन्ट के लिए) एलिमेंट, स्टाइल शीट में किसी भी संसाधन का इस्तेमाल करते हैं. अगर कोई व्यक्ति किसी Save-Data चालू रहने पर, Fira Sans कभी भी लोड नहीं होंगे, क्योंकि स्टाइल वाले DOM कभी नहीं लोड होंगे उसे शुरू करता है. इसके बजाय, एरियल नई जगह लेगा. यह Fira Sans जितना अच्छा नहीं है, लेकिन यह उन उपयोगकर्ताओं को बेहतर अनुभव दे सकता है जो अपने डेटा प्लान को बेहतर बनाने की कोशिश कर रहे हैं.

खास जानकारी

Save-Data हेडर में ज़्यादा बारीकियां नहीं हैं; वह चालू या बंद हो और उपयोगकर्ताओं को उन सेवाओं के अनुभव के बारे में सेटिंग पर निर्भर करता है, भले ही कोई भी वजह हो.

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

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

Save-Data के बारे में ज़्यादा जानकारी और व्यावहारिक उदाहरणों के लिए, अपनी मदद करें उपयोगकर्ता Save Data.