ভারী বিজ্ঞাপনের হস্তক্ষেপ পরিচালনা করা

Rowan Merewood

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

ক্রোম একটি বিজ্ঞাপন ব্যবহার করতে পারে এমন সংস্থানগুলির সীমা নির্ধারণ করে এবং সীমা অতিক্রম করলে সেই বিজ্ঞাপনটি আনলোড করে৷ আরো বিস্তারিত জানার জন্য আপনি Chromium ব্লগে ঘোষণাটি পড়তে পারেন। বিজ্ঞাপন আনলোড করার জন্য যে প্রক্রিয়াটি ব্যবহার করা হয় তা হল হেভি অ্যাড ইন্টারভেনশন ।

ভারী বিজ্ঞাপনের মানদণ্ড

একটি বিজ্ঞাপন ভারী বলে বিবেচিত হয় যদি ব্যবহারকারী এটির সাথে ইন্টারঅ্যাক্ট না করে থাকে (উদাহরণস্বরূপ, এটিতে ট্যাপ বা ক্লিক করেনি) এবং এটি নিম্নলিখিত মানদণ্ডগুলির যে কোনও একটি পূরণ করে:

• মোট 60 সেকেন্ডের বেশি সময় ধরে প্রধান থ্রেড ব্যবহার করে
• যেকোনো 30 সেকেন্ডের উইন্ডোতে 15 সেকেন্ডের বেশি সময় ধরে মূল থ্রেড ব্যবহার করে
• 4 মেগাবাইটের বেশি নেটওয়ার্ক ব্যান্ডউইথ ব্যবহার করে

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

হস্তক্ষেপ পরীক্ষা

হস্তক্ষেপটি Chrome 85-এ পাঠানো হয়েছে, কিন্তু ডিফল্টরূপে ব্যবহারকারীর গোপনীয়তা রক্ষা করতে থ্রেশহোল্ডে কিছু শব্দ এবং পরিবর্তনশীলতা যোগ করা হয়েছে।

chrome://flags/#heavy-ad-privacy-mitigations অক্ষম করে সেট করা সেই সুরক্ষাগুলিকে সরিয়ে দেয়, যার অর্থ সীমাবদ্ধতাগুলি নির্দিষ্টভাবে প্রয়োগ করা হয়, সম্পূর্ণরূপে সীমা অনুযায়ী৷ এটি ডিবাগিং এবং পরীক্ষা সহজতর করা উচিত।

যখন হস্তক্ষেপ ট্রিগার করা হয় তখন আপনার আইফ্রেমে একটি ভারী বিজ্ঞাপনের বিষয়বস্তু দেখতে হবে যাতে একটি বিজ্ঞাপন সরানো বার্তা দিয়ে প্রতিস্থাপিত হয়। আপনি যদি অন্তর্ভুক্ত বিশদ লিঙ্কটি অনুসরণ করেন তবে আপনি ব্যাখ্যা করে একটি বার্তা দেখতে পাবেন: " এই বিজ্ঞাপনটি আপনার ডিভাইসের জন্য অনেকগুলি সংস্থান ব্যবহার করে, তাই Chrome এটিকে সরিয়ে দিয়েছে। "

আপনি ভারী-ads.glitch.me- এ নমুনা সামগ্রীতে প্রয়োগ করা হস্তক্ষেপ দেখতে পারেন আপনি আপনার নিজের সামগ্রী পরীক্ষা করার দ্রুত উপায় হিসাবে একটি নির্বিচারী URL লোড করতে এই পরীক্ষা সাইটটি ব্যবহার করতে পারেন।

পরীক্ষা করার সময় সচেতন হোন যে এমন অনেক কারণ রয়েছে যা একটি হস্তক্ষেপ প্রয়োগ করা প্রতিরোধ করতে পারে।

