Реклама, потребляющая непропорционально много ресурсов устройства, негативно влияет на пользовательский опыт — от очевидного снижения производительности до менее заметных последствий, таких как разрядка батареи или исчерпание лимита трафика. К такой рекламе относятся как активно вредоносные объявления, например, реклама майнеров криптовалюты, так и подлинный контент с непреднамеренными ошибками или проблемами с производительностью.
Chrome устанавливает ограничения на ресурсы, которые может использовать реклама, и удаляет её, если эти ограничения превышены. Подробнее можно прочитать в сообщении в блоге Chromium . Механизм удаления рекламы называется Heavy Ad Intervention .
Критерии размещения тяжелой рекламы
Реклама считается «тяжеловесной» , если пользователь не взаимодействовал с ней (например, не нажимал и не кликал по ней) и она соответствует любому из следующих критериев:
- Основной поток используется в общей сложности более 60 секунд.
- Использует основной поток более 15 секунд в течение любых 30 секунд.
- Использует более 4 мегабайт сетевой полосы пропускания.
Все ресурсы, используемые любыми дочерними iframe-элементами рекламного фрейма, учитываются в рамках лимита на вмешательство в работу этого объявления. Важно отметить, что лимиты времени основного потока не совпадают с временем, прошедшим с момента загрузки объявления. Лимиты определяют, сколько времени процессору требуется для выполнения кода объявления.
Проверка эффективности вмешательства
Данная функция была включена в Chrome 85, но по умолчанию к пороговым значениям добавляется некоторый шум и вариативность для защиты конфиденциальности пользователей.
Установка параметра chrome://flags/#heavy-ad-privacy-mitigations в значение Disabled отключает эти средства защиты, то есть ограничения применяются детерминированно, исключительно в соответствии с установленными лимитами. Это должно упростить отладку и тестирование.
После срабатывания функции вы увидите, что содержимое iframe с ресурсоемкой рекламой будет заменено сообщением «Реклама удалена» . Если вы перейдете по ссылке «Подробности» , вы увидите сообщение с пояснением: « Эта реклама использует слишком много ресурсов вашего устройства, поэтому Chrome удалил ее».
Вы можете увидеть, как применяется вмешательство к тестовому контенту на heavy-ads.glitch.me. Вы также можете использовать этот тестовый сайт для загрузки произвольного URL-адреса в качестве быстрого способа тестирования собственного контента.
При проведении тестирования следует учитывать, что существует ряд причин, которые могут помешать применению соответствующего вмешательства.
- Перезагрузка той же рекламы на той же странице позволит избежать применения этой комбинации мер. В этом случае может помочь очистка истории просмотров и открытие страницы в новом теге.
- Убедитесь, что страница остается в фокусе — перевод страницы в фоновый режим (переключение на другое окно) приостановит выполнение задач для этой страницы и, следовательно, не вызовет вмешательства процессора.
- Во время тестирования убедитесь, что вы не нажимаете на рекламный контент и не кликаете по нему — данное вмешательство не будет применяться к контенту, с которым взаимодействует пользователь.
Что вам нужно сделать?
Вы показываете на своем сайте рекламу от стороннего поставщика.
Никаких действий не требуется, просто имейте в виду, что пользователи могут видеть рекламу, превышающую установленные ограничения, на вашем сайте.
Вы размещаете на своем сайте собственную рекламу или предоставляете рекламу для показа третьим сторонам.
Продолжайте читать, чтобы убедиться, что вы внедрили необходимый мониторинг через API отчетов для реагирования на интенсивную рекламную кампанию.
Вы создаёте рекламный контент или поддерживаете инструмент для его создания.
Продолжайте читать, чтобы убедиться, что вы знаете, как тестировать свой контент на предмет производительности и использования ресурсов. Вам также следует обратиться к рекомендациям на выбранных вами рекламных платформах, поскольку они могут содержать дополнительные технические советы или ограничения, например, см. Руководство Google по созданию рекламных креативов . Рассмотрите возможность добавления настраиваемых пороговых значений непосредственно в ваши инструменты создания контента, чтобы предотвратить распространение неэффективных объявлений.
Что происходит, когда объявление удаляют?
В Chrome информация о вмешательствах передается через API отчетов с указанием типа intervention . Вы можете использовать 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, чтобы проверить, помечен ли контент как реклама. На панели «Рендеринг» (доступна через меню с тремя точками ⋮ , затем «Дополнительные инструменты» > «Рендеринг ») выберите « Выделить рекламные фреймы ». Если вы тестируете контент в окне верхнего уровня или другом контексте, где он не помечен как реклама, вмешательство не будет запущено, но вы все равно можете вручную проверить соответствие пороговым значениям.
Статус объявления во фрейме также отображается на панели «Элементы» , где после открывающего тега <iframe> добавляется аннотация ad . Это также видно на панели «Приложение» в разделе « Фреймы» , где фреймы с тегом объявления будут содержать атрибут « Статус объявления ».
Использование сети
Откройте панель «Сеть» в инструментах разработчика Chrome, чтобы увидеть общую активность в сети для этой рекламы. Убедитесь, что параметр « Отключить кэш » отмечен, чтобы получать стабильные результаты при повторных загрузках.
Внизу страницы отображается сумма перевода за всю страницу. Рекомендуется использовать поле «Фильтр» вверху, чтобы ограничить запросы только теми, которые связаны с рекламой.
Если вы найдете, например, первоначальный запрос к рекламе, источник для iframe, вы также можете использовать вкладку «Инициатор» внутри запроса, чтобы увидеть все запросы, которые он инициирует.
Сортировка всего списка запросов по размеру — хороший способ выявить слишком большие ресурсы. Чаще всего это изображения и видео, которые не были оптимизированы.
Кроме того, сортировка по имени может быть хорошим способом выявления повторяющихся запросов. Причиной вмешательства может быть не один крупный ресурс, а большое количество повторяющихся запросов, которые постепенно превышают лимит.
использование ЦП
Панель «Производительность» в инструментах разработчика поможет диагностировать проблемы с использованием ЦП. Первый шаг — открыть меню «Настройки захвата» . Используйте выпадающее меню «ЦП» , чтобы максимально снизить загрузку ЦП. Решения для снижения загрузки ЦП гораздо чаще срабатывают на маломощных устройствах, чем на высокопроизводительных машинах для разработки.
Далее нажмите кнопку «Запись» , чтобы начать запись активности. Возможно, вам захочется поэкспериментировать с временем и продолжительностью записи, так как загрузка длинной трассировки может занять довольно много времени. После загрузки записи вы можете использовать верхнюю временную шкалу, чтобы выбрать часть записи . Сосредоточьтесь на областях на графике, выделенных сплошным желтым, фиолетовым или зеленым цветом, которые представляют собой скриптинг, рендеринг и рисование.
Изучите вкладки «Снизу вверх» , «Дерево вызовов» и «Журнал событий» внизу. Сортировка этих столбцов по собственному времени и общему времени может помочь выявить узкие места в коде.
Там же находится ссылка на соответствующий исходный файл, поэтому вы можете перейти в панель «Источники» , чтобы посмотреть стоимость каждой строки.
В этом случае часто встречаются плохо оптимизированные анимации, которые вызывают непрерывную компоновку и отрисовку, или ресурсоемкие операции, скрытые в используемой библиотеке.
Как сообщить о некорректных действиях
Chrome помечает контент как рекламу, сопоставляя запросы ресурсов со списком фильтров . Если контент, не являющийся рекламой, был помечен как реклама, рассмотрите возможность изменения соответствующего кода, чтобы избежать применения правил фильтрации. Если вы подозреваете, что вмешательство было применено некорректно, вы можете сообщить о проблеме, используя этот шаблон . Пожалуйста, убедитесь, что вы сохранили пример отчета о вмешательстве и имеете пример URL-адреса для воспроизведения проблемы.