কীভাবে প্রিফেচিং টেরাকে বিজ্ঞাপনের ক্লিক-থ্রু রেট 30% বৃদ্ধি করতে সাহায্য করেছে এবং সবচেয়ে বড় বিষয়বস্তুর পেইন্টের গতি বাড়িয়েছে৷

প্রিফেচিং রিসোর্স পৃষ্ঠা লোডের সময়কে গতি দেয় এবং ব্যবসার মেট্রিক্স উন্নত করে।

Guilherme Moser de Souza

Thierno Thiam

প্রিফেচিং হল রিসোর্স ডাউনলোড করার মাধ্যমে পৃষ্ঠা লোড করার গতি বাড়ানোর জন্য ব্যবহৃত একটি কৌশল—অথবা সম্পূর্ণ পৃষ্ঠাগুলি—যা অদূর ভবিষ্যতে প্রয়োজন হতে পারে। গবেষণায় দেখা গেছে যে দ্রুত লোডের সময় উচ্চতর রূপান্তর হার এবং আরও ভাল ব্যবহারকারীর অভিজ্ঞতা অর্জন করে ।

টেরা হল ব্রাজিলের বৃহত্তম কন্টেন্ট পোর্টালগুলির মধ্যে একটি, প্রতি মাসে 63 মিলিয়নেরও বেশি অনন্য দর্শকদের সাথে বিনোদন, সংবাদ এবং খেলাধুলা অফার করে৷ আমরা Terra এর ইঞ্জিনিয়ারিং টিমের সাথে তাদের ওয়েবসাইটের নির্দিষ্ট বিভাগে প্রিফেচিং কৌশল ব্যবহার করে নিবন্ধগুলির লোডিং সময় উন্নত করতে সহযোগিতা করেছি।

এই কেস স্টাডিতে Terra-এর যাত্রা বাস্তবায়নের বর্ণনা দেওয়া হয়েছে যার ফলে মোবাইলে 11% বিজ্ঞাপন ক্লিক-থ্রু রেট (CTR) বৃদ্ধি পেয়েছে, ডেস্কটপে 30% বিজ্ঞাপন CTR এবং Largest Contentful Paint (LCP) সময়ে 50% হ্রাস পেয়েছে।

প্রিফেচিং কৌশল

কিছু সময়ের জন্য প্রিফেচ করা হয়েছে, কিন্তু এটি সাবধানে ব্যবহার করা গুরুত্বপূর্ণ কারণ এটি অবিলম্বে প্রয়োজনীয় নয় এমন সংস্থানগুলির জন্য অতিরিক্ত ব্যান্ডউইথ ব্যবহার করে৷ অপ্রয়োজনীয় ডেটা ব্যবহার এড়াতে এই কৌশলটি ভেবেচিন্তে প্রয়োগ করা উচিত। টেরার ক্ষেত্রে, নিম্নলিখিত শর্তগুলি পূরণ করা হলে নিবন্ধগুলি প্রিফেচ করা হয়:

প্রিফেচ করা নিবন্ধগুলির লিঙ্কগুলির দৃশ্যমানতা: টেরা যে নিবন্ধগুলিকে তারা প্রিফেচ করতে চেয়েছিল সেগুলি ধারণকারী বিভাগের দর্শনযোগ্যতা সনাক্ত করতে ইন্টারসেকশন অবজারভার API ব্যবহার করেছে৷
বর্ধিত ডেটা ব্যবহারের জন্য অনুকূল অবস্থা: পূর্বে উল্লিখিত হিসাবে, প্রিফেচিং হল একটি অনুমানমূলক কর্মক্ষমতা উন্নতি যা অতিরিক্ত ডেটা ব্যবহার করে এবং এটি প্রতিটি পরিস্থিতিতে একটি পছন্দসই ফলাফল হতে পারে না। ব্যান্ডউইথ নষ্ট হওয়ার সম্ভাবনা কমাতে, টেরা পরবর্তী নিবন্ধটি আনতে হবে কিনা তা নির্ধারণ করতে ডিভাইস মেমরি API সহ নেটওয়ার্ক তথ্য API ব্যবহার করে। টেরা শুধুমাত্র পরবর্তী নিবন্ধটি নিয়ে আসে যখন:
- সংযোগের গতি কমপক্ষে 3G এবং ডিভাইসটিতে কমপক্ষে 4GB মেমরি রয়েছে,
- অথবা যদি ডিভাইসটি iOS চালায়।
CPU নিষ্ক্রিয়: অবশেষে, Terra চেক করে যে CPU নিষ্ক্রিয় আছে কিনা এবং requestIdleCallback ব্যবহার করে অতিরিক্ত কাজ করতে সক্ষম কিনা, যা মূল থ্রেডটি নিষ্ক্রিয় থাকলে বা একটি নির্দিষ্ট (ঐচ্ছিক) সময়সীমার মাধ্যমে প্রক্রিয়া করার জন্য একটি কলব্যাক লাগে—যেটি প্রথমে আসে।