• একই পৃষ্ঠার মধ্যে একই বিজ্ঞাপন পুনরায় লোড করা হস্তক্ষেপ থেকে সেই সমন্বয়কে অব্যাহতি দেবে। আপনার ব্রাউজিং ইতিহাস সাফ করা এবং একটি নতুন ট্যাগে পৃষ্ঠাটি খোলা এখানে সাহায্য করতে পারে৷
• নিশ্চিত করুন যে পৃষ্ঠাটি ফোকাসে রয়েছে - পৃষ্ঠাটিকে ব্যাকগ্রাউন্ড করা (অন্য উইন্ডোতে স্যুইচ করা) পৃষ্ঠাটির জন্য টাস্ক সারিগুলিকে বিরতি দেবে এবং তাই CPU হস্তক্ষেপকে ট্রিগার করবে না।
• পরীক্ষা করার সময় বিজ্ঞাপন সামগ্রীতে ট্যাপ বা ক্লিক করবেন না তা নিশ্চিত করুন - কোনও ব্যবহারকারীর ইন্টারঅ্যাকশন গ্রহণ করে এমন সামগ্রীতে হস্তক্ষেপ প্রয়োগ করা হবে না।

আপনি কি করতে হবে?

আপনি আপনার সাইটে তৃতীয় পক্ষের প্রদানকারীর বিজ্ঞাপন দেখান

কোনো পদক্ষেপের প্রয়োজন নেই, শুধু সচেতন থাকুন যে ব্যবহারকারীরা আপনার সাইটে থাকাকালীন সরানো সীমা অতিক্রম করে এমন বিজ্ঞাপন দেখতে পারেন।

আপনি আপনার সাইটে প্রথম পক্ষের বিজ্ঞাপন দেখান বা আপনি তৃতীয় পক্ষের প্রদর্শনের জন্য বিজ্ঞাপন প্রদান করেন

হেভি অ্যাড ইন্টারভেনশনের জন্য রিপোর্টিং এপিআই-এর মাধ্যমে প্রয়োজনীয় মনিটরিং বাস্তবায়ন নিশ্চিত করতে পড়া চালিয়ে যান।

আপনি বিজ্ঞাপন সামগ্রী তৈরি করেন বা আপনি বিজ্ঞাপন সামগ্রী তৈরির জন্য একটি সরঞ্জাম বজায় রাখেন

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

একটি বিজ্ঞাপন সরানো হলে কি হবে?

Chrome-এ একটি হস্তক্ষেপ একটি intervention প্রতিবেদনের প্রকারের সাথে উপযুক্তভাবে নামযুক্ত Reporting API-এর মাধ্যমে রিপোর্ট করা হয়। আপনি রিপোর্টিং এন্ডপয়েন্ট বা আপনার জাভাস্ক্রিপ্টের মধ্যে একটি POST অনুরোধের মাধ্যমে হস্তক্ষেপ সম্পর্কে অবহিত হওয়ার জন্য রিপোর্টিং API ব্যবহার করতে পারেন।

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

এইচটিটিপি রিপোর্টের জন্য পৃষ্ঠাটি কনফিগার করতে, প্রতিক্রিয়াতে Report-To প্রতি শিরোনাম অন্তর্ভুক্ত করা উচিত:

Report-To: { "url": "https://example.com/reports", "max_age": 86400 }

ট্রিগার করা POST অনুরোধে এইরকম একটি প্রতিবেদন অন্তর্ভুক্ত থাকবে:

POST /reports HTTP/1.1
Host: example.com
…
Content-Type: application/report

[{
 "type": "intervention",
 "age": 60,
 "url": "https://example.com/url/of/ad.html",
 "body": {
   "sourceFile": null,
   "lineNumber": null,
   "columnNumber": null,
   "id": "HeavyAdIntervention",
   "message": "Ad was removed because its CPU usage exceeded the limit. See https://www.chromestatus.com/feature/4800491902992384"
 }
}]

JavaScript API ReportingObserver কে একটি observe() পদ্ধতি প্রদান করে যা হস্তক্ষেপে একটি প্রদত্ত কলব্যাক ট্রিগার করতে ব্যবহার করা যেতে পারে। আপনি যদি ডিবাগিং এ সহায়তা করার জন্য প্রতিবেদনে অতিরিক্ত তথ্য সংযুক্ত করতে চান তবে এটি কার্যকর হতে পারে।

