Jak platforma do zarządzania zgodą użytkowników PubTech zmniejszyła wartość INP w witrynach klientów nawet o 64%, jednocześnie poprawiając widoczność reklam o 1,5%

Jak platforma do zarządzania zgodą użytkowników PubConsent zmniejszyła INP dla swoich klientów nawet o 64%, stosując strategię łagodnego postępowania, która wykorzystuje interfejsy Scheduler API przeglądarki do rozwiązywania problemów z szybkością reakcji zidentyfikowanych za pomocą Narzędzi deweloperskich w Chrome.

Marco Prontera

Gilberto Cocchi

Platformy do zarządzania zgodą użytkowników (CMP) to narzędzia, które pomagają witrynom w spełnianiu przepisów dotyczących prywatności dzięki uzyskiwaniu zgody użytkowników na stosowanie plików cookie i technologii śledzenia. Oprócz głównego celu, jakim jest zapewnienie zgodności z wymogami prawnymi, platformy CMP, jako skrypty innych firm, muszą też minimalizować wpływ na wydajność i wygodę użytkowników.

PubConsent CMP to najnowsza usługa PubTech. Platforma PubConsent CMP została zaprojektowana z głównym naciskiem na wydajność. Jest lekka, zapewnia optymalny komfort użytkownika i minimalny wpływ na ogólną wydajność witryny.

Wprowadzenie metryki Interakcja do kolejnego wyrenderowania (INP) pozwoliło zespołowi PubTech wykryć problemy z responsywnością naszej platformy CMP. W tym opracowaniu firmy PubTech przedstawiają, jak rozwiązały problemy z szybkością działania platformy CMP PubConsent i jak poprawiły INP, zanim wskaźnik ten stał się jednym z Core Web Vitals w marcu 2024 r., co świadczy o ich niezachwianym zaangażowaniu w zapewnienie jak najlepszej wydajności w przypadku platformy CMP.

Dlaczego zespół ds. technologii reklamy zwraca uwagę na skuteczność?

Platforma CMP PubConsent, podobnie jak większość platform tego typu, oferuje funkcję zarządzania zgodą implementowaną jako zewnętrzny skrypt na stronach witryny. Zmniejszenie wpływu naszej platformy CMP na wydajność, w tym na responsywność, jest kluczowe dla prawidłowej integracji CMP.

Dzięki temu, że priorytetem jest wydajność, a skrypt platformy CMP PubConsent jest lekki, właściciele witryn mogą zachować równowagę między wdrażaniem cennych funkcji związanych z zarządzaniem zgodą a zachowaniem jakości wrażeń użytkowników.

Biorąc pod uwagę znaczenie funkcji, które zapewnia platforma CMP, oraz ich wpływ na skuteczność, zespół PubTech wyznaczył następujące cele:

1. Ograniczenie wpływu CMP PubConsent na INP.
2. Zmniejszenie czasu trwania długich zadań związanych z platformą CMP.
3. Zmniejsz czas całkowitego blokowania (TBT), który może mieć negatywny wpływ na INP strony.

Jak mierzona jest INP

Firma PubTech użyła Narzędzi deweloperskich w Chrome do przeprowadzenia wstępnej analizy i ręcznej diagnostyki interakcji o wydłużonym czasie reakcji. Ten proces pozwolił zespołowi ds. technologii reklamy określić konkretne problemy wpływające na szybkość wczytywania stron. Na przykład kliknięcie w ramach platformy CMP w celu zaakceptowania wszystkich plików cookie i następnie zamknięcie okna z prośbą o zgodę na pliki cookie spowodowało długie zadanie, które opóźniło odświeżanie interfejsu. Jak widać na poniższym obrazie, interfejs nie był aktualizowany, aby wyświetlać, że okno zostało zamknięte, aż do zakończenia długiego zadania.

W architekturze platformy PubConsent CMP przycisk akceptowania wszystkich plików cookie, przycisk odrzucania wszystkich plików cookie i przycisk dostosowywania preferencji plików cookie działają według tego samego procesu. Z tego powodu ulepszenia opisane w tym opracowaniu miały wpływ na serię interakcji użytkowników z usługą CMP.

