تبلیغاتی که مقدار نامتناسبی از منابع را روی دستگاه مصرف می‌کنند، بر تجربه کاربر تأثیر منفی می‌گذارند - از اثرات آشکار کاهش عملکرد گرفته تا عواقب کمتر قابل مشاهده مانند تخلیه باتری یا مصرف پهنای باند مجاز. این تبلیغات از مخرب‌های فعال مانند استخراج‌کنندگان ارزهای دیجیتال تا محتوای واقعی با اشکالات سهوی یا مشکلات عملکرد را شامل می‌شود.
Chrome محدودیت‌هایی را برای منابعی که ممکن است یک آگهی استفاده کند تعیین می‌کند و اگر از محدودیت‌ها فراتر رود، آن آگهی را بارگیری می‌کند. برای جزئیات بیشتر می‌توانید اعلامیه را در وبلاگ Chromium بخوانید. مکانیزم مورد استفاده برای تخلیه تبلیغات، مداخله تبلیغاتی سنگین است.
معیارهای تبلیغات سنگین
اگر کاربر با آن تعاملی نداشته باشد (مثلاً روی آن ضربه یا کلیک نکرده باشد) و دارای یکی از معیارهای زیر باشد، تبلیغی سنگین تلقی می شود:
- در مجموع بیش از 60 ثانیه از نخ اصلی استفاده می کند
- از رشته اصلی برای بیش از 15 ثانیه در هر پنجره 30 ثانیه ای استفاده می کند
- از بیش از 4 مگابایت پهنای باند شبکه استفاده می کند
تمام منابعی که توسط هر فریم فریم فریم تبلیغاتی استفاده می‌شوند در مقابل محدودیت‌های مداخله در آن تبلیغ حساب می‌شوند. توجه به این نکته مهم است که محدودیت‌های زمانی موضوع اصلی با زمان سپری شده از زمان بارگذاری تبلیغ یکسان نیست. محدودیت‌ها مربوط به مدت زمانی است که CPU برای اجرای کد آگهی نیاز دارد.
آزمایش مداخله
این مداخله در Chrome 85 ارسال شد، اما به طور پیش‌فرض مقداری نویز و تنوع به آستانه‌ها اضافه شده است تا از حریم خصوصی کاربر محافظت شود.
تنظیم chrome://flags/#heavy-ad-privacy-mitigations روی Disabled این حفاظت‌ها را حذف می‌کند، به این معنی که محدودیت‌ها به طور قطعی و صرفاً بر اساس محدودیت‌ها اعمال می‌شوند. این باید اشکال زدایی و آزمایش را آسان تر کند.
هنگامی که مداخله آغاز شد، باید محتوای موجود در iframe یک آگهی سنگین را با پیام حذف شده آگهی جایگزین کنید. اگر پیوند جزئیات ارائه شده را دنبال کنید، پیامی خواهید دید که توضیح می دهد: " این تبلیغ از منابع بسیار زیادی برای دستگاه شما استفاده می کند، بنابراین Chrome آن را حذف کرد. "
می‌توانید مداخله اعمال شده برای محتوای نمونه را در heavy-ads.glitch.me مشاهده کنید. همچنین می‌توانید از این سایت آزمایشی برای بارگیری یک URL دلخواه به عنوان راهی سریع برای آزمایش محتوای خود استفاده کنید.
هنگام آزمایش توجه داشته باشید که دلایلی وجود دارد که ممکن است از اعمال مداخله جلوگیری کند.
- بارگذاری مجدد همان آگهی در همان صفحه آن ترکیب را از مداخله مستثنی می کند. پاک کردن سابقه مرور و باز کردن صفحه در یک برچسب جدید می تواند در اینجا کمک کند.
- اطمینان حاصل کنید که صفحه در فوکوس باقی می‌ماند - پس‌زمینه کردن صفحه (تغییر به پنجره‌ای دیگر) صف‌های کار را برای صفحه متوقف می‌کند و بنابراین دخالت CPU را آغاز نمی‌کند.
- اطمینان حاصل کنید که در حین آزمایش روی محتوای آگهی ضربه نمی زنید یا کلیک نمی کنید - این مداخله برای محتوایی که هرگونه تعامل کاربر را دریافت می کند اعمال نخواهد شد.
چه کاری باید انجام دهید؟
شما تبلیغاتی را از یک ارائه دهنده شخص ثالث در سایت خود نشان می دهید
هیچ اقدامی لازم نیست، فقط توجه داشته باشید که کاربران ممکن است تبلیغاتی را ببینند که از محدودیت‌های حذف شده فراتر می‌روند.
شما تبلیغات شخص اول را در سایت خود نشان می دهید یا تبلیغاتی را برای نمایش شخص ثالث ارائه می دهید
برای اطمینان از اجرای نظارت لازم از طریق گزارش API برای مداخلات تبلیغاتی سنگین، به خواندن ادامه دهید.
شما محتوای تبلیغاتی ایجاد می کنید یا ابزاری را برای ایجاد محتوای تبلیغاتی نگهداری می کنید
به خواندن ادامه دهید تا مطمئن شوید که از نحوه آزمایش محتوای خود برای مشکلات عملکرد و استفاده از منابع آگاه هستید. همچنین باید به راهنمای پلت‌فرم‌های تبلیغاتی انتخابی خود رجوع کنید، زیرا ممکن است توصیه‌ها یا محدودیت‌های فنی بیشتری ارائه دهند، به عنوان مثال، دستورالعمل‌های Google برای خلاقیت‌های نمایشی را ببینید. ایجاد آستانه‌های قابل تنظیم مستقیماً در ابزارهای تألیف خود را در نظر بگیرید تا از انتشار تبلیغات ضعیف به دنیای وحشی جلوگیری کنید.
وقتی یک تبلیغ حذف می شود چه اتفاقی می افتد؟
یک مداخله در Chrome از طریق API گزارش دهی مناسب با نوع گزارش intervention گزارش می شود. می توانید از Reporting API استفاده کنید تا از مداخلات با درخواست POST به نقطه پایانی گزارش یا در جاوا اسکریپت خود مطلع شوید.
این گزارش‌ها بر روی iframe با برچسب تبلیغ ریشه به همراه همه فرزندان آن، یعنی هر فریمی که توسط مداخله بارگیری می‌شود، فعال می‌شوند. این بدان معنی است که اگر یک تبلیغ از منبع شخص ثالث، یعنی یک iframe متقابل سایت باشد، مسئولیت رسیدگی به گزارش بر عهده شخص ثالث (مثلاً ارائه‌دهنده آگهی) است.
برای پیکربندی صفحه برای گزارش‌های 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"
}
}]
API جاوا اسکریپت یک متد observe() را در اختیار ReportingObserver قرار می‌دهد که می‌تواند برای راه‌اندازی یک فراخوان ارائه شده در مداخلات استفاده شود. اگر بخواهید اطلاعات بیشتری را برای کمک به اشکال زدایی به گزارش پیوست کنید، می تواند مفید باشد.
// 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();
با این حال، از آنجایی که مداخله به معنای واقعی کلمه صفحه را از iframe حذف می‌کند، باید یک Failsafe اضافه کنید تا مطمئن شوید که گزارش قطعاً قبل از اینکه صفحه کاملاً از بین برود گرفته می‌شود، به عنوان مثال، یک آگهی در iframe. برای این کار، می توانید همان callback خود را به رویداد 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',
},
},
];
تشخیص علت مداخله
محتوای تبلیغات فقط محتوای وب است، بنابراین از ابزارهایی مانند Lighthouse برای بررسی عملکرد کلی محتوای خود استفاده کنید. ممیزی های حاصل راهنمایی های درون خطی در مورد بهبودها ارائه می دهد. همچنین می توانید به مجموعه web.dev/fast مراجعه کنید.
ممکن است برای شما مفید باشد که تبلیغ خود را در زمینه ای جدا شده آزمایش کنید. می‌توانید از گزینه URL سفارشی در https://heavy-ads.glitch.me استفاده کنید تا این مورد را با یک iframe آماده و دارای برچسب آگهی آزمایش کنید. می‌توانید از Chrome DevTools برای تأیید اعتبار محتوای برچسب‌گذاری شده به عنوان آگهی استفاده کنید. در پانل رندر (قابل دسترسی از طریق منوی سه نقطه ⋮ سپس ابزارهای بیشتر > رندر ) " قاب های تبلیغاتی برجسته " را انتخاب کنید. اگر محتوا را در پنجره سطح بالا یا زمینه دیگری که به عنوان تبلیغ برچسب گذاری نشده است آزمایش کنید، مداخله فعال نمی شود، اما همچنان می توانید به صورت دستی آستانه ها را بررسی کنید.
وضعیت تبلیغ یک فریم نیز در قسمت Elements نمایش داده می‌شود، جایی که حاشیه‌نویسی ad پس از تگ <iframe> باز اضافه می‌شود. این همچنین در پانل برنامه در بخش Frames قابل مشاهده است، جایی که فریم‌های دارای برچسب آگهی دارای ویژگی " وضعیت آگهی " هستند.
استفاده از شبکه
پانل شبکه را در Chrome DevTools بیاورید تا کل فعالیت شبکه را برای آگهی ببینید. شما باید مطمئن شوید که گزینه " غیرفعال کردن کش " علامت زده شده است تا نتایج ثابتی را در بارهای مکرر دریافت کنید.
مقدار انتقال داده شده در پایین صفحه، مبلغ انتقال داده شده برای کل صفحه را به شما نشان می دهد. استفاده از ورودی فیلتر در بالا را در نظر بگیرید تا درخواست‌ها را فقط به درخواست‌های مربوط به آگهی محدود کنید.
اگر درخواست اولیه تبلیغ را پیدا کردید، به عنوان مثال، منبع iframe، می‌توانید از تب Initiator نیز در داخل درخواست استفاده کنید تا همه درخواست‌هایی را که ایجاد می‌کند مشاهده کنید.
مرتب‌سازی فهرست کلی درخواست‌ها بر اساس اندازه، راه خوبی برای شناسایی منابع بیش از حد بزرگ است. مقصرهای رایج شامل تصاویر و ویدیوهایی هستند که بهینه نشده اند.
علاوه بر این، مرتب سازی بر اساس نام می تواند راه خوبی برای تشخیص درخواست های مکرر باشد. ممکن است این یک منبع بزرگ نباشد که مداخله را آغاز کند، بلکه تعداد زیادی درخواست های مکرر است که به تدریج از حد مجاز می گذرد.
استفاده از CPU
پانل عملکرد در DevTools به تشخیص مشکلات استفاده از CPU کمک می کند. اولین قدم باز کردن منوی تنظیمات ضبط است. از منوی کشویی CPU برای کاهش سرعت CPU تا حد امکان استفاده کنید. مداخلات برای CPU به احتمال زیاد در دستگاه‌های کم‌مصرف نسبت به ماشین‌های پیشرفته پیشرفته فعال می‌شوند.
سپس روی دکمه Record کلیک کنید تا فعالیت ضبط شروع شود. ممکن است بخواهید آزمایش کنید که چه زمانی و چه مدت ضبط می کنید، زیرا بارگذاری یک ردیابی طولانی مدت زمان زیادی طول می کشد. هنگامی که ضبط بارگیری شد، می توانید از جدول زمانی بالا برای انتخاب بخشی از ضبط استفاده کنید. روی نواحی روی نمودار به رنگ های زرد، بنفش یا سبز که نشان دهنده اسکریپت، رندر و نقاشی هستند، تمرکز کنید.
برگه‌های Bottom-Up ، Call Tree و Event Log را در پایین کاوش کنید. مرتب سازی آن ستون ها بر اساس زمان خود و زمان کل می تواند به شناسایی تنگناها در کد کمک کند.
فایل منبع مرتبط نیز در آنجا پیوند داده شده است، بنابراین می توانید آن را تا پانل منابع دنبال کنید تا هزینه هر خط را بررسی کنید.
مسائل رایجی که در اینجا باید به دنبال آنها باشید، انیمیشن‌های بهینه‌سازی ضعیفی هستند که طرح‌بندی مداوم و رنگ‌آمیزی یا عملیات پرهزینه‌ای را ایجاد می‌کنند که در یک کتابخانه گنجانده شده پنهان هستند.
نحوه گزارش مداخلات نادرست
Chrome محتوا را با تطبیق درخواست‌های منبع با فهرست فیلتر، محتوا را به‌عنوان یک آگهی برچسب‌گذاری می‌کند . اگر محتوای غیر تبلیغاتی برچسب گذاری شده است، برای جلوگیری از مطابقت با قوانین فیلتر، آن کد را تغییر دهید. اگر مشکوک هستید که مداخله ای اشتباه اعمال شده است، می توانید از طریق این الگو مشکل را مطرح کنید . لطفاً مطمئن شوید که نمونه ای از گزارش مداخله را گرفته اید و یک URL نمونه برای بازتولید مشکل دارید.