Sprawdzone metody dotyczące powiadomień o plikach cookie

Optymalizuj powiadomienia o plikach cookie pod kątem wydajności i łatwości obsługi.

Z tego artykułu dowiesz się, jak powiadomienia o plikach cookie mogą wpływać na wydajność, pomiar wydajności i wrażenia użytkowników.

Występy

Powiadomienia o plikach cookie mogą mieć znaczny wpływ na wydajność strony, ponieważ zwykle są wczytywane na początku procesu ładowania strony i wyświetlają się wszystkim użytkownikom oraz mogą wpływać na wczytywanie reklam i innych treści strony.

Oto jak powiadomienia o plikach cookie mogą wpływać na dane dla wskaźników internetowych:

• Największe wyrenderowanie treści (LCP): większość powiadomień o zgodzie na używanie plików cookie jest stosunkowo niewielka i dlatego zwykle nie zawiera elementu LCP strony. Może się to jednak zdarzyć, zwłaszcza na urządzeniach mobilnych. Na urządzeniach mobilnych powiadomienie o plikach cookie zajmuje zwykle większą część ekranu. Zwykle dzieje się tak, gdy powiadomienie o plikach cookie zawiera duży blok tekstu (bloki tekstu mogą też być elementami LCP).

• Opóźnienie przy pierwszym działaniu (FID): ogólnie rozwiązanie do uzyskiwania zgody użytkowników na pliki cookie powinno mieć minimalny wpływ na FID – zgoda na stosowanie plików cookie wymaga niewielkiego wykonania kodu JavaScript. Jednak technologie wykorzystywane przez te pliki cookie, czyli skrypty reklamowe i śledzące, mogą mieć jednak znaczny wpływ na interaktywność strony. Opóźnienie tych skryptów do momentu zaakceptowania plików cookie może służyć jako technika zmniejszania opóźnienia przy pierwszym działaniu (FID).

• Skumulowane przesunięcie układu (CLS): powiadomienia o zgodzie na używanie plików cookie to często spotykane źródło przesunięć układu.

Ogólnie rzecz biorąc, powiadomienie o plikach cookie od dostawców zewnętrznych będzie miało większy wpływ na skuteczność niż takie, które tworzysz samodzielnie. Problem ten dotyczy nie tylko powiadomień o plikach cookie, ale ogólnie charakteru skryptów innych firm.

Sprawdzone metody

Sprawdzone metody w tej sekcji dotyczą powiadomień o plikach cookie innych firm. Niektóre z tych sprawdzonych metod mają zastosowanie do powiadomień o własnych plikach cookie.

Asynchronicznie ładuj skrypty wykrywające plik cookie

Skrypty powiadomień o plikach cookie powinny być ładowane asynchronicznie. Aby to zrobić, dodaj do tagu skryptu async.

<script src="https://cookie-notice.com/script.js" async>

Skrypty, które nie są asynchroniczne, blokują parser przeglądarki. Opóźnia to wczytywanie strony i LCP. Więcej informacji znajdziesz w sekcji Efektywne ładowanie kodu JavaScript innej firmy.

Ładuj bezpośrednio skrypty powiadomień o plikach cookie

Skrypty powiadomień o plikach cookie powinny być wczytywane „bezpośrednio” przez umieszczenie tagu skryptu w kodzie HTML głównego dokumentu, a nie przez menedżera tagów lub inny skrypt. Użycie menedżera tagów lub dodatkowego skryptu do wstrzyknięcia skryptu powiadomienia o plikach cookie opóźnia wczytywanie skryptu powiadomienia o plikach cookie – zakrywa skrypt przed parserem przeglądarki i zapobiega wczytaniu skryptu przed wykonaniem JavaScriptu.

Nawiązuj wcześniejsze połączenie ze źródłem powiadomień o plikach cookie

