콘텐츠 추천 제공업체인 Taboola가 LoAF를 사용해 게시자 파트너 웹사이트의 INP를 최대 36% 개선한 방법

Taboola가 Long Animation Frames API (LoAF)를 활용하고 스마트한 수익 전략을 채택하여 게시자의 광고 실적 저하 없이 웹사이트 응답성을 향상할 수 있습니다.

다음 페인트에 대한 상호작용 (INP)은 사용자 입력에 대한 웹사이트의 응답성을 평가하는 측정항목입니다. INP는 사용자가 클릭, 탭, 입력과 같은 상호작용을 시작한 시점부터 시각적 피드백이 나타나는 시점까지의 시간을 측정합니다. INP는 2024년 3월에 최초 입력 지연 (FID)을 Core Web Vitals로 대체할 예정입니다.

Taboola는 세계 최고의 콘텐츠 탐색 플랫폼으로, 오픈 웹에서 초당 50만 건의 추천을 제공하고 있습니다. 이러한 추천을 통해 Taboola의 9,000개 독점 게시자 파트너가 수익을 창출하고 잠재고객의 참여를 유도할 수 있습니다. 게시자가 자바스크립트를 사용하여 페이지에 대한 추천을 렌더링합니다.

타사 JavaScript는 사용자 입력에 빠르게 응답하는 페이지의 기능에 영향을 줄 수 있으므로 Taboola는 JavaScript 파일 크기 및 실행 시간을 줄이는 데 많은 투자를 해왔습니다. Taboola는 전체 렌더링 엔진을 재설계하고, 추상화 없이 브라우저 API를 직접 사용하여 INP에 미치는 영향을 최소화해 왔습니다.

이 우수사례에서는 새로운 Long Animation Frames (LoAF) API를 사용하여 현장에서 페이지 응답성에 미치는 영향을 측정함으로써 INP를 개선하기 위한 Taboola의 여정을 살펴보고, 특정 최적화를 적용하여 사용자 환경을 개선하려는 후속 노력에 대해 설명합니다.

INP의 프록시로서의 TBT

총 차단 시간 (TBT)은 실험실 기반의 측정항목으로, 페이지 응답성에 영향을 미칠 수 있을 정도로 오랫동안 기본 스레드가 차단된 위치를 식별합니다. INP와 같이 응답성을 측정하는 필드 측정항목은 TBT가 높으면 영향을 받을 수 있습니다. 휴대기기에서 TBT와 INP 간의 상관관계를 조사한 애니 설리반의 조사에 따르면 기본 스레드 차단 시간이 최소화될 때 사이트가 좋은 INP 점수를 얻을 가능성이 더 높습니다.

이러한 상관관계는 Taboola의 게시자들이 높은 TBT에 대한 우려로 인해 Taboola는 이 측정항목에 대한 기여도를 최소화하는 데 집중하게 되었습니다.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

Taboola는 TBT를 INP의 프록시 측정항목으로 사용해 JavaScript 실행 시간을 모니터링하고 최적화하여 Core Web Vitals에 미치는 잠재적 영향을 제한하기 시작했습니다. 먼저 다음과 같은 작업을 했습니다.

• Long Tasks API를 사용하여 현장에서 문제가 있는 스크립트를 식별하고 최적화합니다.
• PageSpeed Insights API를 사용하여 매일 10,000~15,000개의 URL을 평가하여 TBT 기여도를 추정합니다.

그러나 Taboola는 이러한 도구로 TBT를 분석하는 데 몇 가지 한계가 있다는 것을 알게 되었습니다.

• Long Tasks API는 작업을 원본 도메인 또는 특정 스크립트로 귀속시킬 수 없으므로 장기 작업의 소스를 식별하기가 더 어렵습니다.
• Long Tasks API는 렌더링 지연을 일으킬 수 있는 작업과 레이아웃 변경사항의 조합이 아니라 장기 작업만 식별합니다.

이러한 문제를 해결하기 위해 Taboola는 사용자 입력 반응성에 미치는 실질적인 영향을 더 잘 이해하기 위해 Long Animation Frames (LoAF) API 오리진 트라이얼에 참여했습니다. 오리진 트라이얼을 통해 새로운 기능이나 실험용 기능에 액세스할 수 있으므로 개발자는 사용자가 제한된 기간 동안 사용해 볼 수 있는 새로운 기능을 테스트할 수 있습니다.

이 과제의 가장 어려운 부분은 Ads KPI(핵심성과지표)를 해치지 않고 게시자의 리소스 지연을 일으키지 않고 INP를 성공적으로 개선하는 것이라는 점을 강조해야 합니다.

LoAF를 사용하여 INP 영향 평가하기

긴 애니메이션 프레임은 렌더링 업데이트가 50밀리초 이상 지연될 때 발생합니다. Taboola는 긴 작업만 수행하는 것이 아니라 느린 사용자 인터페이스 업데이트의 원인을 파악하여 필드의 페이지 응답성에 미치는 영향을 분석할 수 있었습니다. LoAF를 관찰한 Taboola는 다음을 할 수 있었습니다.

1. 항목을 특정 Taboola 작업에 귀속합니다.
2. 프로덕션에 배포하기 전에 특정 기능의 성능 문제를 관찰합니다.
3. 집계된 데이터를 수집하여 A/B 테스트에서 다양한 코드 버전을 비교하고 핵심 성공 측정항목을 보고합니다.

다음 JavaScript는 프로덕션에서 Taboola의 영향을 분리하기 위해 LoAF를 수집하는 데 사용되는 단순화된 버전입니다.

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 });

