प्रीफ़ेच करने की सुविधा से, विज्ञापनों पर क्लिक मिलने की दर (सीटीआर) 30% बढ़ी और सबसे बड़े कॉन्टेंटफ़ुल पेंट की रफ़्तार को भी कैसे बढ़ाया गया.

संसाधनों को प्रीफ़ेच करने से, पेज लोड होने में लगने वाला समय कम हो जाता है. साथ ही, कारोबार की मेट्रिक भी बेहतर होती हैं.

Guilherme Moser de Souza

Thierno Thiam

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

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

इस केस स्टडी में, Terra की यात्रा को लागू करने के बारे में बताया गया है. इसकी वजह से, मोबाइल पर विज्ञापनों के क्लिक मिलने की दर (सीटीआर) में 11% की बढ़ोतरी हुई, डेस्कटॉप पर विज्ञापनों के सीटीआर में 30% की बढ़ोतरी हुई, और सबसे बड़े कॉन्टेंटफ़ुल पेंट (एलसीपी) के समय में 50% की कमी आई.

प्रीफ़ेच करने की रणनीति

प्रीफ़ेच करते कुछ समय हो गया है, लेकिन इसका इस्तेमाल ध्यान से करना ज़रूरी है क्योंकि यह ऐसे संसाधनों के लिए अतिरिक्त बैंडविथ का इस्तेमाल करता है जिनकी तुरंत ज़रूरत नहीं होती. ग़ैर-ज़रूरी डेटा खर्च होने से बचने के लिए, इस तकनीक का इस्तेमाल सोच-समझकर किया जाना चाहिए. Terra के मामले में, लेखों को पहले से फ़ेच किया जाता है. ऐसा तब होता है, जब ये शर्तें पूरी होती हैं:

• प्रीफ़ेच किए गए लेखों के लिंक दिखने की जानकारी: टेरा ने इंटरसेक्शन ऑब्ज़र्वर एपीआई का इस्तेमाल करके, उस सेक्शन के विज्ञापन दिखने से जुड़े आंकड़ों का पता लगाया जिसमें वे लेख मौजूद हैं जिन्हें वे प्रीफ़ेच करना चाहते हैं.
• ज़्यादा डेटा इस्तेमाल करने के लिए सही स्थितियां: जैसा कि पहले बताया गया है, प्रीफ़ेच करने से परफ़ॉर्मेंस बेहतर होती है. हालांकि, इसके लिए ज़्यादा डेटा का इस्तेमाल होता है. ऐसा हर स्थिति में ज़रूरी नहीं होता. बैंडविड्थ को बर्बाद होने से बचाने के लिए, Terra नेटवर्क इन्फ़ॉर्मेशन एपीआई के साथ-साथ डिवाइस मेमोरी एपीआई का इस्तेमाल करता है. इससे यह तय किया जाता है कि अगला लेख फ़ेच करना है या नहीं. टेरा अगला लेख सिर्फ़ तब फ़ेच करता है, जब:
  • कनेक्शन की स्पीड कम से कम 3G हो और डिवाइस में कम से कम 4 जीबी मेमोरी हो,
  • या अगर डिवाइस पर iOS काम कर रहा है.
• सीपीयू का इस्तेमाल न होना: आखिर में, Terra यह जांच करता है कि सीपीयू इस्तेमाल में है या नहीं और requestIdleCallback का इस्तेमाल करके, अतिरिक्त काम कर सकता है या नहीं. यह मुख्य थ्रेड के इस्तेमाल में न होने पर या किसी तय (ज़रूरी नहीं) समयसीमा के अंदर, प्रोसेस किए जाने के लिए कॉलबैक लेता है. इनमें से जो भी पहले होता है वह लागू होता है.

इन शर्तों का पालन करने से यह पक्का होता है कि Terra सिर्फ़ ज़रूरत पड़ने पर डेटा फ़ेच करता है. इससे बैंडविड्थ और बैटरी लाइफ़ बचती है. साथ ही, पहले से लोड किए गए ऐसे डेटा का असर कम होता है जो इस्तेमाल नहीं किया जाता.