এই শর্তগুলি মেনে চলা নিশ্চিত করে যে Terra শুধুমাত্র প্রয়োজনের সময় ডেটা আনে, যা ব্যান্ডউইথ এবং ব্যাটারির আয়ু বাঁচায় এবং অব্যবহৃত প্রিফেচগুলির প্রভাবকে কমিয়ে দেয়।

যখন এই শর্তগুলি পূরণ হয়, টেরা বিভাগগুলিতে উপস্থিত নিবন্ধগুলিকে প্রিফেট করে: "সম্পর্কিত বিষয়বস্তু" এবং "আপনার জন্য প্রস্তাবিত" নীচে নীল রঙে হাইলাইট করা হয়েছে৷

টেরা ওয়েবসাইটের দুটি বিভাগের একটি স্ক্রিনশট যেখানে লিঙ্কগুলি প্রিফেচ করা হয়েছিল৷ বামদিকে, 'সম্পর্কিত সামগ্রী' বিভাগটি হাইলাইট করা হয়েছে, যেখানে ডানদিকে, 'আপনার জন্য প্রস্তাবিত' বিভাগটি হাইলাইট করা হয়েছে।

ব্যবসায়িক প্রভাব

এই কৌশলটির প্রভাব পরিমাপ করার জন্য, টেরা প্রথম নিবন্ধ পৃষ্ঠার "সম্পর্কিত বিষয়বস্তু" বিভাগে এই বৈশিষ্ট্যটি চালু করেছে। একটি UTM কোড তাদের তুলনার উদ্দেশ্যে প্রিফেচড এবং নন-প্রিফেচড নিবন্ধগুলির মধ্যে পার্থক্য করতে সাহায্য করেছে। দুই সপ্তাহের সফল A/B পরীক্ষার পর, Terra "আপনার জন্য প্রস্তাবিত" বিভাগে প্রিফেচিং কার্যকারিতা যোগ করার সিদ্ধান্ত নিয়েছে।

নিবন্ধগুলি প্রিফেচ করার ফলে, বিজ্ঞাপনের মেট্রিক্সের সামগ্রিক বৃদ্ধি এবং LCP এবং টাইম টু ফার্স্ট বাইট (TTFB) সময় হ্রাস লক্ষ্য করা গেছে:

মেট্রিক	মোবাইল	ডেস্কটপ
বিজ্ঞাপন CTR	+11%	+30%
বিজ্ঞাপন দর্শনযোগ্যতা	+10.5%	+6%
এলসিপি	-51%	-73%
টিটিএফবি	-83%	-84%

প্রিফেচিং—যখন যত্ন সহকারে ব্যবহার করা হয়—পেজ লোডের সময়কে দারুণভাবে উন্নত করে, বিজ্ঞাপনের মেট্রিক্স বাড়ায় এবং LCP সময় কমায়।

প্রযুক্তিগত বিবরণ

রিসোর্স ইঙ্গিত যেমন rel=prefetch বা rel=preload ব্যবহার করে, Quicklink বা Guess.js- এর মতো লাইব্রেরির মাধ্যমে বা নতুন স্পেকুলেশন রুলস API ব্যবহার করে প্রিফেচিং অর্জন করা যেতে পারে। টেরা একটি ইন্টারসেকশন অবজারভার ইনস্ট্যান্সের সাথে কম অগ্রাধিকার সহ fetch API ব্যবহার করে এটি বাস্তবায়ন করতে বেছে নিয়েছে। টেরা এই পছন্দটি করেছে কারণ এটি তাদের সাফারি সমর্থন করার অনুমতি দেয়, যা এখনও rel=prefetch বা স্পেকুলেশন রুলস API-এর মতো অন্যান্য প্রিফেচিং পদ্ধতি সমর্থন করে না এবং টেরার প্রয়োজনের জন্য একটি সম্পূর্ণ বৈশিষ্ট্যযুক্ত জাভাস্ক্রিপ্ট লাইব্রেরি প্রয়োজনীয় ছিল না।

নীচের জাভাস্ক্রিপ্টটি প্রায় টেরা দ্বারা ব্যবহৃত কোডের সমতুল্য:

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 ব্যবহার করে এবং পরবর্তীতে প্রিফেচিংয়ের জন্য একটি তালিকায় URL যোগ করে৷
প্রিফেচ প্রক্রিয়াটি requestIdleCallback এর সাথে নির্ধারিত হয়, যখন মূল থ্রেডটি নিষ্ক্রিয় থাকে তখন prefetch ফাংশনটি চালানোর লক্ষ্য থাকে।

উপসংহার