Wszystkie witryny, które wczytują skrypty powiadomień o plikach cookie z lokalizacji innej firmy, powinny korzystać ze wskazówek dotyczących zasobów dns-prefetch lub preconnect, aby umożliwić wczesne połączenie ze źródłem hostującym zasoby z informacjami o plikach cookie. Więcej informacji znajdziesz w artykule o nawiązywaniu połączeń sieciowych odpowiednio wcześnie, aby poprawić postrzeganą szybkość stron.

<link rel="preconnect" href="https://cdn.cookie-notice.com/">

Wstępnie wczytuj powiadomienia o plikach cookie

W niektórych witrynach do wczytywania skryptu powiadomień o plikach cookie warto używać wskazówki zasobu preload. Wskazówka dotycząca zasobu preload informuje przeglądarkę, że ma zainicjować wcześniejsze żądanie dotyczące określonego zasobu.

<link rel="preload" href="https://www.cookie-notice.com/cookie-script.js">

Zasób preload jest najbardziej wydajny, gdy jego użycie jest ograniczone do pobierania kilku zasobów kluczowych na stronę. W związku z tym przydatność wstępnego wczytywania skryptu powiadomienia o plikach cookie będzie różna w zależności od sytuacji.

Pamiętaj o obniżeniu wydajności podczas określania stylu powiadomień o plikach cookie

Dostosowanie wyglądu i stylu powiadomienia o plikach cookie innych firm może wiązać się z dodatkowymi kosztami wydajności. Na przykład powiadomienia o plikach cookie innych firm nie zawsze mogą wykorzystywać te same zasoby (np. czcionki internetowe), które są używane w innym miejscu na stronie. Poza tym styl powiadomień o plikach cookie innych firm wczytuje się zwykle na końcu długich łańcuchów żądań. Aby uniknąć niespodzianek, pamiętaj o tym, jak wczytuje się powiadomienie o plikach cookie, i stosuj styl oraz powiązane zasoby.

Unikaj przesunięcia układu

Oto kilka najczęstszych problemów z przesunięciem układu związanych z powiadomieniami o plikach cookie:

• Powiadomienia o plikach cookie u góry ekranu: powiadomienia o plikach cookie u góry ekranu są bardzo częstym źródłem przesunięcia układu. Jeśli powiadomienie o plikach cookie zostanie wstawione do DOM już po wyrenderowaniu otaczającej strony, spowoduje to wypchnięcie elementów strony poniżej w dół. Ten typ przesunięcia układu można wyeliminować, rezerwując miejsce w DOM na potrzeby powiadomienia z prośbą o zgodę. Jeśli nie jest to możliwe – np. gdy wymiary powiadomienia o plikach cookie różnią się w zależności od położenia geograficznego, warto umieścić w nim przyklejoną stopkę lub okno modalne. Oba te sposoby powodują wyświetlenie powiadomienia o plikach cookie jako „nakładki” u góry reszty strony, więc powiadomienie o plikach cookie nie powinno powodować przesunięcia treści podczas wczytywania.
• Animacje: wiele powiadomień o plikach cookie używa animacji – na przykład często spotykanym wzorcem projektowania jest „przesuwanie się” powiadomienia o plikach cookie. Zależnie od sposobu wdrożenia tych efektów mogą one powodować przesunięcia układu. Więcej informacji znajdziesz w artykule Debugowanie przesunięć układu.
• Czcionki: opóźnione wczytywanie czcionek może blokować renderowanie i powodować przesunięcia układu. Zjawisko to jest bardziej zauważalne w przypadku wolnych połączeń.

Zaawansowane optymalizacje wczytywania

Te techniki wymagają więcej pracy, ale mogą jeszcze bardziej zoptymalizować wczytywanie skryptów powiadomień o plikach cookie:

