Как поставщик рекомендаций по контенту Taboola использовал LoAF для повышения INP до 36% на веб-сайтах своих партнеров-издателей.

Как использование API длинных анимационных кадров (LoAF) и внедрение интеллектуальной стратегии распределения прибыли позволило Taboola повысить адаптивность веб-сайтов издателей без ущерба для эффективности рекламы.

David Belford

Thierno Thiam

Показатель «Взаимодействие до следующего ввода» (INP) оценивает скорость реакции веб-сайта на действия пользователя. INP измеряет время от начала взаимодействия пользователя — например, клика, касания или ввода текста — до появления визуальной обратной связи. В марте 2024 года INP должен заменить показатель «Первая задержка ввода» (FID) в качестве ключевого показателя веб-значения .

Taboola — ведущая в мире платформа для поиска контента, обеспечивающая 500 000 рекомендаций каждую секунду в открытом интернете. Эти рекомендации позволяют 9000 эксклюзивным партнерам-издателям Taboola монетизировать и взаимодействовать со своей аудиторией. Издатели отображают рекомендации на своих страницах с помощью JavaScript.

Поскольку сторонний JavaScript может влиять на способность страницы быстро реагировать на ввод пользователя, Taboola вложила значительные средства в уменьшение размеров и времени выполнения своих JavaScript-файлов. Taboola переработала весь свой механизм рендеринга, а также использует API браузеров напрямую, без абстракций, чтобы минимизировать его влияние на INP.

В данном тематическом исследовании рассматривается путь компании Taboola к улучшению INP с помощью нового API Long Animation Frames (LoAF) для оценки его влияния на адаптивность страниц в реальных условиях, а также последующие усилия по применению конкретных оптимизаций для улучшения пользовательского опыта.

TBT как индикатор INP

Общее время блокировки (TBT) — это лабораторный показатель, определяющий, когда основной поток был заблокирован достаточно долго, чтобы это могло повлиять на скорость отклика страницы. На показатели, измеряющие скорость отклика, такие как INP, высокое значение TBT может влиять и на другие показатели. Исследование Энни Салливан, посвященное корреляции между TBT и INP на мобильных устройствах, показывает, что сайты с большей вероятностью достигают высоких показателей INP, когда время блокировки основного потока сведено к минимуму.

Эта корреляция, в сочетании с опасениями издателей Taboola по поводу высокого уровня общих налоговых льгот, побудила Taboola сосредоточить внимание на минимизации своего вклада в этот показатель.

Используя TBT в качестве косвенного показателя для INP, Taboola начала отслеживать и оптимизировать время выполнения JavaScript, чтобы ограничить его потенциальное влияние на Core Web Vitals. Они начали с того, что сделали следующее:

• Выявление и оптимизация проблемных скриптов в полевых условиях с использованием API для длительных задач .
• Оценка вклада TBT с помощью API PageSpeed ​​Insights для анализа от 10 000 до 15 000 URL-адресов ежедневно.

Однако компания Taboola отметила, что анализ ТБТ с помощью этих инструментов имеет некоторые ограничения:

• API для длительных задач не позволяет связать задачу с исходным доменом или конкретным скриптом, что затрудняет идентификацию источников длительных задач.
• API для длительных задач идентифицирует только длительные задачи , а не комбинацию задач и изменений макета, которые могут вызвать задержку рендеринга.

Для решения этих задач Taboola присоединилась к пилотному проекту API Long Animation Frames (LoAF), чтобы лучше понять его реальное влияние на скорость отклика пользовательского ввода. Пилотные проекты предоставляют доступ к новым или экспериментальным функциям, позволяя разработчикам тестировать новые возможности, которые пользователи могут опробовать в течение ограниченного времени.

Важно подчеркнуть, что наиболее сложной частью этой задачи было успешное улучшение показателя INP без ущерба для каких-либо ключевых показателей эффективности (KPI) рекламы и без задержек в предоставлении ресурсов нашим издателям.

