ডিভাইসে অতিরিক্ত পরিমাণে রিসোর্স ব্যবহার করে এমন বিজ্ঞাপন ব্যবহারকারীর অভিজ্ঞতার উপর নেতিবাচক প্রভাব ফেলে—কর্মক্ষমতা হ্রাসের স্পষ্ট প্রভাব থেকে শুরু করে ব্যাটারি নিষ্কাশন বা ব্যান্ডউইথ ভাতা গ্রহণের মতো অদৃশ্য পরিণতি পর্যন্ত। এই বিজ্ঞাপনগুলি সক্রিয়ভাবে ক্ষতিকারক, যেমন ক্রিপ্টোকারেন্সি মাইনার, থেকে শুরু করে অসাবধানতাবশত বাগ বা কর্মক্ষমতা সমস্যা সহ আসল সামগ্রী পর্যন্ত।
ক্রোম কোনও বিজ্ঞাপনের ব্যবহার করা রিসোর্সের উপর সীমা নির্ধারণ করে এবং সীমা অতিক্রম করলে বিজ্ঞাপনটি আনলোড করে। আরও বিস্তারিত জানার জন্য আপনি Chromium ব্লগে ঘোষণাটি পড়তে পারেন। বিজ্ঞাপন আনলোড করার জন্য ব্যবহৃত প্রক্রিয়া হল Heavy Ad Intervention ।
ভারী বিজ্ঞাপনের মানদণ্ড
কোনও বিজ্ঞাপন যদি ব্যবহারকারী কোনও বিজ্ঞাপনের সাথে ইন্টারঅ্যাক্ট না করে (যেমন, এটিতে ট্যাপ বা ক্লিক না করে) এবং নিম্নলিখিত মানদণ্ডগুলির যেকোনো একটি পূরণ করে তবে তাকে ভারী বলে মনে করা হয়:
- মোট ৬০ সেকেন্ডের বেশি সময় ধরে মূল থ্রেড ব্যবহার করে
- যেকোনো ৩০ সেকেন্ডের উইন্ডোতে ১৫ সেকেন্ডের বেশি সময় ধরে মূল থ্রেড ব্যবহার করে
- ৪ মেগাবাইটের বেশি নেটওয়ার্ক ব্যান্ডউইথ ব্যবহার করে
বিজ্ঞাপন ফ্রেমের যেকোনো ডিসেন্ডেন্ট আইফ্রেমে ব্যবহৃত সমস্ত রিসোর্স সেই বিজ্ঞাপনে হস্তক্ষেপের সীমার মধ্যে গণনা করা হয়। এটা মনে রাখা গুরুত্বপূর্ণ যে মূল থ্রেডের সময়সীমা বিজ্ঞাপন লোড করার পর থেকে অতিবাহিত সময়ের মতো নয়। সীমাটি বিজ্ঞাপনের কোড কার্যকর করতে CPU কত সময় নেয় তার উপর নির্ভর করে।
হস্তক্ষেপ পরীক্ষা করা হচ্ছে
ক্রোম ৮৫-এ এই হস্তক্ষেপটি পাঠানো হয়েছে, তবে ব্যবহারকারীর গোপনীয়তা রক্ষা করার জন্য ডিফল্টভাবে থ্রেশহোল্ডে কিছু শব্দ এবং পরিবর্তনশীলতা যোগ করা হয়েছে।
chrome://flags/#heavy-ad-privacy-mitigations কে Disabled এ সেট করলে সেই সুরক্ষাগুলি সরে যায়, যার অর্থ হল সীমাবদ্ধতাগুলি নির্ধারিতভাবে প্রয়োগ করা হয়, সম্পূর্ণরূপে সীমা অনুসারে। এর ফলে ডিবাগিং এবং পরীক্ষা করা সহজ হবে।
যখন হস্তক্ষেপটি শুরু হবে, তখন আপনি আইফ্রেমে একটি ভারী বিজ্ঞাপনের কন্টেন্টটি একটি বিজ্ঞাপন সরানো বার্তা দিয়ে প্রতিস্থাপন করতে দেখবেন। আপনি যদি অন্তর্ভুক্ত বিবরণ লিঙ্কটি অনুসরণ করেন, তাহলে আপনি একটি বার্তা দেখতে পাবেন যার ব্যাখ্যা হল: " এই বিজ্ঞাপনটি আপনার ডিভাইসের জন্য অনেক বেশি রিসোর্স ব্যবহার করে, তাই Chrome এটি সরিয়ে দিয়েছে। "
নমুনা কন্টেন্টে প্রয়োগ করা হস্তক্ষেপ আপনি heavy-ads.glitch.me- তে দেখতে পারেন। আপনার নিজস্ব কন্টেন্ট পরীক্ষা করার দ্রুত উপায় হিসেবে আপনি একটি ইচ্ছামত URL লোড করতে এই পরীক্ষা সাইটটিও ব্যবহার করতে পারেন।
পরীক্ষা করার সময় সচেতন থাকুন যে এমন অনেক কারণ রয়েছে যা হস্তক্ষেপ প্রয়োগে বাধা দিতে পারে।
- একই পৃষ্ঠার মধ্যে একই বিজ্ঞাপন পুনরায় লোড করলে সেই সংমিশ্রণটি হস্তক্ষেপ থেকে মুক্ত থাকবে। আপনার ব্রাউজিং ইতিহাস সাফ করা এবং একটি নতুন ট্যাগে পৃষ্ঠাটি খোলা এখানে সাহায্য করতে পারে।
- পৃষ্ঠাটি ফোকাসে থাকে তা নিশ্চিত করুন - পৃষ্ঠাটির ব্যাকগ্রাউন্ডিং (অন্য উইন্ডোতে স্যুইচ করা) পৃষ্ঠার জন্য টাস্ক কিউগুলিকে থামিয়ে দেবে, এবং তাই CPU হস্তক্ষেপ ট্রিগার করবে না।
- পরীক্ষা করার সময় বিজ্ঞাপনের কন্টেন্টে ট্যাপ বা ক্লিক করবেন না তা নিশ্চিত করুন - ব্যবহারকারীর ইন্টারঅ্যাকশন গ্রহণকারী কন্টেন্টের ক্ষেত্রে এই হস্তক্ষেপ প্রযোজ্য হবে না।
তোমার কি করা উচিত?
আপনার সাইটে কোনও তৃতীয় পক্ষের প্রদানকারীর বিজ্ঞাপন দেখান
কোনও পদক্ষেপ নেওয়ার প্রয়োজন নেই, শুধু মনে রাখবেন যে ব্যবহারকারীরা আপনার সাইটে সরানো সীমা অতিক্রমকারী বিজ্ঞাপন দেখতে পেতে পারেন।
আপনি আপনার সাইটে প্রথম পক্ষের বিজ্ঞাপন দেখান অথবা তৃতীয় পক্ষের প্রদর্শনের জন্য বিজ্ঞাপন প্রদান করেন
ভারী বিজ্ঞাপন হস্তক্ষেপের জন্য রিপোর্টিং API-এর মাধ্যমে প্রয়োজনীয় পর্যবেক্ষণ বাস্তবায়ন নিশ্চিত করতে পড়া চালিয়ে যান।
আপনি বিজ্ঞাপন সামগ্রী তৈরি করেন অথবা বিজ্ঞাপন সামগ্রী তৈরির জন্য একটি সরঞ্জাম বজায় রাখেন
আপনার কন্টেন্টের পারফরম্যান্স এবং রিসোর্স ব্যবহারের সমস্যাগুলি কীভাবে পরীক্ষা করবেন তা নিশ্চিত করার জন্য পড়া চালিয়ে যান। আপনার পছন্দের বিজ্ঞাপন প্ল্যাটফর্মগুলির নির্দেশিকাও আপনার উল্লেখ করা উচিত কারণ তারা অতিরিক্ত প্রযুক্তিগত পরামর্শ বা বিধিনিষেধ প্রদান করতে পারে, উদাহরণস্বরূপ, ডিসপ্লে ক্রিয়েটিভের জন্য Google নির্দেশিকা দেখুন। খারাপ পারফর্মেন্সযুক্ত বিজ্ঞাপনগুলিকে বনের মধ্যে পালিয়ে যাওয়া রোধ করতে আপনার লেখকিং সরঞ্জামগুলিতে সরাসরি কনফিগারযোগ্য থ্রেশহোল্ড তৈরি করার কথা বিবেচনা করুন।
একটি বিজ্ঞাপন সরানো হলে কী হবে?
Chrome-এ কোনও হস্তক্ষেপ রিপোর্ট করা হয় যথাযথভাবে নামকরণ করা Reporting API-এর মাধ্যমে যার একটি intervention রিপোর্ট টাইপ থাকে। আপনি Reporting API ব্যবহার করে একটি রিপোর্টিং এন্ডপয়েন্টে POST অনুরোধের মাধ্যমে অথবা আপনার জাভাস্ক্রিপ্টের মধ্যে হস্তক্ষেপ সম্পর্কে অবহিত হতে পারেন।
এই প্রতিবেদনগুলি রুট অ্যাড-ট্যাগযুক্ত আইফ্রেমে এবং এর সমস্ত ডিসেন্ডেন্টে, অর্থাৎ ইন্টারভেনশন দ্বারা আনলোড করা প্রতিটি ফ্রেমে ট্রিগার করা হয়। এর মানে হল যে যদি কোনও বিজ্ঞাপন কোনও তৃতীয় পক্ষের উৎস থেকে আসে, অর্থাৎ একটি ক্রস-সাইট আইফ্রেম, তাহলে প্রতিবেদনটি পরিচালনা করার দায়িত্ব সেই তৃতীয় পক্ষের (উদাহরণস্বরূপ, বিজ্ঞাপন প্রদানকারীর) উপর বর্তায়।
HTTP রিপোর্টের জন্য পৃষ্ঠাটি কনফিগার করতে, প্রতিক্রিয়াটিতে 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"
}
}]
জাভাস্ক্রিপ্ট এপিআই 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 অনুরোধে প্রেরিত JSON এর অনুরূপ:
[
{
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',
},
},
];
হস্তক্ষেপের কারণ নির্ণয় করা
বিজ্ঞাপনের কন্টেন্ট কেবল ওয়েব কন্টেন্ট, তাই আপনার কন্টেন্টের সামগ্রিক কর্মক্ষমতা নিরীক্ষণের জন্য Lighthouse এর মতো টুল ব্যবহার করুন। ফলস্বরূপ অডিটগুলি উন্নতির জন্য ইনলাইন নির্দেশিকা প্রদান করে। আপনি web.dev/fast সংগ্রহও দেখতে পারেন।
আপনার বিজ্ঞাপনটি আরও বিচ্ছিন্ন প্রেক্ষাপটে পরীক্ষা করা আপনার জন্য সহায়ক হতে পারে। আপনি https://heavy-ads.glitch.me-এ কাস্টম URL বিকল্পটি ব্যবহার করে একটি রেডিমেড, বিজ্ঞাপন-ট্যাগযুক্ত আইফ্রেম দিয়ে এটি পরীক্ষা করতে পারেন। বিজ্ঞাপন হিসেবে ট্যাগ করা কন্টেন্ট যাচাই করতে আপনি Chrome DevTools ব্যবহার করতে পারেন। রেন্ডারিং প্যানেলে (তিনটি বিন্দু ⋮ মেনুতে অ্যাক্সেসযোগ্য তারপর আরও সরঞ্জাম > রেন্ডারিং ) " বিজ্ঞাপন ফ্রেম হাইলাইট করুন " নির্বাচন করুন। যদি শীর্ষ-স্তরের উইন্ডোতে বা অন্য কোনও প্রেক্ষাপটে কন্টেন্ট পরীক্ষা করা হয় যেখানে এটি বিজ্ঞাপন হিসেবে ট্যাগ করা হয়নি, তাহলে হস্তক্ষেপ শুরু হবে না, তবে আপনি এখনও থ্রেশহোল্ডের বিরুদ্ধে ম্যানুয়ালি পরীক্ষা করতে পারেন।
একটি ফ্রেমের বিজ্ঞাপনের অবস্থা এলিমেন্টস প্যানেও প্রদর্শিত হয় যেখানে খোলার <iframe> ট্যাগের পরে একটি ad টীকা যোগ করা হয়। এটি ফ্রেম বিভাগের অধীনে অ্যাপ্লিকেশন প্যানেলেও দৃশ্যমান, যেখানে বিজ্ঞাপন-ট্যাগযুক্ত ফ্রেমগুলিতে একটি " বিজ্ঞাপনের অবস্থা " বৈশিষ্ট্য অন্তর্ভুক্ত থাকবে।
নেটওয়ার্ক ব্যবহার
বিজ্ঞাপনটির সামগ্রিক নেটওয়ার্ক কার্যকলাপ দেখতে Chrome DevTools-এ নেটওয়ার্ক প্যানেলটি আনুন। বারবার লোডের উপর ধারাবাহিক ফলাফল পেতে আপনাকে " ক্যাশে অক্ষম করুন " বিকল্পটি চেক করা আছে কিনা তা নিশ্চিত করতে হবে।
পৃষ্ঠার নীচের দিকে থাকা স্থানান্তরিত মানটি আপনাকে পুরো পৃষ্ঠার জন্য স্থানান্তরিত পরিমাণ দেখাবে। বিজ্ঞাপনের সাথে সম্পর্কিত অনুরোধগুলিকে সীমাবদ্ধ রাখতে উপরের ফিল্টার ইনপুটটি ব্যবহার করার কথা বিবেচনা করুন।
যদি আপনি বিজ্ঞাপনের প্রাথমিক অনুরোধটি খুঁজে পান, উদাহরণস্বরূপ, আইফ্রেমের উৎস, তাহলে আপনি অনুরোধের মধ্যে ইনিশিয়েটার ট্যাবটি ব্যবহার করে এটি ট্রিগার করা সমস্ত অনুরোধ দেখতে পারেন।
আকার অনুসারে অনুরোধের সামগ্রিক তালিকা সাজানো অত্যধিক বৃহৎ রিসোর্স সনাক্ত করার একটি ভালো উপায়। সাধারণ অপরাধীদের মধ্যে রয়েছে এমন ছবি এবং ভিডিও যা অপ্টিমাইজ করা হয়নি।
উপরন্তু, নাম অনুসারে সাজানো বারবার অনুরোধ শনাক্ত করার একটি ভালো উপায় হতে পারে। এটি হস্তক্ষেপের সূত্রপাতকারী একটি বৃহৎ সংস্থান নাও হতে পারে, বরং বিপুল সংখ্যক পুনরাবৃত্তিমূলক অনুরোধ যা ক্রমশ সীমা অতিক্রম করে।
সিপিইউ ব্যবহার
DevTools-এর পারফরম্যান্স প্যানেল CPU ব্যবহারের সমস্যা নির্ণয়ে সাহায্য করবে। প্রথম ধাপ হল Capture Settings মেনু খুলুন। CPU-র গতি যতটা সম্ভব কমাতে CPU ড্রপডাউন ব্যবহার করুন। CPU-র জন্য হস্তক্ষেপগুলি উচ্চ-স্তরের ডেভেলপমেন্ট মেশিনের তুলনায় কম-শক্তিসম্পন্ন ডিভাইসগুলিতে ট্রিগার হওয়ার সম্ভাবনা অনেক বেশি।
এরপর, রেকর্ডিং অ্যাক্টিভিটি শুরু করতে রেকর্ড বোতামে ক্লিক করুন। আপনি কখন এবং কতক্ষণ রেকর্ড করবেন তা পরীক্ষা করে দেখতে পারেন, কারণ একটি দীর্ঘ ট্রেস লোড হতে বেশ সময় লাগতে পারে। রেকর্ডিং লোড হয়ে গেলে আপনি উপরের টাইমলাইন ব্যবহার করে রেকর্ডিংয়ের একটি অংশ নির্বাচন করতে পারেন। গ্রাফের ঘন হলুদ, বেগুনি বা সবুজ রঙে ফোকাস করুন যা স্ক্রিপ্টিং, রেন্ডারিং এবং পেইন্টিংকে প্রতিনিধিত্ব করে।
নীচের অংশে Bottom-Up , Call Tree এবং Event Log ট্যাবগুলি ঘুরে দেখুন। Self Time এবং Total Time অনুসারে কলামগুলি সাজানো কোডের বাধাগুলি সনাক্ত করতে সাহায্য করতে পারে।
সংশ্লিষ্ট উৎস ফাইলটিও সেখানে লিঙ্ক করা আছে, তাই আপনি প্রতিটি লাইনের খরচ পরীক্ষা করার জন্য উৎস প্যানেলে এটি অনুসরণ করতে পারেন।
এখানে যে সাধারণ সমস্যাগুলি খুঁজে বের করতে হবে তা হল খারাপভাবে অপ্টিমাইজ করা অ্যানিমেশন যা ক্রমাগত লেআউট এবং পেইন্টিংকে ট্রিগার করে অথবা একটি অন্তর্ভুক্ত লাইব্রেরির মধ্যে লুকানো ব্যয়বহুল ক্রিয়াকলাপ।
ভুল হস্তক্ষেপের রিপোর্ট কিভাবে করবেন
Chrome একটি ফিল্টার তালিকার সাথে রিসোর্স অনুরোধ মিলিয়ে কন্টেন্টকে বিজ্ঞাপন হিসেবে ট্যাগ করে । যদি বিজ্ঞাপন-বহির্ভূত কন্টেন্ট ট্যাগ করা হয়ে থাকে, তাহলে ফিল্টারিং নিয়মের সাথে মিল এড়াতে কোডটি পরিবর্তন করার কথা বিবেচনা করুন। যদি আপনার সন্দেহ হয় যে কোনও হস্তক্ষেপ ভুলভাবে প্রয়োগ করা হয়েছে, তাহলে আপনি এই টেমপ্লেটের মাধ্যমে একটি সমস্যা উত্থাপন করতে পারেন। অনুগ্রহ করে নিশ্চিত করুন যে আপনি হস্তক্ষেপ প্রতিবেদনের একটি উদাহরণ ক্যাপচার করেছেন এবং সমস্যাটি পুনরুত্পাদন করার জন্য একটি নমুনা URL আছে।