संसाधनों को प्रीफ़ेच करने से, पेज लोड होने में लगने वाला समय कम हो जाता है. साथ ही, कारोबार की मेट्रिक भी बेहतर होती हैं.
पेज को तेज़ी से लोड करने के लिए, रिसॉर्स या पूरे पेज को पहले से डाउनलोड करने की तकनीक का इस्तेमाल किया जाता है. ऐसा उन रिसॉर्स या पेजों के लिए किया जाता है जिनकी आने वाले समय में ज़रूरत पड़ सकती है. रिसर्च से पता चला है कि पेज लोड होने में लगने वाले कम समय से कन्वर्ज़न रेट बढ़ता है और उपयोगकर्ता अनुभव बेहतर होता है.
Terra, ब्राज़ील का सबसे बड़ा कॉन्टेंट पोर्टल है. इस पर मनोरंजन, खबरें, और खेल-कूद से जुड़ा कॉन्टेंट उपलब्ध है. हर महीने इस पर 63 करोड़ से ज़्यादा यूनीक विज़िटर आते हैं. हमने Terra की इंजीनियरिंग टीम के साथ मिलकर, उनकी वेबसाइट के कुछ सेक्शन पर प्रीफ़ेच करने की तकनीकों का इस्तेमाल करके, लेखों के लोड होने में लगने वाले समय को कम करने के लिए काम किया है.
इस केस स्टडी में, Terra की यात्रा को लागू करने के बारे में बताया गया है. इसकी वजह से, मोबाइल पर विज्ञापनों के क्लिक मिलने की दर (सीटीआर) में 11%, डेस्कटॉप पर विज्ञापनों के सीटीआर में 30%, और सबसे बड़े कॉन्टेंटफ़ुल पेंट (एलसीपी) के समय में 50% की कमी आई.
कॉन्टेंट को पहले से लोड करने की रणनीति
कॉन्टेंट को पहले से लोड करने की सुविधा का इस्तेमाल पिछले कुछ समय से किया जा रहा है. हालांकि, इसका इस्तेमाल सावधानी से करना ज़रूरी है, क्योंकि इससे उन संसाधनों के लिए अतिरिक्त बैंडविड्थ का इस्तेमाल होता है जो तुरंत ज़रूरी नहीं हैं. ग़ैर-ज़रूरी डेटा खर्च होने से बचने के लिए, इस तकनीक का इस्तेमाल सोच-समझकर किया जाना चाहिए. Terra के मामले में, लेखों को पहले से फ़ेच किया जाता है. ऐसा तब होता है, जब ये शर्तें पूरी होती हैं:
- प्रीफ़ेच किए गए लेखों के लिंक दिखना: Terra ने Intersection Observer API का इस्तेमाल करके, उस सेक्शन की व्यूबिलिटी का पता लगाया जिसमें वे लेख मौजूद थे जिन्हें उन्हें प्रीफ़ेच करना था.
- ज़्यादा डेटा इस्तेमाल करने के लिए सही स्थितियां: जैसा कि पहले बताया गया है, प्रीफ़ेच करने से परफ़ॉर्मेंस बेहतर होती है. हालांकि, इसके लिए ज़्यादा डेटा का इस्तेमाल होता है. ऐसा हर स्थिति में ज़रूरी नहीं होता. बैंडविड्थ को बर्बाद होने से बचाने के लिए, Terra नेटवर्क इन्फ़ॉर्मेशन एपीआई के साथ-साथ डिवाइस मेमोरी एपीआई का इस्तेमाल करता है. इससे यह तय किया जाता है कि अगला लेख फ़ेच करना है या नहीं. Terra, अगला लेख सिर्फ़ तब फ़ेच करता है, जब:
- आपके डिवाइस में कम से कम 4 जीबी मेमोरी हो और इंटरनेट कनेक्शन की स्पीड कम से कम 3G हो,
- या अगर डिवाइस पर iOS काम कर रहा है.
- सीपीयू का इस्तेमाल न होना: आखिर में, Terra यह जांच करता है कि सीपीयू इस्तेमाल में है या नहीं और
requestIdleCallback
का इस्तेमाल करके, अतिरिक्त काम कर सकता है या नहीं. यह मुख्य थ्रेड के इस्तेमाल में न होने पर या किसी तय (ज़रूरी नहीं) समयसीमा के अंदर, प्रोसेस किए जाने के लिए कॉलबैक लेता है. इनमें से जो भी पहले होता है वह लागू होता है.
इन शर्तों का पालन करने से यह पक्का होता है कि Terra सिर्फ़ ज़रूरत पड़ने पर डेटा फ़ेच करता है. इससे बैंडविड्थ और बैटरी लाइफ़ बचती है. साथ ही, पहले से लोड किए गए ऐसे डेटा का असर कम होता है जो इस्तेमाल नहीं किया जाता.
इन शर्तों के पूरा होने पर, Terra इन सेक्शन में मौजूद लेखों को पहले से लोड कर लेता है: "मिलता-जुलता कॉन्टेंट" और "आपके लिए सुझाया गया". ये सेक्शन, नीचे नीले रंग से हाइलाइट किए गए हैं.
कारोबार पर असर
इस तकनीक के असर को मेज़र करने के लिए, Terra ने सबसे पहले इस सुविधा को लेख वाले पेज के "मिलता-जुलता कॉन्टेंट" सेक्शन में लॉन्च किया. तुलना करने के लिए, UTM कोड की मदद से उन्हें पहले से फ़ेच किए गए और पहले से फ़ेच नहीं किए गए लेखों के बीच अंतर करने में मदद मिली. दो हफ़्ते तक A/B टेस्टिंग करने के बाद, Terra ने "आपके लिए सुझाए गए" सेक्शन में, कॉन्टेंट को पहले से लोड करने की सुविधा जोड़ने का फ़ैसला लिया.
लेखों को पहले से लोड करने की सुविधा की वजह से, विज्ञापन मेट्रिक में कुल बढ़ोतरी हुई. साथ ही, एलसीपी और पहले बाइट में लगने वाले समय (टीटीएफ़बी) में कमी आई:
ध्यान से इस्तेमाल करने पर, पेज को पहले से फ़ेच करने की सुविधा से पेज लोड होने में लगने वाला समय काफ़ी कम हो जाता है. साथ ही, विज्ञापन मेट्रिक में बढ़ोतरी होती है और एलसीपी लोड होने में लगने वाला समय कम हो जाता है.
तकनीकी ब्यौरे
rel=prefetch
या rel=preload
जैसे संसाधन के संकेत का इस्तेमाल करके, कॉन्टेंट को पहले से लोड किया जा सकता है. इसके अलावा, quicklink या Guess.js जैसी लाइब्रेरी का इस्तेमाल करके या नए Speculation Rules API का इस्तेमाल करके भी ऐसा किया जा सकता है. 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 की इंजीनियरिंग टीम के सदस्यों, गिल्बर्टो कोची, हैरी थियोडोलू, मिगुएल कार्लोस मार्टिनेज़ डायस, बैरी पोलार्ड, जेरेमी वैगनर, लियोनार्डो बेलिनी, और लुक्का पैराडेडा का खास धन्यवाद.