যত্ন সহকারে ব্যবহার করা হলে, প্রিফেচিং ভবিষ্যতে নেভিগেশন অনুরোধের জন্য লোডের সময়কে উল্লেখযোগ্যভাবে হ্রাস করতে পারে, যার ফলে ব্যবহারকারীর যাত্রায় ঘর্ষণ কমায় এবং ব্যস্ততা বৃদ্ধি পায়। প্রিফেচিংয়ের ফলে অতিরিক্ত বাইট লোড হয় যা ব্যবহার করা যাবে না, তাই টেরা শুধুমাত্র ভাল নেটওয়ার্ক অবস্থার অধীনে এবং সক্ষম ডিভাইসগুলিতে প্রিফেচ করার জন্য অতিরিক্ত পদক্ষেপ নিয়েছিল, যেখানে এই তথ্য পাওয়া যায়।

এই কাজে অবদান রাখার জন্য টেরার ইঞ্জিনিয়ারিং দলের গিলবার্তো কচি, হ্যারি থিওডৌলু, মিগুয়েল কার্লোস মার্টিনেজ ডিয়াজ, ব্যারি পোলার্ড, জেরেমি ওয়াগনার এবং লিওনার্দো বেলিনি এবং লুকা প্যারাডেদাকে বিশেষ ধন্যবাদ৷

Guilherme Moser de Souza

Thierno Thiam

প্রিফেচিং কৌশল

প্রিফেচ করা নিবন্ধগুলির লিঙ্কগুলির দৃশ্যমানতা: টেরা যে নিবন্ধগুলিকে তারা প্রিফেচ করতে চেয়েছিল সেগুলি ধারণকারী বিভাগের দর্শনযোগ্যতা সনাক্ত করতে ইন্টারসেকশন অবজারভার API ব্যবহার করেছে৷
বর্ধিত ডেটা ব্যবহারের জন্য অনুকূল অবস্থা: পূর্বে উল্লিখিত হিসাবে, প্রিফেচিং হল একটি অনুমানমূলক কর্মক্ষমতা উন্নতি যা অতিরিক্ত ডেটা ব্যবহার করে এবং এটি প্রতিটি পরিস্থিতিতে একটি পছন্দসই ফলাফল হতে পারে না। ব্যান্ডউইথ নষ্ট হওয়ার সম্ভাবনা কমাতে, টেরা পরবর্তী নিবন্ধটি আনতে হবে কিনা তা নির্ধারণ করতে ডিভাইস মেমরি API সহ নেটওয়ার্ক তথ্য API ব্যবহার করে। টেরা শুধুমাত্র পরবর্তী নিবন্ধটি নিয়ে আসে যখন:
- সংযোগের গতি কমপক্ষে 3G এবং ডিভাইসটিতে কমপক্ষে 4GB মেমরি রয়েছে,
- অথবা যদি ডিভাইসটি iOS চালায়।
CPU নিষ্ক্রিয়: অবশেষে, Terra চেক করে যে CPU নিষ্ক্রিয় আছে কিনা এবং requestIdleCallback ব্যবহার করে অতিরিক্ত কাজ করতে সক্ষম কিনা, যা মূল থ্রেডটি নিষ্ক্রিয় থাকলে বা একটি নির্দিষ্ট (ঐচ্ছিক) সময়সীমার মাধ্যমে প্রক্রিয়া করার জন্য একটি কলব্যাক লাগে—যেটি প্রথমে আসে।

ব্যবসায়িক প্রভাব

মেট্রিক	মোবাইল	ডেস্কটপ
বিজ্ঞাপন CTR	+11%	+30%
বিজ্ঞাপন দর্শনযোগ্যতা	+10.5%	+6%
এলসিপি	-51%	-73%
টিটিএফবি	-83%	-84%

প্রযুক্তিগত বিবরণ

রিসোর্স ইঙ্গিত যেমন rel=prefetch বা rel=preload ব্যবহার করে, Quicklink বা Guess.js- এর মতো লাইব্রেরির মাধ্যমে বা নতুন স্পেকুলেশন রুলস API ব্যবহার করে প্রিফেচিং অর্জন করা যেতে পারে। টেরা একটি ইন্টারসেকশন পর্যবেক্ষক উদাহরণের সাথে কম অগ্রাধিকার সহ fetch API ব্যবহার করে এটি বাস্তবায়ন করতে বেছে নিয়েছে। টেরা এই পছন্দটি করেছে কারণ এটি তাদের সাফারি সমর্থন করার অনুমতি দেয়, যা এখনও rel=prefetch বা স্পেকুলেশন রুলস API-এর মতো অন্যান্য প্রিফেচিং পদ্ধতি সমর্থন করে না এবং টেরার প্রয়োজনের জন্য একটি সম্পূর্ণ বৈশিষ্ট্যযুক্ত জাভাস্ক্রিপ্ট লাইব্রেরি প্রয়োজনীয় ছিল না।