// callback that will handle intervention reports
function sendReports(reports) {
  for (let report of reports) {
    // Log the `report` json via your own reporting process
    navigator.sendBeacon('https://report.example/your-endpoint', report);
  }
}

// create the observer with the callback
const observer = new ReportingObserver(
  (reports, observer) => {
    sendReports(reports);
  },
  { buffered: true }
);

// start watching for interventions
observer.observe();

যাইহোক, যেহেতু হস্তক্ষেপটি আইফ্রেম থেকে পৃষ্ঠাটিকে আক্ষরিক অর্থে সরিয়ে দেবে, তাই আপনার একটি ব্যর্থ সেফ যোগ করা উচিত যাতে পৃষ্ঠাটি সম্পূর্ণভাবে চলে যাওয়ার আগে রিপোর্টটি নিশ্চিতভাবে ক্যাপচার করা হয়, উদাহরণস্বরূপ, একটি আইফ্রেমের মধ্যে একটি বিজ্ঞাপন৷ এই জন্য, আপনি pagehide ইভেন্টে আপনার একই কলব্যাক হুক করতে পারেন।

window.addEventListener('pagehide', (event) => {
  // pull all pending reports from the queue
  let reports = observer.takeRecords();
  sendReports(reports);
});

মনে রাখবেন যে, ব্যবহারকারীর অভিজ্ঞতা রক্ষা করার জন্য, pagehide ইভেন্ট এটির মধ্যে ঘটতে পারে এমন কাজের পরিমাণ সীমাবদ্ধ করে। উদাহরণস্বরূপ, রিপোর্টের সাথে একটি fetch() অনুরোধ পাঠানোর চেষ্টা করলে সেই অনুরোধ বাতিল হয়ে যাবে। সেই রিপোর্ট পাঠানোর জন্য আপনার navigator.sendBeacon() ব্যবহার করা উচিত এবং তারপরেও, এটি শুধুমাত্র ব্রাউজার দ্বারা সেরা প্রচেষ্টার গ্যারান্টি নয়।

জাভাস্ক্রিপ্ট থেকে প্রাপ্ত JSON POST অনুরোধে পাঠানোর মতোই:

[
  {
    type: 'intervention',
    url: 'https://example.com/url/of/ad.html',
    body: {
      sourceFile: null,
      lineNumber: null,
      columnNumber: null,
      id: 'HeavyAdIntervention',
      message:
        'Ad was removed because its network usage exceeded the limit. See https://www.chromestatus.com/feature/4800491902992384',
    },
  },
];

হস্তক্ষেপের কারণ নির্ণয় করা

বিজ্ঞাপন বিষয়বস্তু শুধুমাত্র ওয়েব বিষয়বস্তু, তাই আপনার সামগ্রীর সামগ্রিক কর্মক্ষমতা নিরীক্ষণ করতে লাইটহাউসের মতো সরঞ্জামগুলি ব্যবহার করুন৷ ফলস্বরূপ অডিটগুলি উন্নতির জন্য ইনলাইন নির্দেশিকা প্রদান করে। এছাড়াও আপনি web.dev/fast collection দেখতে পারেন।

আরও বিচ্ছিন্ন প্রেক্ষাপটে আপনার বিজ্ঞাপন পরীক্ষা করা আপনার পক্ষে সহায়ক মনে হতে পারে। আপনি https://heavy-ads.glitch.me-এ কাস্টম ইউআরএল বিকল্পটি ব্যবহার করতে পারেন একটি রেডিমেড, বিজ্ঞাপন-ট্যাগযুক্ত iframe দিয়ে এটি পরীক্ষা করতে। বিজ্ঞাপন হিসেবে ট্যাগ করা বিষয়বস্তু যাচাই করতে আপনি Chrome DevTools ব্যবহার করতে পারেন। রেন্ডারিং প্যানেলে (তিনটি ডট ⋮ মেনুর মাধ্যমে অ্যাক্সেসযোগ্য তারপর আরও সরঞ্জাম > রেন্ডারিং ) " হাইলাইট বিজ্ঞাপন ফ্রেমগুলি " নির্বাচন করুন৷ যদি শীর্ষ-স্তরের উইন্ডোতে বা অন্য প্রেক্ষাপটে বিষয়বস্তু পরীক্ষা করা হয় যেখানে এটি একটি বিজ্ঞাপন হিসাবে ট্যাগ করা হয়নি সেখানে হস্তক্ষেপ ট্রিগার করা হবে না, তবে আপনি এখনও থ্রেশহোল্ডগুলির বিরুদ্ধে ম্যানুয়ালি পরীক্ষা করতে পারেন।