Использование LoAF для оценки влияния INP

Длительный кадр анимации возникает, когда обновление рендеринга задерживается более чем на 50 миллисекунд. Выявив причины медленного обновления пользовательского интерфейса, а не только длительность задач, Taboola смогла проанализировать его влияние на отзывчивость страниц в реальных условиях . Наблюдение за LoAF позволило Taboola:

1. Присвойте записям ссылки на конкретные задачи Taboola.
2. Перед внедрением в рабочую среду отслеживайте проблемы с производительностью отдельных функций.
3. Соберите сводные данные для сравнения различных версий кода в A/B-тестах и ​​составьте отчет по ключевым показателям успеха.

Приведённый ниже код JavaScript представляет собой упрощённую версию, используемую в производственной среде для сбора LoAF с целью выявления влияния Taboola.

function loafEntryAnalysis (entry) {
  if (entry.blockingDuration === 0) {
    return;
  }

  let taboolaIsMajor = false;
  const hasInteraction = entry.firstUIEventTimestamp > 0;
  let taboolaDuration = 0;
  const nonTaboolaLoafReport = {};
  const taboolaLoafReport = {};

  entry.scripts.forEach((script) => {
    const taboolaScriptBlockingDuration = handleLongAnimationFrameScript(script, taboolaLoafReport, nonTaboolaLoafReport);
    taboolaDuration += taboolaScriptBlockingDuration;

    if (taboolaScriptBlockingDuration > 0 || taboolaDuration > entry.duration / 2) {
      taboolaIsMajor = true;
    }
  });

  generateToboolaLoafReport(taboolaLoafReport, nonTaboolaLoafReport, hasInteraction, taboolaIsMajor);

  if (hasInteraction) {
    const global = _longAnimationFramesReport.global;
    global.inpBlockingDuration = Math.max(global.inpBlockingDuration, entry.blockingDuration);

    if (taboolaIsMajor) {
      global.taboolaInpBlockingDuration = Math.max(global.taboolaInpBlockingDuration, entry.blockingDuration);
    }
  }
}

const observer = new PerformanceObserver(list => {
  for (const entry of list.getEntries()) {
    loafEntryAnalysis(entry);
  }
});

observer.observe({ type: 'long-animation-frame', buffered: true });

• Использование функции loafEntryAnalysis позволило Taboola выявить записи, в создании которых она вносит существенный вклад.
• Taboola считается основным источником проблем, если более половины общей продолжительности выполнения скрипта приходится на Taboola, или если выполнение скрипта, использующего Taboola, занимает более 50 миллисекунд.
• Параметр firstUIEventTimeStamp генерируется, если взаимодействие пользователя задерживается из-за длительного кадра анимации. Наибольшая продолжительность блокировки считается общим показателем INP. Мы также можем определить, когда Taboola вызвала firstUIEventTimeStamp , чтобы рассчитать показатель INP для Taboola.

Данные, собранные с помощью LoAF, помогли Taboola создать следующую таблицу распределения доходов, которая определяет области, где компания может использовать возможности получения прибыли.

Двигатель TRECS: новая стратегия повышения доходности.

Помимо использования LoAF для лучшего понимания возможностей оптимизации скриптов, Taboola полностью переработала свой механизм рендеринга, чтобы значительно минимизировать время выполнения JavaScript и время блокировки.

TRECS (Taboola Recommendations Extensible Client Service) поддерживает рендеринг на стороне клиента и текущий JS-код издателя, одновременно уменьшая количество и размер обязательных файлов, необходимых для загрузки рекомендаций Taboola.

После того как с помощью LoAF будут выявлены задачи, блокирующие рендеринг, «Performance Fader» может разбить эти задачи, прежде чем передать их основному потоку, используя scheduler.postTask() . Такая конструкция гарантирует, что важные задачи, взаимодействующие с пользователем, такие как обновления рендеринга, могут быть выполнены как можно быстрее, независимо от существующих задач, которые могут занимать основной поток.