নীচের জাভাস্ক্রিপ্টটি প্রায় টেরা দ্বারা ব্যবহৃত কোডের সমতুল্য:

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 ব্যবহার করে এবং পরবর্তীতে প্রিফেচিংয়ের জন্য একটি তালিকায় URL যোগ করে৷
প্রিফেচ প্রক্রিয়াটি requestIdleCallback এর সাথে নির্ধারিত হয়, যখন মূল থ্রেডটি নিষ্ক্রিয় থাকে তখন prefetch ফাংশনটি চালানোর লক্ষ্য থাকে।

উপসংহার

Guilherme Moser de Souza

Thierno Thiam

প্রিফেচিং কৌশল

প্রিফেচ করা নিবন্ধগুলির লিঙ্কগুলির দৃশ্যমানতা: টেরা যে নিবন্ধগুলিকে তারা প্রিফেচ করতে চেয়েছিল সেগুলি ধারণকারী বিভাগের দর্শনযোগ্যতা সনাক্ত করতে ইন্টারসেকশন অবজারভার API ব্যবহার করেছে৷
বর্ধিত ডেটা ব্যবহারের জন্য অনুকূল অবস্থা: পূর্বে উল্লিখিত হিসাবে, প্রিফেচিং হল একটি অনুমানমূলক কর্মক্ষমতা উন্নতি যা অতিরিক্ত ডেটা ব্যবহার করে এবং এটি প্রতিটি পরিস্থিতিতে একটি পছন্দসই ফলাফল হতে পারে না। ব্যান্ডউইথ নষ্ট হওয়ার সম্ভাবনা কমাতে, টেরা পরবর্তী নিবন্ধটি আনতে হবে কিনা তা নির্ধারণ করতে ডিভাইস মেমরি API সহ নেটওয়ার্ক তথ্য API ব্যবহার করে। টেরা শুধুমাত্র পরবর্তী নিবন্ধটি নিয়ে আসে যখন:
- সংযোগের গতি কমপক্ষে 3G এবং ডিভাইসটিতে কমপক্ষে 4GB মেমরি রয়েছে,
- অথবা যদি ডিভাইসটি iOS চালায়।
CPU নিষ্ক্রিয়: অবশেষে, Terra চেক করে যে CPU নিষ্ক্রিয় আছে কিনা এবং requestIdleCallback ব্যবহার করে অতিরিক্ত কাজ করতে সক্ষম কিনা, যা মূল থ্রেডটি নিষ্ক্রিয় থাকলে বা একটি নির্দিষ্ট (ঐচ্ছিক) সময়সীমার মাধ্যমে প্রক্রিয়া করার জন্য একটি কলব্যাক লাগে—যেটি প্রথমে আসে।

ব্যবসায়িক প্রভাব

মেট্রিক	মোবাইল	ডেস্কটপ
বিজ্ঞাপন CTR	+11%	+30%
বিজ্ঞাপন দর্শনযোগ্যতা	+10.5%	+6%
এলসিপি	-51%	-73%
টিটিএফবি	-83%	-84%

প্রযুক্তিগত বিবরণ

রিসোর্স ইঙ্গিত যেমন rel=prefetch বা rel=preload ব্যবহার করে, Quicklink বা Guess.js- এর মতো লাইব্রেরির মাধ্যমে বা নতুন স্পেকুলেশন রুলস API ব্যবহার করে প্রিফেচিং অর্জন করা যেতে পারে। টেরা একটি ইন্টারসেকশন পর্যবেক্ষক উদাহরণের সাথে কম অগ্রাধিকার সহ fetch API ব্যবহার করে এটি বাস্তবায়ন করতে বেছে নিয়েছে। টেরা এই পছন্দটি করেছে কারণ এটি তাদের সাফারি সমর্থন করার অনুমতি দেয়, যা এখনও rel=prefetch বা স্পেকুলেশন রুলস API-এর মতো অন্যান্য প্রিফেচিং পদ্ধতি সমর্থন করে না এবং টেরার প্রয়োজনের জন্য একটি সম্পূর্ণ বৈশিষ্ট্যযুক্ত জাভাস্ক্রিপ্ট লাইব্রেরি প্রয়োজনীয় ছিল না।

নীচের জাভাস্ক্রিপ্টটি প্রায় টেরা দ্বারা ব্যবহৃত কোডের সমতুল্য:

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 ব্যবহার করে এবং পরবর্তীতে প্রিফেচিংয়ের জন্য একটি তালিকায় URL যোগ করে৷
প্রিফেচ প্রক্রিয়াটি requestIdleCallback এর সাথে নির্ধারিত হয়, যখন মূল থ্রেডটি নিষ্ক্রিয় থাকে তখন prefetch ফাংশনটি চালানোর লক্ষ্য থাকে।