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ą działania zidentyfikowanych za pomocą narzędzi deweloperskich 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 najnowszy produkt 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 na temat przypadku firma PubTech pokazuje, jak rozwiązała problemy z szybkością reakcji na platformie CMP PubConsent i jak ulepszała INP, zanim wskaźnik ten stał się jednym z Core Web Vitals w marcu 2024 r., co świadczy o niezachwianym zaangażowaniu w zapewnienie jak najlepszej wydajności w przypadku platformy CMP.

Dlaczego PubTech dba o wydajność?

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. Ogranicz długie zadania, które można przypisać usłudze CMP.
3. Zmniejsz czas całkowitego blokowania (TBT), który może mieć negatywny wpływ na INP strony.

Jak mierzona jest INP

PubTech wykorzystała Narzędzia deweloperskie w Chrome do przeprowadzenia wstępnej analizy i ręcznie zdiagnozowanej powolnej interakcji. 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 renderowanie aktualizacji interfejsu użytkownika. Jak widać na ilustracji poniżej, interfejs użytkownika nie został zaktualizowany, aby pokazać, że okno zostało zamknięte, dopóki nie ukończy się 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 platformą 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.

Zyskaj zadania 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, korzysta z metody postTask o priorytecie user-blocking (wysoki) lub, jeśli jest dostępny, z metody postTask, a w przeciwnym razie nie zwraca żadnej wartości.

Pominięto w tym miejscu metodę setTimeout, ponieważ metoda yieldToMainUiBlocking jest przeznaczona do obsługi wewnętrznych operacji związanych z ustawieniami platformy CMP i prac o wysokim priorytecie, które powinny zachować odpowiedni priorytet przy zyskowności. 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 podejście to zostało uznane za dopuszczalne stopniowe ulepszenie w przypadku tych priorytetowych zadań.

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. W rezultacie stosowana jest właściwość scheduler.yield(), jeśli jest dostępna, ale różni się ona od reguły postTask o średnim priorytecie, a w przeglądarkach innych niż Chromium przełącza się na setTimeout.

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 skrócił czas wczytywania za pomocą optymalizacji układu

Po zastosowaniu strategii dotyczącej rentowności stwierdzono, że INP w przypadku CMP znacznie się poprawił. Okazało się, że po znacznej skróceniu czasu przetwarzania modułu obsługi zdarzeń odkryto możliwość wprowadzenia dalszych ulepszeń w zakresie renderowania kolejnego wyrenderowania działania Zamknij interfejs. Ta czynność została pierwotnie zaprojektowana w celu usuwania elementów z DOM. Stanowiło to wyzwania, szczególnie w przypadku witryn ze sporą liczbą węzłów DOM, i spowodowało nieoczekiwane zwiększenie mocy renderowania.

Aby zająć się zwiększonym nakładem pracy renderowania niezbędnym do usunięcia elementów z DOM, zespół wprowadził rozwiązanie o nazwie „leniwe usuwanie renderowania”. 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 IAB TCF. Poniższe optymalizacje tych komponentów zostały zastosowane w osobnym rozwidleniu specjalnie na potrzeby potrzeb PubTech:

1. Ponowne wykorzystywanie obliczonych wyników do procesu dekodowania, które jest wykonywane w przypadku każdego zewnętrznego wywołania zwrotnego, które 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, jaki CMP poświęca na wywołanie zwrotne od zewnętrznego dostawcy, który korzysta z biblioteki IAB TCF. 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

Po wdrożeniu strategii generujących wcześniej i nowych optymalizacji układu INP platformy CMP poprawił się 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 zasad TCF organizacji IAB zaobserwowano, że w przypadku klientów korzystających z urządzeń mobilnych wartość INP poprawiła się nawet o 77%. Wynikało to z zmniejszenia o 85% długich zadań związanych z Zasadami dotyczącymi przejrzystości i uzyskiwania zgody na przetwarzanie danych. 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ł, które przechodzą INP podczas korzystania z platformy do zarządzania zgodą użytkowników PubConsent, wzrosła o ponad 400% w przypadku urządzeń mobilnych z 13% do 55%. 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 były 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, CTO PubTech, za wsparcie w tym zakresie innowacji, a także dla Jeremy Wagner, Michal Mocny i Rick Viscomi z Google.