• Przechowywanie w pamięci podręcznej i wyświetlanie skryptów powiadomień o plikach cookie innych firm z Twoich serwerów może przyspieszyć dostarczanie tych zasobów.
• Korzystanie z skryptów service worker zapewnia większą kontrolę nad pobieraniem i zapisywaniem w pamięci podręcznej skryptów innych firm, np. skryptów powiadomień o plikach cookie.

Pomiar skuteczności

Powiadomienia o plikach cookie mogą wpływać na pomiary skuteczności. W tej sekcji omawiamy niektóre konsekwencje i techniki łagodzenia skutków wystąpienia tych problemów.

Monitorowanie użytkowników (RUM)

Niektóre narzędzia analityczne i RUM używają plików cookie do zbierania danych o skuteczności. Jeśli użytkownik odmówi użycia plików cookie, narzędzie nie będzie mogło zebrać danych o skuteczności.

Właściciele witryn powinni wiedzieć o tym zjawisku. Warto też poznać mechanizmy, które wykorzystują narzędzia RUM do zbierania danych. Jednak w typowej witrynie rozbieżność ta prawdopodobnie nie stanowi przyczyny niepokoju, biorąc pod uwagę kierunek i skalę zniekształceń danych. Użycie plików cookie nie jest wymagane do pomiaru skuteczności. Przykładem biblioteki, która nie korzysta z plików cookie, jest biblioteka JavaScript web-vitals.

W zależności od tego, w jaki sposób Twoja witryna używa plików cookie do zbierania danych o skuteczności (czyli czy zawierają one dane osobowe), a także od odpowiednich przepisów, używanie plików cookie do pomiaru skuteczności może nie podlegać tym samym wymaganiom prawnym, co niektóre pliki cookie używane w witrynie do innych celów, np. reklamowych plików cookie. Niektóre witryny, prosząc użytkownika o zgodę na wykorzystanie danych, dzielą pliki cookie dotyczące wydajności jako oddzielną kategorię plików cookie.

Monitorowanie syntetyczne

Bez konfiguracji niestandardowej większość narzędzi syntetycznych (np. Lighthouse i WebPageTest) będzie mierzyć wrażenia nowych użytkowników, którzy nie zareagowali na powiadomienie z prośbą o zgodę na stosowanie plików cookie. Przy zbieraniu danych o skuteczności należy jednak wziąć pod uwagę nie tylko różnice w stanie pamięci podręcznej (np. pierwotna wizyta i powtórna wizyta), ale także różne stany akceptacji plików cookie – akceptowalne, odrzucone lub bez odpowiedzi.

W kolejnych sekcjach omawiamy ustawienia WebPageTest i Lighthouse, które mogą być pomocne przy uwzględnianiu plików cookie w procesach pomiaru skuteczności. Pliki cookie i powiadomienia o plikach cookie to jednak tylko jeden z wielu czynników, których perfekcyjna symulacja w środowiskach laboratoryjnych może być trudna. Z tego powodu ważne jest, aby dane RUM były podstawą testów porównawczych skuteczności, a nie narzędzia syntetyczne.

Testowanie powiadomień o plikach cookie za pomocą WebPageTest

Tworzenie scenariusza

Za pomocą skryptów możesz WebPageTest kliknąć baner z prośbą o zgodę na stosowanie plików cookie podczas zbierania danych śledzenia.

Aby dodać skrypt, otwórz kartę Skrypt. Poniższy skrypt przechodzi do adresu URL, który chcesz przetestować, i klika element DOM o identyfikatorze cookieButton.

combineSteps
navigate    %URL%
clickAndWait    id=cookieButton

Korzystając z tego skryptu, pamiętaj, że:

• combineSteps informuje WebPageTest, że należy połączyć wyniki czynności skryptu w jeden zestaw logów czasu i pomiarów. Przydatne może być również uruchomienie tego skryptu bez combineSteps – osobne logi czasu ułatwiają sprawdzenie, czy zasoby zostały wczytane przed zaakceptowaniem pliku cookie, czy po nim.
• %URL% to konwencja WebPageTest odnosząca się do adresu URL, który jest testowany.
• clickAndWait informuje WebPageTest, że ma kliknąć element wskazany przez attribute=value i poczekać na zakończenie działania przeglądarki. Ma format clickAndWait attribute=Value.

