Jak platforma do zarządzania zgodą użytkowników PubConsent zmniejszyła wartość INP dla swoich klientów nawet o 64% dzięki strategii generowania zysków, która wykorzystuje interfejsy API szeregowania w przeglądarce do rozwiązywania problemów z responsywnością 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, uzyskując zgodę użytkowników na używanie plików cookie i technologii śledzenia. Platformy CMP (czyli skrypty innych firm) nie tylko mają na celu zapewnienie zgodności z przepisami, ale także muszą zapewniać minimalny wpływ na wydajność i wygodę użytkowników.
PubConsent CMP to najnowsza usługa firmy PubTech. Platforma do zarządzania zgodą użytkowników PubConsent została zaprojektowana z myślą o głównej skuteczności i jest lekka, co zapewnia optymalną wygodę użytkowników i minimalny wpływ na ogólną wydajność witryny.
Dzięki wprowadzeniu danych od interakcji z następnym wyrenderowaniem (INP) firma PubTech mogła wykryć problemy z responsywnością naszej platformy CMP. W tym studium przypadku firma PubTech pokazuje, jak rozwiązała swoje problemy z responsywnością na platformie do zarządzania zgodą użytkowników PubConsent i jak ulepszyła wartość INP, zanim stała się ona jednym z podstawowych wskaźników internetowych w marcu 2024 r.
Dlaczego PubTech dba o wydajność?
Platforma do zarządzania zgodą użytkowników PubConsent – tak jak większość platform CMP – oferuje funkcję zarządzania zgodą użytkowników zaimplementowaną jako skrypt zewnętrzny na stronach witryny. Zmniejszanie wpływu na wydajność naszej platformy CMP – w tym na szybkość reakcji – jest kluczem do udanej integracji z platformą CMP.
Traktując priorytetowo wydajność i utrzymując prosty skrypt platformy CMP PubConsent, właściciele witryn mogą zachować delikatną równowagę między stosowaniem przydatnych funkcji do zarządzania zgodą użytkowników, a jednocześnie dbaniem o wygodę użytkowników.
Biorąc pod uwagę znaczenie funkcji zapewnianej przez platformę CMP i jej wpływ na skuteczność, firma PubTech wyznaczyła te cele:
- Zminimalizuj wpływ usługi PubConsent na platformie do zarządzania zgodą użytkowników na wartość INP.
- Ogranicz długie zadania, które można przypisać usłudze CMP.
- Skrócenie całkowitego czasu blokowania (TBT), który może mieć negatywny wpływ na wartość INP strony.
Sposób pomiaru INP
PubTech wykorzystała Narzędzia deweloperskie w Chrome do przeprowadzenia wstępnej analizy i ręcznie zdiagnozowanej powolnej interakcji. Ten przepływ pracy pozwolił PubTech zidentyfikować konkretne problemy wpływające na responsywność stron. Na przykład kliknięcie w usłudze CMP polegające na zaakceptowaniu wszystkich plików cookie i zamknięcie okna z prośbą o zgodę na stosowanie tych plików było długim zadaniem, które opóźniło aktualizację renderowania w interfejsie. Jak widać na ilustracji poniżej, interfejs nie został zaktualizowany, aby pokazać, że okno zostało zamknięte, dopóki nie ukończy się długiego zadania.
Podobnie jak przycisk akceptowania wszystkich plików cookie, przycisk odrzucania wszystkich plików lub dostosowywania ich preferencji przebiega tak samo jak w architekturze platformy do zarządzania zgodą użytkowników PubConsent. Z tego powodu ulepszenia opisane w tym studium przypadku wpłynęły na serię interakcji użytkowników z platformą CMP.
To opóźnienie spowodowało, że panel był w trakcie wykonywania zadania zablokowany. Uniemożliwiało to aktualizację renderowania na zauważalnie długi czas, co miało negatywny wpływ na wartość INP strony.
Jak usługa PubTech zoptymalizowała wartość INP pod kątem przycisków i linków
Aby poprawić wskaźnik INP, na platformie do zarządzania zgodą użytkowników w PubConsent zastosowano różne strategie zysku.
Zyskaj zadania o wysokim priorytecie
Metoda yieldToMainUiBlocking pokazana w poniższym fragmencie kodu została zaprojektowana do optymalizowania zadań JavaScriptu o wysokim priorytecie przez generowanie z użyciem metody scheduler.yield, jeśli jest dostępna, ale w zastępstwie metody postTask z user-blocking (wysokim) priorytetem, jeśli jest dostępna wartość postTask, w końcu z brakiem.
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 implementujące te interfejsy API do planowania – które w momencie pisania są dostępne tylko w przeglądarkach opartych na Chromium – mogą korzystać z ulepszeń opisanych w tym studium przypadku. Podejście to zostało jednak 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);
});
};
Wydajność na zadania o średnim stopniu wydajności i zadania w tle
Metoda yieldToMainBackground pokazana w poniższym fragmencie kodu służy do podziału długich zadań, które mają priorytet user-visible (średni) lub background. W rezultacie stosowana jest właściwość scheduler.yield(), jeśli jest ona 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);
});
};
yieldToMainBackground umożliwia przeglądarce wcześniejsze wyrenderowanie następnego wyrenderowania (w tym przypadku zamknięcie interfejsu platformy CMP).
Jak PubTech dodatkowo zmniejszył TBT dzięki optymalizacji układu renderowania
Po zastosowaniu strategii zysku okazało się, że wartość INP znacznie się poprawiła w przypadku platformy CMP. Okazało się, że po znacznej skróceniu czasu przetwarzania modułu obsługi zdarzeń odkryto możliwość wprowadzenia dalszych ulepszeń renderowania w przypadku kolejnego wyrenderowania działania Zamknij interfejs. Pierwotnie to działanie miało na celu usunięcie 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”. Ta metoda najpierw stosuje regułę CSS display: none do okna z prośbą o zgodę na przetwarzanie danych na platformie CMP, gdy użytkownik wyrazi zgodę na jego ukrycie. Następnie usunięcie węzłów DOM powiązanych z oknem CMP jest przenoszone do późniejszego momentu, gdy przeglądarka jest nieaktywna. Służy do tego requestIdleCallback. To 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 dodatkowo obniżyła wartość INP przez ulepszenie biblioteki zasad TCF IAB
Po pomyślnym rozwiązaniu większości problemów z responsywnością platformy CMP odkryliśmy dalsze możliwości ulepszenia w jednej z głównych zależności, czyli w bibliotece Zasad IAB dotyczących przejrzystości i uzyskiwania zgody na przetwarzanie danych (TCF).
Najbardziej kosztownymi pod względem obliczeń komponentami tej biblioteki były „ciągi kompilacji” i „Zgoda na wysyłanie”. Te komponenty są integralnymi częściami biblioteki zasad TCF IAB. Poniższe optymalizacje tych komponentów zostały zastosowane w osobnym rozwidleniu specjalnie na potrzeby potrzeb PubTech:
- 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.
- Unikanie i ograniczanie zbędnych zapętleń w procesie kodowania ograniczeń dotyczących wydawców, który jest realizowany, gdy użytkownik wyrazi zgodę.
Pierwsza z tych optymalizacji skróciła czas spędzany przez platformę CMP na każdym wywołaniu zwrotnym pochodzącym od innej firmy, które łączy się z biblioteką zasad TCF IAB. Druga optymalizacja skróciła czas przetwarzania ponoszonych przez „ciągi tekstowe” . Ta optymalizacja pozwoliła zmniejszyć o 60% pętli wykonywanych za każdym razem, gdy użytkownik wyrazi 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 szybkość reakcji na platformie do zarządzania zgodą użytkowników PubConsent znacznie wzrosła, a w przypadku niektórych reklam widoczność wzrosła nawet o 1,5% dzięki optymalizacji w przypadku żądań 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 wzrosła 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. Pomogło to w znacznym stopniu zmniejszyć nakład pracy związany z każdym wywołaniem zwrotnym z innej firmy wykonywanej 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 wartość INP strony została zmniejszona o ponad połowę – z 470 do 230 milisekund – w wyniku optymalizacji pakietu PubTech SDK.
Podsumowanie
Klienci firmy PubTech szybko dostrzegli pozytywne wyniki INP i wskaźniki biznesowe w wyniku naszych działań optymalizacyjnych. Rozważamy dalszą poprawę wydajności platformy do zarządzania zgodą użytkowników PubConsent, wykorzystując bezcenne dane z funkcji Real User Monitoring (RUM) przesyłane przez klientów. Dane te ściśle śledzą zarówno regresje, jak i postępy, napędzając działania PubTech w zakresie ciągłego doskonalenia.
Jako firma zewnętrzna firma PubTech zdała sobie również sprawę, że może zwiększyć wydajność stron internetowych na dużą skalę i zapewnić większą responsywność przy jednoczesnym uniknięciu negatywnego wpływu na biznesowe wskaźniki KPI. Nigdy nie jest za późno, by zacząć wprowadzać tego typu ulepszenia.
Specjalne podziękowania są Luca Coppoli, dyrektor ds. technologii PubTech za wspieranie tych innowacji, a także Jeremy'emu Wagnerowi, Michalowi Mocny'emu i Rickowi Viscomim z Google.