Вот фрагмент кода JavaScript для запуска задачи "Performance Fader":

/**
* Send a task to run using the Fader. The task will run using the browser Scheduler, by the configuration settings, or immediately.
* @param task
* @param isBlocker
*/
function sendTaskToFader (task, isBlocker = true) {
  const publisherFaderChoice = fillOptimizationGlobals(); // Loading publisher choice
  const applyYielding = publisherFaderChoice === OptimizationFaderType.Responsiveness;

  if (applyYielding) {
    return runAsPostTask(task, isBlocker);
  }

  return runImmediately(task);
}

/**
* Yielding method using scheduler.postTask and falling back to setTimeout when it's not availabe based on the publisher choice
*/
function runAsPostTask (task, isBlocker = true) {
  if ('scheduler' in window && 'postTask' in scheduler) {
    const priority = isBlocker ? 'user-blocking': 'background';

    return window?.scheduler?.postTask(task, { priority });
  }

  const publisherChoiceEnableFallback = fillPublisherChoices();

  if (publisherChoiceEnableFallback) {
    return new Promise(resolve => {
      window.setTimeout(() => {
        resolve(task());
      }, 0);
    });
  }

  return runImmediately(task);
}

Функция sendTaskToFader :

• Использует runAsPostTask , который, в свою очередь, использует scheduler.postTask() (если API доступен), или же возвращается к setTimeout .
• Эта функция оборачивает вызовы функций в участки кода, которые вызывают длинные кадры анимации и INP (International Progress Inclusion). Она разбивает эти участки кода на более короткие задачи, тем самым уменьшая INP.

Бизнес-метрики

Благодаря LoAF, Taboola смогла лучше понять влияние этого инструмента на INP. Инструмент также выявил возможности оптимизации скриптов, которые можно использовать в рамках нового движка TRECS.

Чтобы определить влияние TRECS и Performance Fader, Taboola провела A/B-тестирование, сравнивая INP с существующим движком без использования скриптов, на группе партнеров-издателей.

В таблице ниже представлены результаты INP в миллисекундах для 75-го процентиля четырех анонимных издателей в сети Taboola.

К счастью, такие бизнес-показатели, как коэффициент кликабельности рекламы (ICP) и доход на 1000 показов (RPM), не пострадали при включении TRECS и Performance Fader на тестовой панели. Благодаря этому положительному улучшению показателя INP без каких-либо негативных последствий для ожидаемых KPI рекламы, Taboola постепенно улучшит восприятие своего продукта издателями.

Еще один запуск Lighthouse на том же клиенте, о котором говорилось ранее, демонстрирует значительное улучшение времени блокировки основного потока в Taboola при использовании нового механизма.

Это демонстрирует, что использование LoAF для выявления причин INP и последующее применение методов оптимизации с помощью Performance Fader позволяет партнерам Taboola добиться максимального успеха в повышении эффективности рекламы и страниц.

Заключение

Оптимизация INP — сложный процесс, особенно когда на партнерских сайтах используются сторонние скрипты. Прежде чем начать оптимизацию, необходимо определить, к каким именно скриптам относится INP, чтобы исключить любые догадки и потенциальное негативное влияние на другие показатели производительности сайта. API LoAF зарекомендовал себя как ценный инструмент для выявления и устранения проблем с INP, особенно для сторонних поставщиков, позволяя им точно определить возможности улучшения своих SDK, одновременно исключая помехи от других технологий, присутствующих на странице.

При использовании в сочетании с эффективной стратегией — например, с помощью scheduler.postTask() — LoAF может помочь вам выявить и понять причину низкой отзывчивости страниц, что, в свою очередь, предоставит вам информацию, необходимую для улучшения INP вашего веб-сайта.

Особая благодарность Гилберто Кокки, Ноаму Розенталю и Рику Вискоми из Google, а также Деди Хакаку, Анат Даган и Омри Ариаву из инженерно-технической и продуктовой команды Taboola за их вклад в эту работу.