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

संसाधनों को प्रीफ़ेच करने से पेज लोड होने का समय बढ़ जाता है और कारोबार की मेट्रिक बेहतर होती हैं.

Guilherme Moser de Souza

Thierno Thiam

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

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

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

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

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

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

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

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

Tera की वेबसाइट पर मौजूद उन दो सेक्शन का स्क्रीनशॉट जिनमें लिंक प्रीफ़ेच किए गए थे. बाईं ओर, 'मिलता-जुलता कॉन्टेंट' सेक्शन को हाइलाइट किया जाता है, जबकि दाईं ओर मौजूद 'आपके लिए सुझाए गए' सेक्शन को हाइलाइट किया जाता है.

कारोबार पर असर

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

लेखों को प्रीफ़ेच करने की वजह से, विज्ञापन मेट्रिक में कुल बढ़ोतरी और एलसीपी में कमी और टाइम टू फ़र्स्ट बाइट (टीटीएफ़बी) का समय देखा गया:

मेट्रिक	मोबाइल	डेस्कटॉप
विज्ञापनों पर क्लिक मिलने की दर (सीटीआर)	+11%	इस साल,
विज्ञापन दिखने से जुड़े आंकड़े	10.5% से ज़्यादा	+6%
एलसीपी	-51% से कम	-73% से कम
टीटीएफ़बी	-83% से ज़्यादा	-84% से ज़्यादा

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

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

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

नीचे दिया गया JavaScript, Tenra के इस्तेमाल किए गए कोड के करीब-करीब बराबर है:

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 फ़ंक्शन को चलाना है.

नतीजा

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

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