Jeśli skrypt jest prawidłowo skonfigurowany, zrzut ekranu zrobiony przez WebPageTest nie powinien zawierać powiadomienia o plikach cookie (czyli powiadomienie o plikach cookie zostało zaakceptowane).

Więcej informacji o skryptach WebPageTest znajdziesz w dokumentacji WebPageTest.

Ustaw pliki cookie

Aby uruchomić WebPageTest z zestawem plików cookie, przejdź na kartę Zaawansowane i dodaj nagłówek pliku cookie w polu Nagłówki niestandardowe:

Zmiana lokalizacji testu

Aby zmienić lokalizację testową używaną przez WebPageTest, kliknij menu Test Location (Lokalizacja testowa) na karcie Testowanie zaawansowane.

Testowanie powiadomień o plikach cookie w Lighthouse

Ustawianie plików cookie w uruchamianiu narzędzia Lighthouse może służyć jako mechanizm umożliwiający wprowadzenie strony do konkretnego stanu na potrzeby jej testowania. Działanie pliku cookie Lighthouse różni się nieco w zależności od kontekstu (Narzędzia deweloperskie, interfejs wiersza poleceń lub PageSpeed Insights).

DevTools

Gdy narzędzie Lighthouse jest uruchamiane z poziomu Narzędzi deweloperskich, pliki cookie nie są usuwane. Jednak inne rodzaje pamięci masowej są domyślnie czyszczone. Można to zmienić, korzystając z opcji Wyczyść pamięć w panelu ustawień Lighthouse.

CLI

Uruchamianie narzędzia Lighthouse z poziomu interfejsu wiersza poleceń używa nowej instancji Chrome, więc domyślnie pliki cookie nie są ustawiane. Aby uruchomić Lighthouse z poziomu interfejsu wiersza poleceń z konkretnym zestawem plików cookie, użyj tego polecenia:

lighthouse <url> --extra-headers "{\"Cookie\":\"cookie1=abc; cookie2=def; \_id=foo\"}"

Więcej informacji o konfigurowaniu niestandardowych nagłówków żądań w interfejsie wiersza poleceń Lighthouse znajdziesz w artykule o uruchamianiu Lighthouse na stronach uwierzytelnionych.

PageSpeed Insights

Uruchamianie narzędzia Lighthouse z PageSpeed Insights używa nowej instancji Chrome i nie ustawia żadnych plików cookie. Nie można skonfigurować Statystyk PageSeed Insights pod kątem ustawiania określonych plików cookie.

Interfejs użytkownika

Komfort użytkowników (UX) różnych powiadomień z prośbą o zgodę na stosowanie plików cookie wynika głównie z 2 decyzji: umiejscowienia powiadomienia o plikach cookie na stronie oraz zakresu, w jakim użytkownik może dostosować sposób korzystania z plików cookie w witrynie. W tej sekcji omawiamy potencjalne podejścia do tych 2 decyzji.

Rozważając potencjalne projekty powiadomień o plikach cookie, weź pod uwagę te kwestie:

• UX: Czy jest to wygodne dla użytkowników? Jak ten projekt wpłynie na istniejące elementy strony i na przepływ użytkowników?
• Firma: jaka jest strategia dotycząca plików cookie w Twojej witrynie? Jakie są cele powiadomienia o plikach cookie?
• Wymagania prawne: czy jest to zgodne z wymaganiami prawnymi?
• Inżynieria: Ile będzie trzeba wdrożyć i utrzymać? Jak trudne byłoby zmiany?

Miejsce docelowe

