Jak dostawca rekomendacji treści, firma Taboola, użyła LoAF, by zwiększyć wartość INP w witrynach partnerów wydawców nawet o 36%.

Jak wykorzystanie interfejsu Long Animation Frames API (LoAF) i wdrożenie strategii inteligentnego ustalania cen minimalnych pozwoliło firmie Taboola zwiększyć szybkość reakcji witryn wydawców bez pogorszenia skuteczności reklam.

David Belford

Thierno Thiam

Interakcja do kolejnego wyrenderowania (INP) to wskaźnik, który ocenia responsywność witryny w odniesieniu do danych wprowadzanych przez użytkownika. INP mierzy czas od rozpoczęcia interakcji przez użytkownika (np. kliknięcia, dotknięcia lub wpisania tekstu) do uzyskania wizualnej informacji zwrotnej. W marcu 2024 r. INP zastąpi opóźnienie przy pierwszym działaniu (FID) jako podstawowy wskaźnik internetowy.

Taboola to wiodąca na świecie platforma do odkrywania treści, która co sekundę generuje 500 tys. rekomendacji w ogólnodostępnym internecie. Te rekomendacje umożliwiają 9000 wyłącznych partnerów wydawniczych Tabooli zarabianie na swoich odbiorcach i budowanie ich zaangażowania. Wydawcy wyświetlają rekomendacje na swoich stronach za pomocą JavaScriptu.

Kod JavaScript pochodzący od innych firm może wpływać na szybkość reakcji strony na działania użytkowników, dlatego Taboola intensywnie pracuje nad zmniejszeniem rozmiaru plików JavaScript i skróceniem czasu ich wykonywania. Firma Taboola przeprojektowała cały silnik renderowania i zaczęła korzystać bezpośrednio z interfejsów API przeglądarki bez abstrakcji, aby zminimalizować wpływ na INP.

W tym studium przypadku opisujemy, jak firma Taboola poprawiła INP, korzystając z nowego interfejsu Long Animation Frames (LoAF) API do pomiaru wpływu na szybkość reakcji strony w rzeczywistych warunkach, a następnie zastosowała konkretne optymalizacje, aby poprawić wygodę użytkowników.

TBT jako przybliżona wartość INP

Łączny czas blokowania (TBT) to wskaźnik laboratoryjny, który określa, kiedy wątek główny był zablokowany na tyle długo, że prawdopodobnie wpłynęło to na szybkość reakcji strony. Na dane z pola, które mierzą czas reakcji, np. INP, może mieć wpływ wysoki TBT. Badanie przeprowadzone przez Annie Sullivan dotyczące zależności między TBT a INP na urządzeniach mobilnych wykazało, że witryny częściej uzyskują dobre wyniki INP, gdy czas blokowania wątku głównego jest zminimalizowany.

Ta korelacja w połączeniu z obawami wydawców Tabooli dotyczącymi wysokiego TBT sprawiła, że firma skupiła się na zminimalizowaniu swojego wpływu na ten wskaźnik.

Używając TBT jako wskaźnika zastępczego dla INP, Taboola zaczęła monitorować i optymalizować czas wykonywania JavaScriptu, aby ograniczyć jego potencjalny wpływ na podstawowe wskaźniki internetowe. Zaczęli od wykonania tych czynności:

• Identyfikowanie i optymalizowanie problematycznych skryptów w terenie za pomocą interfejsu Long Tasks API.
• Szacowanie udziału TBT za pomocą interfejsu PageSpeed Insights API do oceny od 10 000 do 15 000 adresów URL dziennie.

Firma Taboola zauważyła jednak, że analiza TBT za pomocą tych narzędzi ma pewne ograniczenia:

• Interfejs Long Tasks API nie może przypisać zadania do domeny źródłowej ani do konkretnego skryptu, co utrudnia identyfikowanie źródeł długich zadań.
• Interfejs Long Tasks API identyfikuje tylko długie zadania, a nie kombinację zadań i zmian układu, które mogą powodować opóźnienie renderowania.

Aby rozwiązać te problemy, firma Taboola wzięła udział w eksperymencie Long Animation Frames (LoAF) API, aby lepiej poznać jego rzeczywisty wpływ na szybkość reakcji na dane wejściowe użytkownika. Wersje próbne origin dają dostęp do nowych lub eksperymentalnych funkcji, dzięki czemu deweloperzy mogą testować nowe funkcje, które użytkownicy mogą wypróbować przez ograniczony czas.

Należy podkreślić, że najtrudniejszym aspektem tego wyzwania było skuteczne zwiększenie INP bez pogorszenia jakichkolwiek kluczowych wskaźników wydajności(KPI) reklam lub spowodowania opóźnień w dostarczaniu zasobów wydawcom.

Ocena wpływu INP za pomocą LoAF

Długa klatka animacji występuje, gdy aktualizacja renderowania jest opóźniona o ponad 50 milisekund. Dzięki zidentyfikowaniu przyczyn powolnych aktualizacji interfejsu użytkownika – a nie tylko długich zadań – Taboola mogła przeanalizować ich wpływ na szybkość reakcji strony w rzeczywistych warunkach. Obserwowanie LoAF pozwoliło firmie Taboola:

1. Przypisywanie wpisów do konkretnych zadań Taboola.
2. Obserwuj problemy z wydajnością w konkretnych funkcjach, zanim zostaną one wdrożone w środowisku produkcyjnym.
3. Zbieraj dane zbiorcze, aby porównywać różne wersje kodu w testach A/B i raportować kluczowe wskaźniki sukcesu.

