Объявления, которые потребляют непропорционально большое количество ресурсов на устройстве, негативно влияют на работу пользователя — от очевидных последствий снижения производительности до менее заметных последствий, таких как разряд батареи или расход пропускной способности. Эти объявления варьируются от активно вредоносных, таких как майнеры криптовалюты, до подлинного контента с непреднамеренными ошибками или проблемами с производительностью.
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-адреса в качестве быстрого способа тестирования вашего собственного контента.
При проведении тестирования помните, что существует ряд причин, которые могут помешать применению вмешательства.
- Повторная загрузка того же объявления на той же странице освободит эту комбинацию от вмешательства. Здесь может помочь очистка истории просмотров и открытие страницы в новом теге.
- Убедитесь, что страница остается в фокусе — фоновое отображение страницы (переключение на другое окно) приостановит очереди задач для страницы и, таким образом, не вызовет вмешательства ЦП.
- Убедитесь, что вы не нажимаете и не нажимаете на рекламный контент во время тестирования — вмешательство не будет применено к контенту, который получает какое-либо взаимодействие с пользователем.
Что вам нужно сделать?
Вы показываете на своем сайте рекламу стороннего поставщика.
Никаких действий не требуется, просто имейте в виду, что пользователи могут видеть на вашем сайте рекламу, превышающую снятые ограничения.
Вы показываете собственные объявления на своем сайте или предоставляете рекламу для стороннего показа.
Продолжайте читать, чтобы убедиться, что вы реализуете необходимый мониторинг с помощью Reporting API для вмешательства в интенсивную рекламу.
Вы создаете рекламный контент или используете инструмент для создания рекламного контента.
Продолжайте читать, чтобы убедиться, что вы знаете, как тестировать контент на предмет проблем с производительностью и использованием ресурсов. Вам также следует обратиться к руководствам по выбранным вами рекламным платформам, поскольку они могут содержать дополнительные технические рекомендации или ограничения. Например, см. Рекомендации Google для медийных креативов . Рассмотрите возможность создания настраиваемых пороговых значений непосредственно в ваших инструментах разработки, чтобы предотвратить утечку неэффективных объявлений.
Что произойдет, если объявление будет удалено?
О вмешательстве в Chrome сообщается через удачно названный Reporting 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() для отправки этого отчета, и даже в этом случае это всего лишь усилие со стороны браузера, а не гарантия.
Результирующий JSON из JavaScript аналогичен тому, который отправляется по запросу 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-адреса для воспроизведения проблемы.