Informacje o plikach cookie mogą być wyświetlane w nagłówku, elemencie w tekście lub stopce. Mogą też wyświetlać się u góry treści strony w formacie modalnym lub pełnoekranowa.

Powiadomienia o plikach cookie w nagłówku, stopce i w tekście

Powiadomienia o plikach cookie zwykle umieszcza się w nagłówku lub stopce. Z tych 2 opcji preferowane jest umieszczenie stopki, ponieważ jest dyskretne, nie konkuruje o przyciąganie uwagi z banerami reklamowymi ani powiadomieniami i zazwyczaj nie powoduje CLS. Często jest tu też umieszczana polityka prywatności i warunki korzystania z usługi.

Chociaż powiadomienia o wbudowanych plikach cookie są opcjonalne, ich integracja z istniejącymi interfejsami może być trudna, więc są one rzadko używane.

Okna modalne

Powiadomienia z prośbą o zgodę na stosowanie plików cookie wyświetlają się u góry treści strony. Wygląd i działanie elementów modalnych mogą być różne w zależności od swojego rozmiaru.

Mniejsze okna modalne wyświetlane na części ekranu mogą być dobrą alternatywą dla witryn, które mają problemy z wdrożeniem powiadomień o plikach cookie w sposób, który nie powoduje zmian układu.

Z drugiej strony duże okna modalne, które zasłaniają większość treści na stronie, należy używać z rozwagą. W szczególności w przypadku mniejszych witryn użytkownicy często odrzucają pliki, zamiast akceptować powiadomienie o nieznanej witrynie z zasłoniętą treścią. Chociaż nie muszą to być synonimy, jeśli rozważasz używanie pełnoekranowego okna z prośbą o zgodę na stosowanie plików cookie, pamiętaj o przepisach dotyczących blokowania plików cookie.

Konfigurowalność

Interfejsy powiadomień o plikach cookie dają użytkownikom różne poziomy kontroli nad akceptowanymi plikami cookie.

Brak możliwości konfigurowania

Te banery z plikami cookie w stylu powiadomień nie umożliwiają użytkownikom bezpośredniej rezygnacji z plików cookie. Zwykle zawierają one link do zasad dotyczących plików cookie w witrynie, które zawierają informacje o tym, jak zarządzać plikami cookie w przeglądarce. Zwykle zawiera przycisk „Odrzuć” lub „Zaakceptuj”.

Możliwość konfiguracji

Powiadomienia o plikach cookie dają użytkownikowi możliwość odrzucenia plików cookie, ale nie zapewniają bardziej precyzyjnej kontroli. To podejście do powiadomień o plikach cookie jest rzadziej stosowane.

Pełna konfiguracja

Powiadomienia o plikach cookie dają użytkownikom bardziej szczegółową kontrolę nad akceptowanym sposobem użycia plików cookie.

• UX: Elementy sterujące do konfigurowania użycia plików cookie najczęściej wyświetlają się w osobnym oknie modalnym, który uruchamia się, gdy użytkownik odpowiada na wstępne powiadomienie z prośbą o zgodę na stosowanie plików cookie. Jeśli jednak jest na to miejsce, w niektórych witrynach te opcje będą wyświetlane bezpośrednio w powiadomieniu z prośbą o zgodę na stosowanie plików cookie.

• Szczegółowość: najpowszechniejszym podejściem do konfigurowania plików cookie jest umożliwienie użytkownikom akceptacji plików cookie według ich „kategorii”. Do typowych kategorii plików cookie należą funkcje, kierowanie i pliki cookie używane w mediach społecznościowych.

  Niektóre witryny idą jednak o krok dalej i pozwalają użytkownikom wyrazić zgodę na plik cookie. Innym sposobem zapewnienia użytkownikom bardziej konkretnych ustawień jest podział kategorii plików cookie (takich jak „reklamy”) na konkretne przypadki użycia, np. umożliwienie użytkownikom osobnego wyświetlania reklam podstawowych i spersonalizowanych.