Jak platforma CMP PubConsent zmniejszyła wartość INP u klientów nawet o 64% dzięki zastosowaniu strategii generowania przychodów wykorzystującej interfejsy Scheduler API przeglądarki do rozwiązywania problemów z czasem reakcji wykrytych za pomocą Narzędzi deweloperskich w Chrome.
Platformy do zarządzania zgodą użytkowników (CMP) to narzędzia, które pomagają witrynom zachować zgodność z przepisami dotyczącymi prywatności przez uzyskiwanie zgody użytkowników na używanie plików cookie i technologii śledzenia. Głównym celem, jakim jest zapewnienie zgodności z przepisami, platformy CMP, jako zewnętrzne skrypty, muszą także ograniczać wpływ na wydajność i wygodę użytkowników.
PubConsent CMP to najnowsza usługa firmy PubTech. Platforma CMP PubConsent została zaprojektowana z myślą o wydajności. Jest nieskomplikowana, zapewnia optymalną obsługę użytkowników i ma minimalny wpływ na ogólną wydajność witryny.
Dzięki wprowadzeniu danych Interaction to Next Paint (INP) firma PubTech mogła wykryć problemy z responsywnością naszej platformy do zarządzania zgodą użytkowników. W tym studium przypadku firma PubTech pokazuje, jak rozwiązała problemy z responsywnością platformy CMP PubConsent i w jaki sposób poprawiła wartość INP, zanim w marcu 2024 r. stała się jednym z podstawowych wskaźników internetowych, co pokazuje niezmienne zaangażowanie w zapewnianie najwyższej możliwej wydajności usługi CMP.
Dlaczego PubTech zależy na wydajności?
Platforma CMP PubConsent, podobnie jak większość innych platform, oferuje funkcję zarządzania zgodą użytkowników zaimplementowaną na stronach witryny za pomocą zewnętrznego skryptu. Zmniejszanie wpływu naszej oferty platform do zarządzania zgodą użytkowników, w tym na szybkość reagowania, jest kluczowe dla zapewnienia jej udanej integracji.
Traktując priorytetowo wydajność i prostszy skrypt CMP PubConsent, właściciele witryn mogą znaleźć delikatną równowagę między wdrażaniem wartościowych funkcji zarządzania zgodą użytkowników przy zachowaniu wygody użytkowników.
Biorąc pod uwagę znaczenie platformy CMP i jej wpływ na skuteczność, zespół PubTech wyznaczył następujące cele:
- Zminimalizuj wpływ usługi CMP PubConsent na wartość INP.
- Ogranicz długie zadania, które można przypisać usłudze CMP.
- Zmniejsz całkowity czas blokowania (TBT), który może mieć negatywny wpływ na wartość INP strony.
Jak zmierzono wartość INP
PubTech przeprowadził wstępną analizę i ręcznie zdiagnozował powolne interakcje za pomocą Narzędzi deweloperskich w Chrome. Ten przepływ pracy pozwolił PubTech na identyfikowanie konkretnych problemów wpływających na responsywność stron. Na przykład kliknięcie w ramach platformy do zarządzania zgodą użytkowników powodujące zaakceptowanie wszystkich plików cookie, a następnie zamknięcie okna z prośbą o zgodę na stosowanie plików cookie spowodowało długotrwałe działanie, które opóźniło aktualizację renderowania w interfejsie. Jak widać na ilustracji poniżej, interfejs nie został zaktualizowany w taki sposób, że okno zostało zamknięte do czasu zakończenia długiego zadania.
Podobnie jak przycisk akceptacji wszystkich plików cookie, przycisk odrzucania wszystkich plików cookie lub dostosowywania ich ustawień działa w taki sam sposób jak w architekturze platformy CMP PubConsent. Z tego powodu ulepszenia opisane w tym studium przypadku wpłynęły na serię interakcji użytkowników z tą platformą.
To opóźnienie dawało wrażenie, że panel jest zablokowany podczas wykonywania zadania. Zablokowanie aktualizacji renderowania na zauważalnie długi czas miało negatywny wpływ na wartość INP strony.
Jak PubTech zoptymalizował INP pod kątem przycisków i linków
Aby ulepszyć wartość INP, na platformie CMP PubConsent wdrożyliśmy różne strategie zysku.
Wykonywanie zadań o wysokim priorytecie
Metoda yieldToMainUiBlocking widoczna w poniższym fragmencie kodu została zaprojektowana z myślą o optymalizacji zadań JavaScript o wysokim priorytecie. W miarę możliwości następuje wywołanie funkcji scheduler.yield (o ile jest dostępna), a następnie powrót do wartości postTask z wysokim priorytetem user-blocking, gdy jest dostępny parametr postTask, który w końcu nie jest używany.
Pominięto w tym przypadku funkcję setTimeout, ponieważ metoda yieldToMainUiBlocking służy do obsługi operacji dotyczących wewnętrznych ustawień platformy do zarządzania zgodą użytkowników oraz zadań o wysokim priorytecie, które powinny zachować taki priorytet przy jednoczesnym osiągnięciu oczekiwanych wyników. Oznacza to, że z ulepszeń opisanych w tym studium przypadku czerpią korzyści tylko przeglądarki, które stosują te interfejsy API do planowania – które w momencie tworzenia są dostępne tylko w przeglądarkach opartych na Chromium. Mimo to takie podejście zostało uznane za dopuszczalne stopniowe udoskonalenie 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);
});
};
Zyski w przypadku zadań medium i zadań w tle
Metoda yieldToMainBackground widoczna w poniższym fragmencie kodu służy do podziału długich zadań o priorytecie user-visible (średni) lub background. Logika implementuje właściwość scheduler.yield(), jeśli jest ona dostępna, ale różni się ona przez użycie postTask o średnim priorytecie, a na koniec jest przywracana setTimeout w przeglądarkach innych niż Chromium.
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 umożliwia przeglądarce szybsze wyrenderowanie następnego wyrenderowania (w tym przypadku zamknięcie interfejsu platformy CMP).
Jak PubTech jeszcze bardziej zmniejszył TBT dzięki optymalizacji układu renderowania
Po zastosowaniu strategii zysku okazało się, że wartość INP znacznie się poprawiła na platformie do zarządzania zgodą użytkowników. W rzeczywistości, mimo znacznego skrócenia czasu przetwarzania przez moduł obsługi zdarzeń, odkryto możliwość wprowadzenia dalszych ulepszeń przy kolejnym wyrenderowaniu działania Zamknij interfejs. To działanie miało na celu usunięcie elementów z DOM. Stanowiło to wyzwanie, zwłaszcza w przypadku witryn z dużą liczbą węzłów DOM. Spowodowało to nieoczekiwanie zwiększenie ilości pracy związanej z renderowaniem.
Aby rozwiązać zwiększoną ilość pracy związanej z renderowaniem niezbędnym do usunięcia elementów z DOM, wprowadziliśmy rozwiązanie, które nazywa się „leniwym renderowaniem”. W ramach tej metody najpierw w oknie z prośbą o zgodę na przetwarzanie danych osobowych na platformie do zarządzania zgodą użytkowników zostaje zastosowana reguła CSS display: none, gdy użytkownik wyrazi zgodę na jej ukrycie. Usunięcie węzłów DOM powiązanych z oknem platformy do zarządzania zgodą użytkowników jest przenoszone do późniejszego momentu, gdy przeglądarka jest bezczynna za pomocą narzędzia requestIdleCallback. Takie podejście okazało się znacznie szybsze niż usuwanie węzłów DOM w momencie, gdy użytkownik zamknął okno z prośbą o zgodę na przetwarzanie danych osobowych.
Jak PubTech jeszcze bardziej zmniejszył wartość INP dzięki ulepszeniu biblioteki zasad TCF IAB
Po rozwiązaniu większości problemów z responsywnością platformy do zarządzania zgodą użytkowników zidentyfikowaliśmy dalsze możliwości poprawy w jednej z głównych zależności: biblioteki Zasad IAB dotyczących przejrzystości i uzyskiwania zgody na przetwarzanie danych (TCF).
Najbardziej kosztowne pod względem obliczeń komponenty tej biblioteki to „ciągi tworzenia” i „wysyłanie zgody”. Te komponenty są integralnymi częściami biblioteki Zasad IAB dotyczących przejrzystości i uzyskiwania zgody na przetwarzanie danych. Poniższe optymalizacje dla tych komponentów zostały zastosowane w osobnym rozwiązaniu na potrzeby PubTech:
- Ponowne wykorzystywanie obliczonych wyników w procesie dekodowania, który jest wykonywany w przypadku każdego wywołania zwrotnego do zewnętrznego źródła, które musi odczytać zgodę użytkownika.
- Unikanie niepotrzebnych zapętleń i zmniejszenie ich liczby w procesie kodowania ograniczeń dotyczących wydawców, który jest wykonywany, gdy użytkownik wyrazi zgodę.
Pierwsza z tych optymalizacji skróciła czas poświęcany przez platformę do zarządzania zgodą użytkowników na każde wywołanie zwrotne firmy zewnętrznej, które łączy się z biblioteką Zasad IAB dotyczących przejrzystości i uzyskiwania zgody na przetwarzanie danych. Druga optymalizacja skróciła czas przetwarzania ponoszony przez komponent „ciągi kompilacji”. Ta optymalizacja pozwoliła ograniczyć nawet o 60% pętli, które są wykonywane za każdym razem, gdy użytkownik wyraził zgodę.
Wyniki
Dzięki dotychczasowych strategiom generowania zysku i nowym optymalizacjom układu renderowania wartość INP platformy CMP wzrosła o 65%. W rezultacie czas reakcji platformy CMP PubConsent znacznie poprawił się, a w przypadku niektórych reklam widoczność poprawiła się nawet o 1,5% dzięki optymalizacji po otrzymaniu żądania reklamy.
Poza tymi ulepszeniami w bibliotece Zasad IAB dotyczących przejrzystości i uzyskiwania zgody na przetwarzanie danych zaobserwowaliśmy, że liczba wyświetleń na urządzeniach mobilnych wzrosła nawet o 77% w przypadku klientów, których dotyczy ten problem. W rezultacie liczba długich zadań związanych z Zasadami dotyczącymi przejrzystości i uzyskiwania zgody na przetwarzanie danych się zmniejszyła nawet o 85%. Pomogło to znacznie obniżyć koszty związane z każdym wywołaniem zwrotnym firmy zewnętrznej wykonywane w całym cyklu życia strony.
Liczba źródeł przekazujących INP podczas korzystania z platformy CMP PubConsent wzrosła o ponad 400% (na urządzeniach mobilnych z 13% do 55%). W przypadku niektórych klientów wartość INP stron została skrócona o ponad połowę – z 470 do 230 milisekund – dzięki optymalizacjom w pakiecie PubTech SDK.
Podsumowanie
Klienci PubTech szybko dostrzegli pozytywne wyniki INP i wskaźniki biznesowe, które wynikają z naszych działań optymalizacyjnych. Rozważamy też dalsze ulepszenia platformy CMP PubConsent, wykorzystując bezcenne dane monitorowania użytkowników (Real User Monitoring, RUM) od swoich klientów. Dane te ściśle śledzą zarówno regresje, jak i postępy, napędzając wysiłki na rzecz ciągłego ulepszania w PubTech.
Firma PubTech jako firma zewnętrzna zauważyła też, że może zwiększyć wydajność sieci na dużą skalę i zapewnić lepsze reagowanie, a jednocześnie uniknąć negatywnego wpływu na jej wskaźniki KPI. Nigdy nie jest za późno, aby zacząć wprowadzać takie ulepszenia.
Specjalne podziękowania należą