একটি ফ্রেমের বিজ্ঞাপনের অবস্থাও এলিমেন্টস প্যানে প্রদর্শিত হয় যেখানে খোলার <iframe> ট্যাগের পরে একটি ad টীকা যোগ করা হয়। এটি ফ্রেম বিভাগের অধীনে অ্যাপ্লিকেশন প্যানেলেও দৃশ্যমান, যেখানে বিজ্ঞাপন-ট্যাগযুক্ত ফ্রেমে একটি " বিজ্ঞাপন স্থিতি " বৈশিষ্ট্য অন্তর্ভুক্ত থাকবে।

নেটওয়ার্ক ব্যবহার

বিজ্ঞাপনের জন্য সামগ্রিক নেটওয়ার্ক কার্যকলাপ দেখতে Chrome DevTools-এ নেটওয়ার্ক প্যানেল আনুন। বারবার লোডের উপর সামঞ্জস্যপূর্ণ ফলাফল পেতে আপনি " ক্যাশে নিষ্ক্রিয় করুন " বিকল্পটি চেক করা হয়েছে তা নিশ্চিত করতে চাইবেন৷

পৃষ্ঠার নীচে স্থানান্তরিত মান আপনাকে সমগ্র পৃষ্ঠার জন্য স্থানান্তরিত পরিমাণ দেখাবে। শুধুমাত্র বিজ্ঞাপনের সাথে সম্পর্কিত অনুরোধগুলিকে সীমাবদ্ধ করতে শীর্ষে ফিল্টার ইনপুট ব্যবহার করার কথা বিবেচনা করুন৷

আপনি যদি বিজ্ঞাপনের জন্য প্রাথমিক অনুরোধ খুঁজে পান, উদাহরণস্বরূপ, iframe-এর উৎস, আপনি অনুরোধের মধ্যে ইনিশিয়েটর ট্যাবটিও ব্যবহার করতে পারেন যাতে এটি ট্রিগার করা সমস্ত অনুরোধ দেখতে পারে।

আকার অনুসারে অনুরোধের সামগ্রিক তালিকা বাছাই করা অত্যধিক বড় সম্পদ খুঁজে বের করার একটি ভাল উপায়। সাধারণ অপরাধীদের মধ্যে এমন ছবি এবং ভিডিও রয়েছে যা অপ্টিমাইজ করা হয়নি।

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

CPU ব্যবহার

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

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

নিচের দিকে বটম-আপ , কল ট্রি এবং ইভেন্ট লগ ট্যাবগুলি অন্বেষণ করুন৷ সেল্ফ টাইম এবং টোটাল টাইম অনুসারে সেই কলামগুলিকে সাজানো কোডে বাধাগুলি সনাক্ত করতে সাহায্য করতে পারে।

সংশ্লিষ্ট উত্স ফাইলটিও সেখানে লিঙ্ক করা আছে, তাই আপনি প্রতিটি লাইনের খরচ পরীক্ষা করতে উত্স প্যানেলে এটি অনুসরণ করতে পারেন।

এখানে দেখার জন্য সাধারণ সমস্যাগুলি হল খারাপভাবে অপ্টিমাইজ করা অ্যানিমেশন যা ক্রমাগত লেআউট এবং পেইন্ট বা ব্যয়বহুল ক্রিয়াকলাপগুলিকে ট্রিগার করছে যা একটি অন্তর্ভুক্ত লাইব্রেরির মধ্যে লুকানো রয়েছে৷

কীভাবে ভুল হস্তক্ষেপের প্রতিবেদন করবেন

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