To opóźnienie spowodowało, że panel był wizualnie zablokowany podczas wykonywania zadania. Ponieważ blokowało ono aktualizację renderowania przez zauważalnie długi czas, negatywnie wpłynęło to na INP strony.

Jak PubTech zoptymalizował INP pod kątem przycisków i linków

Aby poprawić INP, w platformie CMP PubConsent zastosowano różne strategie uzyskiwania dochodu.

Zrzeczenie się zadań o wysokim priorytecie

Metoda yieldToMainUiBlocking pokazana w tym fragmencie kodu została zaprojektowana tak, aby optymalizować zadania JavaScript o wysokim priorytecie. Jeśli jest dostępny, zwraca ona wartość scheduler.yield, ale jeśli nie, to postTask z priorytetem user-blocking (wysoki), a jeśli nie, to zwraca wartość pustą.postTask

Metoda setTimeout została tutaj pominięta, ponieważ metoda yieldToMainUiBlocking została zaprojektowana do obsługi wewnętrznych operacji ustawień platformy CMP i wysoko priorytetowych zadań, które powinny zachować taki priorytet podczas generowania. Oznacza to, że tylko przeglądarki, które implementują te interfejsy API do planowania (obecnie dostępne tylko w przypadku przeglądarek opartych na Chromium), korzystają z ulepszeń opisanych w tym opracowaniu. Mimo to takie podejście zostało uznane za akceptowalne stopniowe ulepszenie w przypadku tych zadań o wysokim priorytecie.

function yieldToMainUiBlocking () {
  return new Promise((resolve) => {
    if ('scheduler' in window) {
      if ('yield' in window.scheduler) {
        return window.scheduler.yield().then(() => resolve(true));
      }

      if ('postTask' in window.scheduler) {
        return window.scheduler.postTask(() => resolve(true), { priority: 'user-blocking' });
      }
    }

    resolve(false);
  });
};

Zysk z zadań średniotrwałych i w tle

Metoda yieldToMainBackground, która jest pokazana w tym fragmencie kodu, służy do dzielenia długich zadań o priorytecie user-visible (średnim) lub background. Logika implementuje scheduler.yield(), jeśli jest dostępna, ale różni się od niej tym, że używa postTask z średnim priorytetem, a na końcu przechodzi do setTimeout w przypadku przeglądarek innych niż Chrome.

function yieldToMainBackground () {
  return new Promise((resolve) => {
    if ('scheduler' in window) {
      if ('yield' in window.scheduler) {
        return window.scheduler.yield().then(() => resolve(true));
      }

      if ('postTask' in window.scheduler) {
        return window.scheduler.postTask(() => resolve(true), { priority: 'user-visible' });
      }
    }

    setTimeout(() => { resolve(true) }, 0);
  });
};

Jak zespół ds. technologii publikacji jeszcze bardziej zredukował czas wczytywania reklamy dzięki optymalizacji układu

Po zastosowaniu strategii dotyczącej rentowności stwierdzono, że INP w przypadku CMP znacznie się poprawił. Po znacznym skróceniu czasu przetwarzania przez moduł obsługi zdarzeń odkryliśmy możliwość dalszego ulepszenia renderowania następnego wyświetlenia działania Close UI (Zamknij interfejs użytkownika). Ta czynność została pierwotnie zaprojektowana w celu usuwania elementów z DOM. Spowodowało to problemy, zwłaszcza w przypadku witryn z dużą liczbą węzłów DOM, co prowadziło do nieoczekiwanego wzrostu nakładu pracy związanego z renderowaniem.

Aby rozwiązać problem zwiększonej ilości pracy związanej z renderowaniem, która jest niezbędna do usunięcia elementów z DOM, wprowadzono rozwiązanie, które zespół nazwał „leniwym odtwarzaniem”. W ramach tego podejścia najpierw stosuje się regułę CSS display: none do okna dialogowego zgody platformy CMP po wyrażeniu przez użytkownika zgody na ukrycie okna. Następnie usunięcie węzłów DOM powiązanych z oknem CMP jest przesuwane do późniejszego momentu, gdy przeglądarka jest nieaktywna, za pomocą requestIdleCallback. Okazało się, że to podejście jest znacznie szybsze niż usuwanie węzłów DOM w momencie, gdy użytkownik zamknął okno z prośbą o zgodę.

