تبلیغاتی که مقدار نامتناسبی از منابع دستگاه را مصرف میکنند، بر تجربه کاربر تأثیر منفی میگذارند - از اثرات آشکار کاهش عملکرد گرفته تا عواقب کمتر قابل مشاهده مانند تخلیه باتری یا مصرف پهنای باند. این تبلیغات از تبلیغات مخرب فعال، مانند استخراجکنندگان ارز دیجیتال، تا محتوای واقعی با اشکالات غیرعمدی یا مشکلات عملکردی متغیر است.
کروم محدودیتهایی برای منابعی که یک تبلیغ میتواند استفاده کند تعیین میکند و در صورت تجاوز از این محدودیتها، آن تبلیغ را حذف میکند. برای جزئیات بیشتر میتوانید اطلاعیه را در وبلاگ کرومیوم بخوانید. مکانیزم مورد استفاده برای حذف تبلیغات، Heavy Ad Intervention است.
معیارهای سنگین تبلیغات
یک تبلیغ در صورتی سنگین تلقی میشود که کاربر با آن تعامل نداشته باشد (مثلاً روی آن ضربه نزده یا کلیک نکرده باشد) و هر یک از معیارهای زیر را داشته باشد:
- در مجموع بیش از ۶۰ ثانیه از نخ اصلی استفاده میکند
- در هر پنجره ۳۰ ثانیهای، بیش از ۱۵ ثانیه از نخ اصلی استفاده میکند
- بیش از ۴ مگابایت از پهنای باند شبکه را اشغال میکند
تمام منابعی که توسط هر iframe از فریم تبلیغ استفاده میشود، در برابر محدودیتهای مداخله در آن تبلیغ محاسبه میشود. لازم به ذکر است که محدودیتهای زمانی نخ اصلی با زمان سپری شده از بارگذاری تبلیغ یکسان نیستند. این محدودیتها مربوط به مدت زمانی است که CPU برای اجرای کد تبلیغ صرف میکند.
آزمایش مداخله
این مداخله در کروم ۸۵ ارائه شد، اما به طور پیشفرض مقداری نویز و تغییرپذیری به آستانهها اضافه شده است تا از حریم خصوصی کاربر محافظت شود.
تنظیم chrome://flags/#heavy-ad-privacy-mitigations روی Disabled این محافظتها را از بین میبرد، به این معنی که محدودیتها به صورت قطعی و صرفاً مطابق با محدودیتها اعمال میشوند. این کار باید اشکالزدایی و آزمایش را آسانتر کند.
وقتی مداخله آغاز میشود، باید محتوای داخل iframe مربوط به یک تبلیغ سنگین را با پیام « حذف تبلیغ» جایگزین کنید. اگر روی لینک «جزئیات» کلیک کنید، پیامی خواهید دید که توضیح میدهد: « این تبلیغ از منابع دستگاه شما بیش از حد استفاده میکند، بنابراین کروم آن را حذف کرد. »
میتوانید مداخله اعمال شده روی محتوای نمونه را در heavy-ads.glitch.me مشاهده کنید. همچنین میتوانید از این سایت آزمایشی برای بارگذاری یک URL دلخواه به عنوان روشی سریع برای آزمایش محتوای خود استفاده کنید.
هنگام آزمایش توجه داشته باشید که دلایل متعددی وجود دارد که ممکن است مانع از اعمال مداخله شود.
- بارگذاری مجدد همان تبلیغ در همان صفحه، آن ترکیب را از مداخله معاف میکند. پاک کردن تاریخچه مرور و باز کردن صفحه با یک برچسب جدید میتواند در اینجا مفید باشد.
- مطمئن شوید که صفحه در حالت فوکوس باقی میماند - پسزمینه کردن صفحه (جابجایی به پنجره دیگر) صفهای وظایف صفحه را متوقف میکند و بنابراین باعث مداخله CPU نمیشود.
- مطمئن شوید که هنگام آزمایش، روی محتوای تبلیغاتی ضربه نزنید یا کلیک نکنید - این مداخله روی محتوایی که هیچگونه تعامل کاربر را دریافت میکند، اعمال نخواهد شد.
چه کاری باید انجام دهید؟
شما تبلیغات یک ارائهدهنده شخص ثالث را در سایت خود نمایش میدهید
نیازی به اقدام خاصی نیست، فقط توجه داشته باشید که کاربران ممکن است تبلیغاتی را ببینند که از محدودیتهای حذفشده در سایت شما فراتر رفته باشد.
شما تبلیغات شخص ثالث را در سایت خود نمایش میدهید یا تبلیغاتی را برای نمایش توسط شخص ثالث ارائه میدهید
برای اطمینان از اجرای نظارت لازم از طریق Reporting API برای مداخلات تبلیغاتی سنگین، به خواندن ادامه دهید.
شما محتوای تبلیغاتی ایجاد میکنید یا ابزاری برای ایجاد محتوای تبلیغاتی دارید
برای اطمینان از اینکه از نحوه آزمایش محتوای خود برای مشکلات عملکرد و استفاده از منابع آگاه هستید، به خواندن ادامه دهید. همچنین باید به راهنماییهای موجود در پلتفرمهای تبلیغاتی مورد نظر خود مراجعه کنید زیرا ممکن است توصیههای فنی یا محدودیتهای بیشتری ارائه دهند، به عنوان مثال، به دستورالعملهای گوگل برای نمایش تبلیغات خلاقانه مراجعه کنید. ایجاد آستانههای قابل تنظیم را مستقیماً در ابزارهای نویسندگی خود در نظر بگیرید تا از انتشار تبلیغات با عملکرد ضعیف جلوگیری کنید.
وقتی یک تبلیغ حذف میشود چه اتفاقی میافتد؟
یک مداخله در کروم از طریق API گزارشدهی با نام مناسب Reporting با نوع گزارش intervention گزارش میشود. شما میتوانید از 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) در صورت بروز تداخل (interventions) استفاده شود. این قابلیت در صورتی که بخواهید اطلاعات اضافی را برای کمک به اشکالزدایی به گزارش پیوست کنید، مفید خواهد بود.
// 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 حاصل از جاوا اسکریپت مشابه 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 برای تأیید اعتبار محتوا به عنوان تبلیغ استفاده کنید. در پنل رندرینگ (که از طریق منوی سه نقطه ⋮ و سپس ابزارهای بیشتر > رندرینگ قابل دسترسی است) گزینه « برجسته کردن قابهای تبلیغ » را انتخاب کنید. اگر محتوا را در پنجره سطح بالا یا زمینه دیگری که به عنوان تبلیغ برچسبگذاری نشده است، آزمایش کنید، مداخله آغاز نخواهد شد، اما همچنان میتوانید به صورت دستی آستانهها را بررسی کنید.
وضعیت تبلیغ یک فریم همچنین در پنل عناصر نمایش داده میشود، جایی که یک حاشیهنویسی ad پس از تگ آغازین <iframe> اضافه میشود. این وضعیت همچنین در پنل برنامه در بخش فریمها قابل مشاهده است، جایی که فریمهای دارای برچسب تبلیغ شامل یک ویژگی « وضعیت تبلیغ » میشوند.
استفاده از شبکه
برای مشاهدهی فعالیت کلی شبکه برای تبلیغ، پنل شبکه را در Chrome DevTools باز کنید. برای دریافت نتایج پایدار در بارگذاریهای مکرر، باید مطمئن شوید که گزینهی « غیرفعال کردن حافظهی پنهان » تیک خورده است.
مقدار منتقل شده در پایین صفحه، مبلغ منتقل شده برای کل صفحه را به شما نشان میدهد. میتوانید از ورودی فیلتر در بالا استفاده کنید تا درخواستها را فقط به موارد مرتبط با تبلیغ محدود کنید.
اگر درخواست اولیه برای تبلیغ، مثلاً منبع iframe، را پیدا کردید، میتوانید از تب Initiator در داخل درخواست نیز برای مشاهده تمام درخواستهایی که آن را فعال میکند، استفاده کنید.
مرتبسازی لیست کلی درخواستها بر اساس اندازه، روش خوبی برای تشخیص منابع بیش از حد بزرگ است. مقصران رایج شامل تصاویر و ویدیوهایی هستند که بهینهسازی نشدهاند.
علاوه بر این، مرتبسازی بر اساس نام میتواند راه خوبی برای تشخیص درخواستهای تکراری باشد. ممکن است یک منبع بزرگ واحد باعث مداخله نشود، بلکه تعداد زیادی از درخواستهای تکراری که به تدریج از حد مجاز فراتر میروند، باعث این مشکل شوند.
میزان استفاده از پردازنده
پنل Performance در DevTools به تشخیص مشکلات مربوط به مصرف CPU کمک میکند. اولین قدم باز کردن منوی Capture Settings است. از منوی کشویی CPU برای کاهش سرعت CPU تا حد امکان استفاده کنید. احتمال بروز مداخلات مربوط به CPU در دستگاههای کممصرفتر بسیار بیشتر از دستگاههای توسعه پیشرفته است.
سپس، برای شروع ضبط، روی دکمه ضبط کلیک کنید. شاید بخواهید زمان و مدت زمان ضبط را خودتان آزمایش کنید، زیرا بارگذاری یک مسیر طولانی میتواند زمان زیادی طول بکشد. پس از بارگذاری ضبط، میتوانید از جدول زمانی بالا برای انتخاب بخشی از ضبط استفاده کنید. روی قسمتهایی از نمودار که با رنگ زرد، بنفش یا سبز پررنگ مشخص شدهاند و نشان دهنده اسکریپتنویسی، رندرینگ و نقاشی هستند، تمرکز کنید.
تبهای Bottom-Up ، Call Tree و Event Log را در پایین بررسی کنید. مرتبسازی این ستونها بر اساس Self Time و Total Time میتواند به شناسایی گلوگاههای کد کمک کند.
فایل منبع مرتبط نیز در آنجا لینک شده است، بنابراین میتوانید آن را تا پنل منابع دنبال کنید تا هزینه هر خط را بررسی کنید.
مشکلات رایجی که باید در اینجا به دنبال آنها باشید، انیمیشنهای ضعیف بهینهسازی شدهای هستند که باعث ایجاد طرحبندی و رنگآمیزی مداوم میشوند یا عملیات پرهزینهای که در یک کتابخانه گنجانده شده پنهان شدهاند.
نحوه گزارش مداخلات نادرست
کروم با تطبیق درخواستهای منابع با یک لیست فیلتر، محتوا را به عنوان تبلیغ برچسبگذاری میکند . اگر محتوای غیرتبلیغاتی برچسبگذاری شده باشد، تغییر آن کد را برای جلوگیری از تطبیق با قوانین فیلتر در نظر بگیرید. اگر مشکوک هستید که مداخلهای به اشتباه اعمال شده است، میتوانید از طریق این الگو مشکل را مطرح کنید . لطفاً مطمئن شوید که نمونهای از گزارش مداخله را ضبط کردهاید و یک URL نمونه برای بازتولید مشکل دارید.