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

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

David Belford

Thierno Thiam

Взаимодействие с следующей отрисовкой (INP) — это показатель, который оценивает реакцию веб-сайта на ввод пользователя. INP измеряет время с момента, когда пользователь начинает взаимодействие (например, при нажатии, касании или вводе текста) до полученной визуальной обратной связи. INP должен заменить First Input Delay (FID) в качестве Core Web Vital в марте 2024 года .

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

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

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

ТБТ как представитель ИЯФ

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

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

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

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

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

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

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

Важно подчеркнуть, что самым сложным аспектом этой задачи было успешное улучшение 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 для расчета оценки Taboola INP.

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

TRECS Engine: новая стратегия доходности

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

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

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

Вот JS-фрагмент средства запуска задач «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. Он разбивает эти разделы кода на более короткие задачи и, таким образом, уменьшает INP.

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

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

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

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

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

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

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

Заключение

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

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

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