Jak PubTech jeszcze bardziej zmniejszył INP dzięki ulepszaniu biblioteki IAB TCF

Po rozwiązaniu większości problemów z responsywnością platformy CMP zidentyfikowaliśmy kolejne możliwości ulepszenia jednej z jej głównych zależności: biblioteki zasad IAB dotyczących przejrzystości i uzyskiwania zgody na przetwarzanie danych (TCF).

Najbardziej pracochłonne komponenty tej biblioteki to „build strings” i „dispatch consent”. Te komponenty są integralną częścią biblioteki zasad TCF IAB. W ramach osobnego gałęzi, która powstała z myślą o potrzebach PubTech, w tych komponentach zostały zastosowane następujące optymalizacje:

1. ponowne używanie obliczonych wyników w procesie dekodowania, który jest wykonywany w przypadku każdego wywołania zwrotnego usługi zewnętrznej, która musi odczytać zgodę użytkownika.
2. Zapobieganie niepotrzebnym pętlom w procesie kodowania ograniczeń dla wydawców, który jest wykonywany, gdy użytkownik wyrazi zgodę.

Pierwsza z tych optymalizacji skróciła czas oczekiwania na wywołanie CMP przez każdą funkcję zwrotną wywołania zewnętrznego, która jest połączona z biblioteką TCF IAB. Druga optymalizacja skróciła czas przetwarzania komponentu „build strings”. Ta optymalizacja pozwoliła zmniejszyć liczbę pętli do 60%, które były wykonywane za każdym razem, gdy użytkownik wyrażał zgodę.

Wyniki

Dzięki strategiom, które przyniosły wcześniej dobre wyniki, oraz nowym optymalizacjom układu renderowania wskaźnik INP platformy CMP wzrósł nawet o 65%. W rezultacie znacznie poprawiliśmy szybkość działania CMP PubConsent, a w przypadku niektórych reklam widoczność zwiększyła się nawet o 1,5% dzięki optymalizacji czasu żądania reklam.

Oprócz tych ulepszeń w bibliotece TCF IAB zaobserwowaliśmy, że INP poprawił się nawet o 77% na urządzeniach mobilnych w przypadku klientów, których dotyczy problem, ponieważ długie zadania wywoływane przez TCF skróciły się nawet o 85%. Dzięki temu udało się znacznie zmniejszyć obciążenie związane z każdą wywoływaną przez stronę funkcją wywołania zwrotnego, która jest wykonywana w całym cyklu życia strony.

Liczba źródeł przekazujących INP przy użyciu platformy CMP PubConsent wzrosła o ponad 400%, z 13% do 55% na urządzeniach mobilnych. W przypadku niektórych klientów czas wczytywania strony został skrócony o ponad połowę – z 470 ms do 230 ms – dzięki optymalizacji pakietu PubTech SDK.

Podsumowanie

Klienci PubTech szybko zauważyli pozytywne wyniki dotyczące skuteczności INP i danych biznesowych, które są efektem naszych działań optymalizacyjnych. Rozważamy dalsze zwiększanie skuteczności CMP PubConsent, wykorzystując cenne dane z monitorowania rzeczywistych użytkowników (RUM) pochodzące od klientów. Te dane dokładnie śledzą regresje i postępy, co pozwala nam stale ulepszać Pub/4.

Jako firma zewnętrzna PubTech również zdała sobie sprawę, że może poprawić wydajność witryny na dużą skalę i zapewnić większą responsywność, nie wpływając negatywnie na wskaźniki KPI firmy. Nigdy nie jest za późno na wdrożenie tego typu ulepszeń.

Specjalne podziękowania dla Luca Coppola, dyrektora ds. technologii w PubMatic, za wsparcie w tym zakresie innowacji, a także dla Jeremy’ego Wagnera, Michala Mocnego i Ricka Viscomiego z Google.