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.
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 wrażenia użytkownika.
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 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 wydawniczych 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 CMP PubConsent jest lekki, właściciele witryn mogą zachować równowagę między wdrażaniem przydatnych funkcji związanych z zarządzaniem zgodą a zachowaniem jakości wrażeń użytkowników.
Biorąc pod uwagę znaczenie funkcji, jakie zapewnia platforma CMP, oraz jej wpływ na skuteczność, zespół PubTech wyznaczył następujące cele:
- Ograniczenie wpływu CMP PubConsent na INP.
- Zmniejszenie czasu trwania długich zadań związanych z usługą CMP.
- Zmniejsz czas całkowitego blokowania (TBT), który może mieć negatywny wpływ na INP strony.
Jak mierzona była 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 wydawców na wskazanie konkretnych problemów wpływających 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 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 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 zespół ds. technologii reklamowej 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, korzysta z metody postTask o priorytecie user-blocking (wysoki) lub, jeśli jest dostępny, z metody postTask, a w przeciwnym razie nie zwraca nic.
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 usprawnień 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);
});
};
yieldToMainBackground pozwala przeglądarce szybciej wyrenderować następne wyrenderowanie (w tym przypadku zamknięcie interfejsu CMP).
Jak zespół ds. technologii publikacji jeszcze bardziej zredukował czas wczytywania reklamy dzięki optymalizacji układu
Po zastosowaniu strategii dotyczącej rentowności okazało się, że INP w przypadku CMP znacznie wzrosła. Po znacznym skróceniu czasu przetwarzania przez moduł obsługi zdarzeń odkryliśmy możliwość dalszego ulepszenia renderowania następnego wyświetlenia działania Zamknij UI. 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, wprowadziliśmy 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 na późniejszy moment, 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 odgałęzienia, które zostało stworzone z myślą o potrzebach PubTech, w tych komponentach zostały zastosowane następujące optymalizacje:
- 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.
- 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
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 w przypadku dotkniętych klientów INP poprawiło się nawet o 77% na urządzeniach mobilnych, 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 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 zwiększyć jej 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 PubTech, za wsparcie w tym zakresie innowacji, a także dla Jeremy’ego Wagnera, Michala Mocnego i Ricka Viscomi z Google.