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