• Taboola는 loafEntryAnalysis 함수를 사용해 주요 기여자인 항목을 식별할 수 있었습니다.
• Taboola는 총 스크립트 기간의 절반 이상이 Taboola로 인해 발생하거나 Taboola 스크립트를 실행하는 데 50밀리초 넘게 걸리는 경우 주 요인으로 간주됩니다.
• 긴 애니메이션 프레임으로 인해 사용자 상호작용이 지연되면 firstUIEventTimeStamp이 생성됩니다. 가장 긴 차단 기간이 전체 INP 점수로 간주됩니다. Taboola가 언제 firstUIEventTimeStamp를 트리거하여 Taboola INP 점수를 계산하는지도 확인할 수 있습니다.

LoAF로 수집된 데이터는 Taboola가 수익 창출 기회를 적용할 수 있는 영역을 식별하는 다음과 같은 기여 분석 표를 만드는 데 도움이 되었습니다.

<ph type="x-smartling-placeholder">

TRECS Engine: 새로운 수익 전략

Taboola는 LoAF를 사용하여 스크립트 최적화 기회를 더 잘 이해할 뿐만 아니라 JavaScript 실행 및 차단 시간을 상당히 최소화하기 위해 전체 렌더링 엔진을 다시 설계했습니다.

TRECS (Taboola Recommendations Extensible Client Service)는 Taboola의 추천을 로드하는 데 필요한 필수 파일의 수와 크기를 줄이면서 클라이언트 측 렌더링과 게시자의 현재 JS 코드를 유지합니다.

LoAF를 사용하여 렌더링 차단 작업이 식별되면 'Performance Fader'는 scheduler.postTask()를 사용하여 기본 스레드에 넘겨주기 전에 이러한 작업을 분할할 수 있습니다. 이러한 설계는 렌더링 업데이트와 같은 중요한 사용자 대상 작업이 기본 스레드를 차지하고 있을 수 있는 기존 작업과 관계없이 가능한 한 빨리 실행될 수 있도록 합니다.

다음은 'Performance Fader'의 JS 스니펫입니다. 작업 실행기:

/**
* 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 함수는 다음을 수행합니다.

• 내부적으로 scheduler.postTask()를 사용하거나 (API를 사용할 수 있는 경우) setTimeout로 대체하는 runAsPostTask를 사용합니다.
• 이 함수는 긴 애니메이션 프레임과 INP를 유발하는 코드 섹션에서 함수 호출을 래핑합니다. 이러한 코드 섹션을 더 짧은 작업으로 분할하므로 INP가 줄어듭니다.

비즈니스 측정항목

LoAF 덕분에 Taboola는 이것이 INP에 미치는 영향을 더 잘 이해할 수 있었습니다. 또한 이 도구는 새로운 TRECS 엔진의 일부로 사용할 수 있는 스크립트 최적화 기회를 강조했습니다.

Taboola는 TRECS와 성능 페이더의 영향을 확인하기 위해 게시자 파트너 패널에서 스크립트를 생성하지 않고 기존 엔진에 대해 INP를 측정하는 A/B 테스트를 수행했습니다.

다음 표에는 Taboola 네트워크에 있는 4명의 익명 게시자 중 75번째 백분위수의 INP 결과가 밀리초 단위로 나와 있습니다.

다행히 테스트 패널에서 TRECS와 Performance Fader를 사용 설정했을 때 광고 클릭률, 1,000회 노출당 수익 (RPM)과 같은 비즈니스 측정항목은 부정적인 영향을 받지 않았습니다. 광고 KPI에 예상과 같은 부정적인 결과가 없는 상태로 INP가 개선됨에 따라 Taboola는 점진적으로 게시자의 실적 향상에 기여할 것입니다. 제품에 대한 인식을 높일 수 있습니다.

앞서 강조 표시한 동일한 고객을 대상으로 실행한 또 다른 Lighthouse는 Taboola가 새로운 엔진을 사용할 때 기본 스레드 차단 시간이 크게 개선되었음을 보여줍니다.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

이는 LoAF를 사용하여 INP의 원인을 식별하고 Performance Fader와 함께 후속 수율 기술을 배포함으로써 Taboola의 파트너가 광고 및 페이지 실적에서 최대의 성공을 거둘 수 있음을 보여줍니다.

결론

INP 최적화는 복잡한 과정이며, 특히 파트너 웹사이트에 서드 파티 스크립트를 사용하는 경우 더욱 그렇습니다. 최적화를 시작하기 전에 INP를 특정 스크립트에 저작자로 표시하면 다른 사이트 성능 측정항목에 대한 잠재적 피해와 추측을 배제할 수 있습니다.LoAF API는 특히 삽입된 서드 파티의 특정 SDK 개선 기회를 정확히 찾아내고 페이지에 존재하는 다른 기술의 간섭을 제거함으로써 INP 문제를 식별하고 해결하는 데 유용한 도구임이 입증되었습니다.

좋은 수익 창출 전략(예: scheduler.postTask() 사용)과 함께 사용하면 LoAF가 좋지 않은 페이지 응답성의 원인을 관찰하고 이해하는 데 도움이 되며, 이를 통해 웹사이트의 INP를 개선하는 데 필요한 정보를 얻을 수 있습니다.

Google의 Gilberto Cocchi, Noam Rosenthal, Rick Viscomi와 Taboola 엔지니어링 및 제품팀의 Dedi Hakak, Anat Dagan, Omri Ariav가 이 작업에 기여해 주신 것에 특별히 감사드립니다.