Реклама, потребляющая непропорционально большой объём ресурсов устройства, негативно влияет на пользовательский опыт — от очевидного снижения производительности до менее заметных последствий, таких как разрядка аккумулятора или использование пропускной способности. Эта реклама варьируется от явно вредоносной, например, рекламы майнеров криптовалют, до серьёзного контента с непреднамеренными ошибками или проблемами с производительностью.
Chrome устанавливает ограничения на ресурсы, которые может использовать реклама, и удаляет её при превышении этих ограничений. Подробнее об этом можно прочитать в блоге Chromium . Для удаления рекламы используется механизм Heavy Ad Intervention .
Критерии для тяжелой рекламы
Реклама считается тяжелой, если пользователь не взаимодействовал с ней (например, не нажимал на нее или не кликал по ней) и она соответствует любому из следующих критериев:
- Использует основной поток в общей сложности более 60 секунд.
- Использует основной поток более 15 секунд в любом 30-секундном окне
- Использует более 4 мегабайт пропускной способности сети
Все ресурсы, используемые любыми дочерними элементами iframe данного рекламного фрейма, учитываются при определении лимитов для обработки этого рекламного фрейма. Важно отметить, что лимиты времени основного потока не совпадают с временем, прошедшим с момента загрузки рекламного фрейма. Эти лимиты касаются времени, необходимого процессору для выполнения кода рекламного фрейма.
Тестирование вмешательства
Вмешательство реализовано в Chrome 85, но по умолчанию к пороговым значениям добавлен некоторый шум и изменчивость для защиты конфиденциальности пользователя.
Установка chrome://flags/#heavy-ad-privacy-mitigations в состояние «Отключено» отключает эти средства защиты, то есть ограничения применяются детерминированно, исключительно в соответствии с установленными лимитами. Это должно упростить отладку и тестирование.
После срабатывания функции вы увидите, что содержимое iframe для рекламного объявления заменено сообщением об удалении рекламы . Перейдя по прилагаемой ссылке «Подробнее» , вы увидите сообщение: « Это объявление использует слишком много ресурсов вашего устройства, поэтому Chrome удалил его».
Вы можете увидеть вмешательство, примененное к образцу контента, на heavy-ads.glitch.me. Вы также можете использовать этот тестовый сайт для загрузки произвольного URL-адреса в качестве быстрого способа тестирования собственного контента.
При проведении тестирования помните, что существует ряд причин, которые могут помешать применению вмешательства.
- Повторная загрузка того же объявления на той же странице исключит эту комбинацию из процесса. В этом случае может помочь очистка истории просмотров и открытие страницы в новом теге.
- Убедитесь, что страница остается в фокусе — перевод страницы в фоновый режим (переключение на другое окно) приостановит очереди задач для страницы и, таким образом, не вызовет вмешательства ЦП.
- Не нажимайте и не щелкайте по рекламному контенту во время тестирования — вмешательство не будет применяться к контенту, который взаимодействует с пользователем.
Что вам нужно сделать?
Вы показываете на своем сайте рекламу стороннего провайдера
Никаких действий не требуется, просто имейте в виду, что на вашем сайте пользователи могут видеть рекламу, превышающую снятые лимиты.
Вы показываете собственную рекламу на своем сайте или предоставляете рекламу для показа третьим лицам
Продолжайте читать, чтобы убедиться, что вы реализуете необходимый мониторинг с помощью API отчетности для вмешательств в интенсивную рекламу.
Вы создаете рекламный контент или поддерживаете инструмент для создания рекламного контента
Продолжайте читать, чтобы быть в курсе того, как тестировать контент на производительность и использование ресурсов. Также ознакомьтесь с рекомендациями выбранных вами рекламных платформ, поскольку они могут содержать дополнительные технические рекомендации или ограничения, например, см. Руководство Google по медийным креативам . Рассмотрите возможность создания настраиваемых пороговых значений непосредственно в инструментах разработки, чтобы не допустить попадания неэффективных объявлений в контекстную рекламу.
Что происходит после удаления рекламы?
О вмешательстве в работу Chrome сообщается через API отчётов, который носит меткое название « intervention Reporting API». Вы можете использовать API отчётов для получения уведомлений о вмешательствах либо с помощью POST запроса к конечной точке отчёта, либо с помощью JavaScript.
Эти отчёты генерируются для корневого 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 JavaScript предоставляет 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();
Однако, поскольку вмешательство фактически удалит страницу из iframe, следует добавить отказоустойчивое решение, гарантирующее, что отчёт будет определённо получен до того, как страница полностью исчезнет, например, реклама внутри iframe. Для этого можно подключить тот же обратный вызов к событию pagehide .
window.addEventListener('pagehide', (event) => {
// pull all pending reports from the queue
let reports = observer.takeRecords();
sendReports(reports);
});
Помните, что для обеспечения безопасности пользователя событие pagehide ограничивает объём выполняемых им действий. Например, попытка отправить запрос fetch() с отчётами приведёт к его отмене. Для отправки отчёта следует использовать navigator.sendBeacon() , и даже в этом случае браузер делает лишь максимальные усилия, а не гарантирует результат.
Полученный из JavaScript 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, вы также можете использовать вкладку «Инициатор» в запросе, чтобы увидеть все запросы, которые он инициирует.
Сортировка общего списка запросов по размеру — хороший способ обнаружить слишком большие ресурсы. Среди частых виновников — неоптимизированные изображения и видео.
Кроме того, сортировка по имени может быть хорошим способом обнаружить повторяющиеся запросы. Возможно, причиной вмешательства является не один большой ресурс, а большое количество повторяющихся запросов, которые постепенно превышают лимит.
использование ЦП
Панель «Производительность» в DevTools поможет диагностировать проблемы с загрузкой процессора. Первым шагом является открытие меню «Параметры захвата» . Используйте раскрывающийся список «ЦП» , чтобы максимально снизить скорость процессора. Проблемы с загрузкой процессора гораздо чаще возникают на устройствах с низкой мощностью, чем на мощных компьютерах для разработки.
Затем нажмите кнопку «Запись» , чтобы начать запись. Вы можете поэкспериментировать с временем и продолжительностью записи, так как загрузка длинной трассировки может занять довольно много времени. После загрузки записи вы можете использовать верхнюю временную шкалу, чтобы выбрать фрагмент записи . Обратите внимание на области на графике, выделенные сплошным жёлтым, фиолетовым или зелёным цветом, которые соответствуют скриптам, рендерингу и отрисовке.
Изучите вкладки «Снизу вверх» , «Дерево вызовов» и «Журнал событий» внизу страницы. Сортировка этих столбцов по собственному времени и общему времени может помочь выявить узкие места в коде.
Там же размещена ссылка на соответствующий исходный файл, так что вы можете перейти на панель «Источники» и проверить стоимость каждой строки.
Распространенные проблемы, на которые следует обратить внимание, — это плохо оптимизированные анимации , которые вызывают постоянную компоновку и отрисовку, или дорогостоящие операции, скрытые во включенной библиотеке.
Как сообщить о неправильных вмешательствах
Chrome помечает контент как рекламу, сопоставляя запросы ресурсов со списком фильтров . Если был помечен контент, не являющийся рекламой, попробуйте изменить этот код, чтобы избежать соответствия правилам фильтрации. Если вы подозреваете, что вмешательство было применено некорректно, вы можете сообщить о проблеме, используя этот шаблон . Убедитесь, что вы сохранили пример отчёта о вмешательстве и указали пример URL-адреса для воспроизведения проблемы.