منتشر شده: ۲۲ سپتامبر ۲۰۲۵، آخرین بهروزرسانی: ۷ ژانویه ۲۰۲۶
برای کاربران، کمتر چیزی آزاردهندهتر از یک صفحه وب است که ناگهان کند میشود، باتریشان را خالی میکند یا حجم اینترنت ماهانهشان را تمام میکند. گاهی اوقات، مقصر محتوایی که برای دیدنش آمدهاند نیست، بلکه تبلیغاتی است که در پسزمینه اجرا میشود.
برای محافظت از تجربه کاربری، کروم محدودیتهایی را برای منابعی که یک تبلیغ میتواند استفاده کند اعمال میکند. وقتی یک تبلیغ از این محدودیتها فراتر میرود - و به یک تبلیغ سنگین تبدیل میشود - کروم آن را تخلیه میکند تا منابع دستگاه را آزاد کند.
این مستندات نحوهی عملکرد این مداخله، آستانههای خاص مربوط به آن و برخی از بهترین شیوههایی که میتوانید برای اطمینان از عملکرد روان تبلیغات استفاده کنید را توضیح میدهد.
مداخله تبلیغاتی سنگین چیست؟
مداخله تبلیغات سنگین، مکانیزمی در کروم است که میزان استفاده از منابع توسط فریمهای تبلیغاتی را رصد میکند. اگر یک تبلیغ مقدار نامتناسبی از پهنای باند یا قدرت پردازش CPU را مصرف کند، کروم آن فریم تبلیغاتی خاص را تخلیه میکند.
به جای تبلیغ، کاربر یک کادر خاکستری با پیامی مبنی بر «تبلیغ حذف شد» مشاهده میکند که معمولاً با لینکی با عنوان «جزئیات» همراه است و توضیح میدهد که تبلیغ از منابع زیادی استفاده کرده است.
چه زمانی یک تبلیغ سنگین تلقی میشود؟
کروم بر اساس سه آستانهی خاص، سنگین بودن یک تبلیغ را تعیین میکند. اگر تبلیغی توسط کاربر مورد تعامل قرار نگرفته باشد و هر یک از معیارهای زیر را داشته باشد، بارگیری آن متوقف میشود:
- میزان استفاده از شبکه: این تبلیغ بیش از چهار مگابایت از پهنای باند شبکه را استفاده میکند.
- اوج استفاده از CPU: تبلیغ در هر پنجره ۳۰ ثانیهای، بیش از ۱۵ ثانیه از نخ اصلی استفاده میکند.
- کل استفاده از CPU: تبلیغ در مجموع بیش از ۶۰ ثانیه از نخ اصلی استفاده میکند. تمام منابعی که توسط هر iframe بعدی از آن تبلیغ استفاده میشود، در برابر محدودیتهای مداخله در آن تبلیغ محاسبه میشود.
برخی از محرکهای رایج برای این مداخله چیست؟
انواع خاصی از رفتارهای تبلیغاتی بیشتر از سایرین احتمال دارد که این مداخلات را تحریک کنند. مقصران رایج عبارتند از:
- رسانههای فشرده نشده: بارگذاری تصاویر بسیار بزرگ و با فشردهسازی ضعیف.
- جاوا اسکریپت سنگین: انجام عملیات گسترده، مانند رمزگشایی فایلهای ویدیویی با استفاده از جاوا اسکریپت.
- محاسبات سنگین: انجام محاسبات پیچیده در پسزمینه.
- محتوای ویدیویی بدون حرکات: بارگیری فایلهای ویدیویی بزرگ قبل از تعامل کاربر با یک تبلیغ.
وقتی یک تبلیغ حذف میشود چه اتفاقی میافتد؟
وقتی کروم تشخیص میدهد که یک تبلیغ از آستانههای تبلیغات سنگین فراتر رفته است، فوراً اقدامات لازم را برای محافظت از منابع دستگاه کاربر انجام میدهد.
تجربه کاربری
از دید کاربر، تبلیغ بلافاصله حذف میشود. به جای آن، کروم یک کادر خاکستری با پیام « تبلیغ حذف شد» نمایش میدهد. اگر کاربر روی جزئیات درون کادر کلیک کند، توضیح خاصی را مشاهده خواهد کرد.
تجربه توسعهدهنده
کروم همچنین با استفاده از API گزارشدهی، یک گزارش مداخله ایجاد میکند تا شما را از اتفاقات دقیق مطلع کند. پیش از این، این گزارشها فقط به خود فریم تبلیغاتی و فریمهای زیرمجموعه آن ارسال میشدند. با این حال، ناشران اغلب هیچ راهی برای اطلاع از حذف تبلیغات در صفحات خود نداشتند. برای رفع این مشکل، کروم مکانیسم گزارشدهی را گسترش داده است. گزارشهای مداخله اکنون علاوه بر خود فریم تبلیغاتی، به فریم جاسازی (والد فریم تبلیغاتی ریشه) نیز ارسال میشوند. گزارشهای ارسال شده به فریم جاسازی شامل شناسه فریم فرزند و URL فریم تبلیغاتی است.
برای پیکربندی صفحه برای گزارشهای HTTP، پاسخ باید شامل هدر Report-To باشد:
Reporting-Endpoints: default="https://example.com/reports"
درخواست ارسالی که فعال میشود، شامل گزارشی مانند این خواهد بود:
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?utm_source=devtools"
}
}]
فریم جاسازی گزارش مشابهی را دریافت خواهد کرد که به آدرس URL فریم جاسازی ارسال میشود، اما این پیام علاوه بر این، شامل شناسه فریم فرزند و URL خاص فریم فرزند نیز خواهد بود:
...
"message": "Ad was removed because its CPU usage exceeded the limit. See https://www.chromestatus.com/feature/4800491902992384?utm_source=devtools (id=123;url=http://example2.com/pre-redirect-ad-url.html)"
...
API جاوا اسکریپت، متدی به نام observe() را در اختیار ReportingObserver قرار میدهد که میتواند برای فعالسازی یک فراخوانی برگشتی (callback) در هنگام وقوع مداخلهها (interventions) استفاده شود. این قابلیت در صورتی که بخواهید اطلاعات اضافی را برای کمک به اشکالزدایی به گزارش پیوست کنید، مفید خواهد بود.
// callback that will handle intervention reports
function sendReports(reports) {
for (let report of reports) {
// Log the `report` json using 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 (مثلاً یک تبلیغ) را خالی میکند، از رویداد pagehide استفاده کنید تا مطمئن شوید که تابع فراخوانی گزارش، گزارش مداخله را قبل از ناپدید شدن صفحه ثبت میکند.
window.addEventListener('pagehide', (event) => {
// pull all pending reports from the queue
let reports = observer.takeRecords();
sendReports(reports);
});
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',
},
},
];
بهترین شیوهها برای توسعهدهندگان
برای جلوگیری از اینکه تبلیغات شما زیر بار سنگین تبلیغات سنگین قرار گیرد، بهترین شیوههای زیر را در نظر بگیرید:
- الزام تعامل کاربر برای محتوای سنگین: معیارهای مداخله برای تبلیغاتی اعمال میشود که کاربر با آنها تعاملی نداشته است. اگر کاربری روی تبلیغ شما کلیک کند یا ضربه بزند، محدودیت منابع دیگر اعمال نمیشود. برای تجربیات ویدیویی یا رسانههای غنی، قبل از بارگیری محتوای سنگین، منتظر یک حرکت کاربر (مانند "کلیک برای پخش") باشید.
- بهینهسازی تصاویر و ویدیوها: مطمئن شوید که تصاویر فشرده و ویدیوها برای وب بهینه شدهاند. از بارگذاری خودکار فایلهای ویدیویی بزرگ خودداری کنید؛ در عوض، از متغیرهای سبک استفاده کنید تا زمانی که کاربر درگیر شود.
- بررسی میزان استفاده از پردازنده: انیمیشنهای پیچیده یا عملیات جاوا اسکریپت که باعث ایجاد طرحبندی و رنگآمیزی مداوم میشوند، میتوانند میزان استفاده از پردازنده را افزایش دهند. از ابزارهایی برای شناسایی گلوگاههای کد خود که ممکن است رشته اصلی را برای مدت طولانی مشغول نگه دارند، استفاده کنید.
- نظارت بر فریمهای فرزند: به یاد داشته باشید که تعداد منابع شامل همه چیزهایی است که درون iframe تبلیغ شما قرار دارند. اگر تبلیغ شما پیکسلها یا زیرفریمهای ردیابی شخص ثالث را بارگذاری کند، میزان استفاده از منابع آنها در برابر محدودیت شما محاسبه میشود.
- جداسازی محتوای غیرتبلیغاتی: فریمهای محتوای غیرتبلیغاتی را به دامنههای مختلف یا الگوهای قابل تشخیصی که بعید است طبق خطمشی ارائهدهنده لیست فیلتر، دامنههای تبلیغاتی در نظر گرفته شوند، تفکیک کنید.
چگونه میتوان علت یک مداخله را اشکالزدایی و تشخیص داد؟
برای عیبیابی و حل مؤثر تداخلهای تبلیغاتی سنگین، ابتدا باید بفهمید که منطق تشخیص کروم چگونه محتوا را به عنوان تبلیغ شناسایی میکند و سپس از ابزارهای توسعهدهنده داخلی برای بررسی محرکهای منبع خاص که منجر به حذف شدهاند، استفاده کنید.
کروم چگونه وجود یک تبلیغ را تشخیص میدهد؟
کروم با تطبیق درخواستهای منابع با یک لیست فیلتر، محتوا را به عنوان تبلیغ برچسبگذاری میکند . منطق تشخیص برای محتوای درون iframeها اعمال میشود. فریم صفحه اصلی هرگز مرتبط با تبلیغ در نظر گرفته نمیشود، حتی اگر حاوی اسکریپتهای تبلیغاتی باشد. توجه داشته باشید که یک iframe بارگذاری شده از منبعی که با لیست فیلتر مطابقت دارد، حتی اگر محتوای غیرتبلیغاتی دیگری نیز از آن فریم بارگیری شود، یک تبلیغ در نظر گرفته میشود. به عنوان مثال، یک پخشکننده ویدیویی که در یک iframe با برچسب تبلیغ بارگذاری شده است، ممکن است محتوای غیرتبلیغاتی را نیز بارگیری کند.
چگونه تشخیص تبلیغات را تأیید کنیم؟
به عنوان یک توسعهدهنده، میتوانید با استفاده از Chrome DevTools به صورت بصری تأیید کنید که آیا Chrome با موفقیت محتوای شما را به عنوان تبلیغ شناسایی کرده است یا خیر.
- برجسته کردن قابهای تبلیغاتی: در پنل رندرینگ، گزینهی برجسته کردن قابهای تبلیغاتی را انتخاب کنید، کدام کد رنگی، قابهای تبلیغاتی را به رنگ قرمز روی صفحه شناسایی کرده است.
- حاشیهنویسی عنصر: در پنل عناصر، آیفریمهای تبلیغاتی شناساییشده، یک حاشیهنویسی تبلیغ را در کنار تگ آغازین
<iframe>نمایش میدهند. - فعالیت شبکه: در پنل شبکه، درخواستها را بر اساس یک مقدار بولی
Is ad-relatedفیلتر کنید. - وضعیت تبلیغ: در پنل برنامه، زیر بخش قابها ، قابهای دارای برچسب تبلیغ شامل یک ویژگی
Ad Statusخواهند بود.
چگونه علت یک مداخله را تشخیص دهیم؟
کروم ابزارهایی برای بررسی و بهبود کیفیت و عملکرد صفحات وب ارائه میدهد. Lighthouse را در Chrome DevTools اجرا کنید تا گزارشهایی در مورد عملکرد صفحه خود دریافت کنید. همچنین میتوانید به مجموعه web.dev/fast مراجعه کنید و اطلاعات بیشتری در مورد Web Vitals کسب کنید.
استفاده از شبکه
برای مشاهدهی فعالیت کلی شبکه برای تبلیغ، پنل Network را در Chrome DevTools باز کنید. برای دریافت نتایج پایدار در بارگذاریهای مکرر، گزینهی Disable cache را تیک بزنید.
مقدار منتقل شده در پایین صفحه، مبلغ منتقل شده برای کل صفحه را به شما نشان میدهد. برای محدود کردن درخواستها فقط به موارد مرتبط با تبلیغ، از ورودی فیلتر در بالا استفاده کنید.
اگر درخواست اولیه برای تبلیغ، مثلاً منبع iframe، را پیدا کردید، از تب Initiator در داخل درخواست استفاده کنید تا تمام درخواستهایی که آن را فعال میکند را ببینید.
مرتبسازی لیست کلی درخواستها بر اساس اندازه، روش خوبی برای تشخیص منابع بیش از حد بزرگ است. مقصران رایج شامل تصاویر و ویدیوهایی هستند که بهینهسازی نشدهاند.
علاوه بر این، مرتبسازی بر اساس نام میتواند راه خوبی برای تشخیص درخواستهای تکراری باشد. ممکن است یک منبع بزرگ واحد باعث مداخله نشود، بلکه تعداد زیادی از درخواستهای تکراری که به تدریج از حد مجاز فراتر میروند، باعث این مشکل شوند.
میزان استفاده از پردازنده
پنل Performance در DevTools به تشخیص مشکلات مربوط به استفاده از CPU کمک میکند. منوی Capture Settings را باز کنید. از منوی کشویی CPU برای کاهش سرعت CPU تا حد امکان استفاده کنید. احتمال بروز مداخلات مربوط به CPU در دستگاههای کممصرفتر بسیار بیشتر از دستگاههای توسعه پیشرفته است.
سپس، برای شروع ضبط، روی دکمه ضبط کلیک کنید. شاید بخواهید زمان و مدت زمان ضبط را خودتان آزمایش کنید، زیرا بارگذاری یک مسیر طولانی میتواند زمان زیادی طول بکشد. پس از بارگذاری ضبط، میتوانید از جدول زمانی بالا برای انتخاب بخشی از ضبط استفاده کنید. روی قسمتهایی از نمودار که با رنگ زرد، بنفش یا سبز پررنگ مشخص شدهاند و نشان دهنده اسکریپتنویسی، رندرینگ و نقاشی هستند، تمرکز کنید.
تبهای Bottom-Up ، Call Tree و Event Log را در پایین صفحه بررسی کنید. مرتبسازی این ستونها بر اساس Self Time و Total Time میتواند به شناسایی گلوگاههای کد کمک کند.
فایل منبع مرتبط نیز در آنجا لینک شده است، بنابراین میتوانید آن را تا پنل منابع دنبال کنید تا هزینه هر خط را بررسی کنید.
مشکلات رایجی که باید در اینجا به دنبال آنها باشید، انیمیشنهای ضعیف بهینهسازی شدهای هستند که باعث ایجاد طرحبندی و رنگآمیزی مداوم میشوند یا عملیات پرهزینهای که در یک کتابخانه گنجانده شده پنهان شدهاند.
چگونه مداخلات نادرست را گزارش کنیم؟
اگر محتوای غیرتبلیغاتی به این صورت برچسبگذاری شده است، تغییر کد را برای جلوگیری از تطبیق با قوانین فیلترینگ در نظر بگیرید، یا مستقیماً با نگهدارندگان EasyList برای تغییر قوانین فیلترینگ تعامل کنید . به یاد داشته باشید که مداخله تبلیغات سنگین بر فریمهایی که با حرکت کاربر نمایش داده میشوند تأثیری ندارد، بنابراین میتوان ویدیو را با نیاز به کلیک روی دکمه پخش قبل از بارگیری محتوا، حذف کرد. اگر EasyList با محتوای شما مطابقت ندارد و Chrome به نحوی محتوا را به عنوان مرتبط با تبلیغات طبقهبندی کرده است، میتوانید با استفاده از این الگو، مشکل را با Chrome مطرح کنید . هنگام طرح مشکل، یک نمونه ضبط شده از گزارش مداخله و یک URL نمونه برای بازتولید مشکل، ضمیمه کنید.