Poniższy kod JavaScript to uproszczona wersja używana w wersji produkcyjnej do zbierania danych o utracie danych o atrybucji, aby odizolować wpływ Tabooli.

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

• Dzięki funkcji loafEntryAnalysis firma Taboola mogła identyfikować wpisy, w których ma duży udział.
• Taboola jest uznawana za głównego dostawcę, jeśli ponad połowa łącznego czasu trwania skryptu jest spowodowana przez Taboola lub jeśli uruchomienie skryptu Taboola zajmuje więcej niż 50 milisekund.
• firstUIEventTimeStamp jest generowany, jeśli interakcja użytkownika jest opóźniona z powodu długiej klatki animacji. Najdłuższy czas blokowania jest traktowany jako ogólny wynik INP. Możemy też określić, kiedy Taboola wywołała firstUIEventTimeStamp, aby obliczyć wynik INP Tabooli.

Dane zebrane za pomocą LoAF pomogły firmie Taboola utworzyć poniższą tabelę atrybucji, która wskazuje obszary, w których można zastosować możliwości zwiększenia przychodów.

TRECS Engine: nowa strategia zwiększania przychodów

Oprócz korzystania z interfejsu LoAF w celu lepszego zrozumienia możliwości optymalizacji skryptów firma Taboola przeprojektowuje cały silnik renderowania, aby znacznie zminimalizować czas wykonywania i blokowania kodu JavaScript.

TRECS (Taboola Recommendations Extensible Client Service) zachowuje renderowanie po stronie klienta i obecny kod JS wydawcy, a jednocześnie zmniejsza liczbę i rozmiar obowiązkowych plików wymaganych do wczytania rekomendacji Tabooli.

Gdy za pomocą LoAF zidentyfikujesz zadania blokujące renderowanie, „Performance Fader” może podzielić te zadania przed przekazaniem ich do wątku głównego za pomocą scheduler.postTask(). Dzięki temu ważne działania związane z użytkownikiem, takie jak renderowanie aktualizacji, mogą być wykonywane jak najszybciej, niezależnie od istniejących zadań, które mogą zajmować wątek główny.

Oto fragment kodu JS narzędzia do wykonywania zadań „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);
}

Funkcja sendTaskToFader:

• Korzysta z metody runAsPostTask, która w tle używa metody scheduler.postTask() (jeśli interfejs API jest dostępny) lub wraca do metody setTimeout.
• Ta funkcja otacza wywołania funkcji sekcjami kodu, które powodują długie klatki animacji i INP. Dzieli te sekcje kodu na krótsze zadania, a tym samym zmniejsza INP.

Dane biznesowe

Dzięki LoAF firma Taboola mogła lepiej zrozumieć swój wpływ na INP. Narzędzie wskazało też możliwości optymalizacji skryptów, które można wykorzystać w nowym silniku TRECS.

Aby określić wpływ TRECS i Performance Fader, firma Taboola przeprowadziła test A/B, w którym zmierzyła INP w porównaniu z dotychczasowym silnikiem bez skryptu na panelu partnerów wydawców.

W tabeli poniżej przedstawiono wyniki INP w milisekundach na 75 percentylu w przypadku 4 anonimowych wydawców w sieci Taboola.

Na szczęście wskaźniki biznesowe, takie jak współczynnik klikalności reklam i przychody na 1000 wyświetleń (RPM), nie uległy pogorszeniu po włączeniu w panelu testowym systemów TRECS i Performance Fader. Dzięki tej pozytywnej zmianie w przypadku INP bez żadnych negatywnych wyników w zakresie kluczowych wskaźników skuteczności reklam Taboola będzie stopniowo poprawiać postrzeganie swojej usługi przez wydawców.

Kolejne uruchomienie Lighthouse na tym samym kliencie, o którym wspomnieliśmy wcześniej, pokazuje znaczną poprawę czasu blokowania głównego wątku przez Taboola w przypadku korzystania z nowej wyszukiwarki.

Pokazuje to, że używanie LoAF do identyfikowania przyczyn INP i wdrażanie kolejnych technik przekazywania sterowania za pomocą funkcji Performance Fader umożliwia partnerom Tabooli osiąganie maksymalnej skuteczności reklam i stron.

Podsumowanie

Optymalizacja INP to złożony proces, zwłaszcza gdy w witrynach partnerów są używane skrypty innych firm. Zanim rozpocznie się optymalizacja, przypisanie INP do konkretnych skryptów eliminuje wszelkie domysły i potencjalne szkody dla innych wskaźników wydajności witryny.Interfejs LoAF okazał się cennym narzędziem do identyfikowania i rozwiązywania problemów z INP, zwłaszcza w przypadku usług innych firm, ponieważ umożliwia im określenie konkretnych możliwości ulepszenia pakietu SDK przy jednoczesnym wyeliminowaniu zakłóceń ze strony innych technologii obecnych na stronie.

W połączeniu z dobrą strategią zwiększania przychodów, np. z użyciem scheduler.postTask(), LoAF może pomóc Ci obserwować i rozumieć przyczyny słabej responsywności strony, co z kolei dostarczy Ci informacji potrzebnych do poprawy INP w Twojej witrynie.

Specjalne podziękowania dla Gilberto Cocchi, Noama Rosenthala i Ricka Viscomiego z Google oraz Dediego Hakaka, Anat Dagan i Omriego Ariava z zespołu inżynierów i zespołu ds. produktów Taboola za ich wkład w tę pracę.