इन शर्तों के पूरा होने पर, Terra इन सेक्शन में मौजूद लेखों को पहले से लोड कर लेता है: "मिलता-जुलता कॉन्टेंट" और "आपके लिए सुझाया गया". ये सेक्शन, नीचे नीले रंग में हाइलाइट किए गए हैं.

व्यावसायिक प्रभाव

इस तकनीक के असर को मेज़र करने के लिए, Terra ने सबसे पहले इस सुविधा को लेख वाले पेज के "मिलता-जुलता कॉन्टेंट" सेक्शन में लॉन्च किया. तुलना करने के लिए, UTM कोड की मदद से उन्हें पहले से फ़ेच किए गए और पहले से फ़ेच नहीं किए गए लेखों के बीच अंतर करने में मदद मिली. दो हफ़्ते तक A/B टेस्टिंग करने के बाद, Terra ने "आपके लिए सुझाए गए" सेक्शन में, कॉन्टेंट को पहले से लोड करने की सुविधा जोड़ने का फ़ैसला लिया.

लेखों को पहले से लोड करने की सुविधा की वजह से, विज्ञापन मेट्रिक में कुल बढ़ोतरी हुई. साथ ही, एलसीपी और पहले बाइट में लगने वाले समय (टीटीएफ़बी) में कमी आई:

ध्यान से इस्तेमाल करने पर, पेज को पहले से फ़ेच करने की सुविधा से पेज लोड होने में लगने वाला समय काफ़ी कम हो जाता है. साथ ही, विज्ञापन मेट्रिक बढ़ती हैं और एलसीपी लोड होने में लगने वाला समय कम हो जाता है.

तकनीकी ब्यौरे

प्रीफ़ेच करने की प्रोसेस, क्विकलिंक या Guess.js जैसी लाइब्रेरी के ज़रिए या नए अनुमान नियम एपीआई का इस्तेमाल करके rel=prefetch या rel=preload जैसे संसाधन संकेतों का इस्तेमाल करके की जा सकती है. Terra ने Intersection Observer इंस्टेंस के साथ कम प्राथमिकता वाले fetch API का इस्तेमाल करके, इसे लागू करने का विकल्प चुना है. Terra ने यह विकल्प इसलिए चुना, क्योंकि इससे Safari के साथ काम करने में मदद मिलती है. Safari में, rel=prefetch या Speculation Rules API जैसे प्रीफ़ेच करने के अन्य तरीके अभी काम नहीं करते. साथ ही, Terra की ज़रूरतों के लिए सभी सुविधाओं वाली JavaScript लाइब्रेरी ज़रूरी नहीं थी.

यहां दिया गया JavaScript कोड, Terra के इस्तेमाल किए गए कोड से काफ़ी हद तक मिलता-जुलता है:

function prefetch(nodeLists) {
  // Exclude slow ECTs < 3g
  if (navigator.connection &&
    (navigator.connection.effectiveType === 'slow-2g'
      || navigator.connection.effectiveType === '2g')
  ) {
    return;
  }

  // Exclude low end device which is device with memory <= 2GB
  if (navigator.deviceMemory && navigator.deviceMemory <= 2) {
    return;
  }

  const fetchLinkList = {};

  const observer = new IntersectionObserver(function (entries) {
    entries.forEach(function (entry) {
      if (entry.isIntersecting) {
        if (!fetchLinkList[entry.target.href]) {
          fetchLinkList[entry.target.href] = true;

          fetch(entry.target, {
            priority: 'low'
          });
        }

        observer.unobserve(entry = entry.target);
      }
    });
  });
}

const idleCallback = window.requestIdleCallback || function (cb) {
  let start = Date.now();

  return setTimeout(function () {
    cb({
      didTimeout: false,
      timeRemaining: function () {
        return Math.max(0, 50 - (Date.now() - start));
      }
    });
  }, 1);
}

idleCallback(function () {
  prefetch(nodeLists)
})

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

नतीजा

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

इस काम में योगदान देने के लिए, Terra की इंजीनियरिंग टीम के सदस्यों, गिल्बर्टो कोची, हैरी थियोडोलू, मिगुएल कार्लोस मार्टिनेज़ डायस, बैरी पोलार्ड, जेरेमी वैगनर, लियोनार्डो बेलिनी, और लुक्का पैराडेडा का खास धन्यवाद.