Sprawdzone metody dotyczące powiadomień o plikach cookie

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

Katie Hempenius
Katie Hempenius
X
Barry Pollard

W tym dokumencie omawiamy, jak powiadomienia o plikach cookie mogą wpływać na wydajność, pomiary wydajności i wrażenia użytkowników.

Wydajność

Powiadomienia o plikach cookie mogą mieć znaczny wpływ na wydajność strony, ponieważ zwykle są ładowane wcześnie w trakcie wczytywania strony i są wyświetlane wszystkim użytkownikom oraz mogą wpływać na ładowanie reklam i innych treści strony.

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

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

  • Interakcja z kolejnym wyrenderowaniem (INP): powiadomienia o plikach cookie mogą często powodować wysokie wartości INP, ponieważ zwykle dodają wiele skryptów innych firm po zaakceptowaniu. Głównym problemem jest często wykonanie interakcji Akceptuję, ponieważ jej dodanie wymaga czasu i sprawnego przetwarzania jednocześnie wszystkich skryptów zewnętrznych. Zapoznaj się ze sprawdzonymi metodami poniżej, aby dowiedzieć się, jak zapobiegać takim sytuacjom.

  • Skumulowane przesunięcie układu (CLS): powiadomienia o zgodzie na używanie plików cookie są bardzo częstym źródłem przesunięć układu.

Ogólnie rzecz biorąc, powiadomienia o plikach cookie od dostawców zewnętrznych będą miały większy wpływ na skuteczność niż komunikaty o plikach cookie, które tworzysz samodzielnie. Nie jest to problem wyłącznie z powiadomieniami o plikach cookie, a jedynie o ogólnym charakterze skryptów innych firm.

Sprawdzone metody

Sprawdzone metody w tej sekcji dotyczą powiadomień o plikach cookie innych firm. Niektóre (ale nie wszystkie) z tych sprawdzonych metod będą też mieć zastosowanie do powiadomień o własnych plikach cookie.

Wpływ powiadomień o plikach cookie na wartość INP

Jak już wspomnieliśmy, konkretną przyczyną problemów z INP jest często przycisk Akceptuję z powodu dużej ilości przetwarzania danych po kliknięciu.

Zespół Chrome współpracował z wieloma platformami do zarządzania zgodą użytkowników (CMP), aby po kliknięciu opcji „Zaakceptuj” umożliwić przeglądarce szybkie wyrażenie zgody na wykorzystanie danych przy kolejnym wyrenderowaniu. Przykład znajdziesz w tym studium przypadku PubTech.

Jeśli dotyczy to Twojej platformy CMP, skontaktuj się z nią, aby dowiedzieć się, czy może w podobny sposób uniknąć problemów z INP w przypadku witryn umieszczonych na stronach. Przeczytaj artykuł Optymalizacja długich zadań, aby dowiedzieć się, jak uzyskać zyski.

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

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

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

Skrypty powiadomień o plikach cookie powinny być ładowane „bezpośrednio”, czyli poprzez umieszczenie tagu skryptu w kodzie HTML głównego dokumentu, a nie ładowanie przez menedżera tagów lub inny skrypt. Użycie menedżera tagów lub skryptu dodatkowego do wstrzykiwania skryptu powiadomień o plikach cookie opóźnia wczytywanie tego skryptu: zasłania go przed parserem podglądu przeglądarki i uniemożliwia załadowanie skryptu przed wykonaniem JavaScriptu.

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 ułatwić nawiązywanie wczesnego połączenia ze źródłem hostującym zasoby powiadomień o plikach cookie. Więcej informacji znajdziesz w artykule Wcześniejsze nawiązywanie połączeń sieciowych w celu poprawy postrzeganej szybkości działania stron.

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

Niektóre witryny skorzystałyby ze wskazówek na temat zasobów preload, żeby wczytać skrypt z informacjami o plikach cookie. Wskazówka dotycząca zasobu preload informuje przeglądarkę, że ma zainicjować wczesne żądanie dotyczące określonego zasobu.

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

preload działa najlepiej, gdy jego wykorzystanie jest ograniczone do pobierania kilku kluczowych zasobów na stronę. Użyteczność wstępnego wczytywania skryptu powiadomień o plikach cookie różni się w zależności od sytuacji.

Dostosowywanie wyglądu i sposobu działania powiadomień o plikach cookie innych firm może spowodować naliczenie dodatkowych kosztów wydajności. Na przykład powiadomienia o plikach cookie innych firm nie zawsze umożliwiają ponowne korzystanie z tych samych zasobów (np. czcionek internetowych), które są używane w innych miejscach na stronie. Poza tym powiadomienia o plikach cookie innych firm zwykle wczytują się na końcu długich łańcuchów żądań. Aby uniknąć niespodzianek, zwracaj uwagę na sposób wczytywania powiadomienia o plikach cookie oraz na stosowanie stylów i powiązanych zasobów.

Unikanie przesunięć 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ęć układu. Jeśli powiadomienie o plikach cookie zostanie wstawione do modelu DOM już po wyrenderowaniu otaczającej je strony, spowoduje to przesunięcie znajdujących się niżej elementów strony w dół. Tego typu przesunięcia układu można wyeliminować, zarezerwując w DOMU miejsce na powiadomienie z prośbą o zgodę. Jeśli nie jest to możliwe, bo na przykład wymiary pliku cookie różnią się w zależności od regionu, do jego wyświetlania należy użyć stałej stopki lub okna modalnego. W obu przypadkach powiadomienie o plikach cookie wyświetla się jako „nakładka” u góry reszty strony, więc nie powinny one powodować przesunięcia treści podczas wczytywania.
  • Animacje: wiele powiadomień o plikach cookie korzysta z animacji, np. „wsuwanie się do wewnątrz” powiadomienia o plikach cookie jest typowym wzorcem projektowym. W zależności od sposobu wdrożenia efektów mogą powodować przesunięcia układu. Więcej informacji znajdziesz w artykule Debugowanie przesunięć układu.
  • Czcionki: opóźnione wczytywanie może blokować renderowanie i powodować przesuwanie układu. Zjawisko to jest bardziej widoczne przy wolnym połączeniu.

Zaawansowane optymalizacje wczytywania

Implementacja tych technik wymaga więcej pracy, ale może dodatkowo zoptymalizować wczytywanie skryptów powiadomień o plikach cookie:

Pomiar skuteczności

Informacje o plikach cookie mogą wpływać na pomiary skuteczności. W tej sekcji omawiamy niektóre z tych konsekwencji i techniki ich ograniczania.

Monitorowanie rzeczywistych użytkowników (RUM)

Niektóre narzędzia analityczne i RUM wykorzystują pliki cookie do zbierania danych o skuteczności. Jeśli użytkownik odmówi użycia plików cookie, narzędzia te nie będą mogły rejestrować danych o wydajności.

Warto wiedzieć o tym zjawisku na stronach internetowych; warto również zapoznać się z mechanizmami, których narzędzie RUM wykorzystuje do zbierania danych. Jednak w typowej lokalizacji ta rozbieżność prawdopodobnie nie jest powodem do niepokoju ze względu na kierunek i stopień zniekształcenia danych. Używanie plików cookie nie jest technicznym wymaganiem do pomiaru skuteczności. Biblioteka JavaScript web- Vitals to przykład biblioteki, która nie korzysta z plików cookie.

W zależności od tego, jak witryna wykorzystuje pliki cookie do zbierania danych o skuteczności (czyli czy zawierają one dane osobowe), a także od odpowiednich przepisów prawa, 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. Niektóre witryny, które proszą o zgodę użytkownika, decydują się wyodrębnić pliki cookie 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 użytkownika po raz pierwszy, który nie odpowiedział na powiadomienie z prośbą o zgodę na stosowanie plików cookie. Podczas zbierania danych o skuteczności należy jednak brać pod uwagę nie tylko różnice w stanie pamięci podręcznej (np. pierwsza wizyta a powtórna wizyta), ale także zróżnicowanie stanu akceptacji plików cookie (zaakceptowano, odrzucono lub nie udzielono odpowiedzi).

W kolejnych sekcjach omawiamy ustawienia narzędzi WebPageTest i Lighthouse, które mogą pomóc w uwzględnianiu powiadomień o plikach cookie w procesach pomiaru skuteczności. Pliki cookie i powiadomienia o plikach cookie to jednak tylko jeden z wielu czynników, których dokładne symulowanie w środowiskach laboratoryjnych może być trudne. Z tego powodu ważne jest, aby w testach porównawczych wydajności były kluczowe dane RUM, a nie używać narzędzi syntetycznych.

Używaj skryptów

Za pomocą skryptów możesz umożliwić WebPageTest kliknięcie banera z prośbą o zgodę na stosowanie plików cookie podczas zbierania danych.

Aby dodać skrypt, przejdź na kartę Skrypt. Skrypt poniżej przechodzi do adresu URL, który ma zostać przetestowany, a następnie klika element DOM z elementem id=cookieButton.

combineSteps
navigate    %URL%
clickAndWait    id=cookieButton

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

  • combineSteps informuje WebPageTest, aby „łączyć” wyniki działań skryptów, które następują w jednym zestawie logów czasu i pomiarów. Pomocne może być też uruchomienie tego skryptu bez combineSteps – oddzielne logi czasu ułatwiają sprawdzanie, czy zasoby zostały wczytane przed, czy po zaakceptowaniu plików cookie.
  • %URL% to konwencja WebPageTest odnosząca się do testowanego adresu URL.
  • clickAndWait informuje WebPageTest, aby kliknął element wskazywany przez parametr attribute=value i poczekał na zakończenie dalszej aktywności przeglądarki. Ma on format clickAndWait attribute=Value.

Jeśli ten skrypt został prawidłowo skonfigurowany, zrzut ekranu wykonany przez WebPageTest nie powinien pokazywać powiadomienia o plikach cookie (informacja o pliku cookie została zaakceptowana).

Więcej informacji o tworzeniu skryptów WebPageTest znajdziesz w dokumentacji WebPageTest.

Ustaw pliki cookie

Aby wykonać test WebPageTest z użyciem zestawu plików cookie, otwórz kartę Zaawansowane i dodaj nagłówek pliku cookie do pola Nagłówki niestandardowe:

Pole „Niestandardowe nagłówki” w teście WebPageTest

Zmiana lokalizacji testu

Aby zmienić lokalizację testową używaną przez WebPageTest, kliknij menu Lokalizacja testowa na karcie Testy zaawansowane.

Menu „Lokalizacja testowa” w WebPageTest

Ustawianie plików cookie podczas uruchomienia Lighthouse może służyć jako mechanizm do osiągnięcia określonego stanu strony na potrzeby testów w Lighthouse. Działanie plików cookie w Lighthouse nieco różni się w zależności od kontekstu (Narzędzia deweloperskie, interfejs wiersza poleceń lub PageSpeed Insights).

DevTools

Gdy Lighthouse uruchamia się z poziomu Narzędzi deweloperskich, pliki cookie nie są czyszczone. Inne typy pamięci masowej są domyślnie czyszczone. Można to zmienić za pomocą opcji Wyczyść pamięć w panelu ustawień Lighthouse.

Zrzut ekranu pokazujący opcję „Wyczyść pamięć” w Lighthouse

CLI

Uruchomienie Lighthouse z interfejsu wiersza poleceń spowoduje użycie nowej instancji Chrome, więc domyślnie nie są ustawione żadne pliki cookie. Aby uruchomić Lighthouse z interfejsu wiersza poleceń z określonym zestawem plików cookie, użyj tego polecenia:

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

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

PageSpeed Insights

Narzędzie Lighthouse z PageSpeed Insights korzysta z nowej instancji Chrome i nie ustawia żadnych plików cookie. Statystyk PageSeed nie można skonfigurować tak, aby zapisywały określone pliki cookie.

Interfejs użytkownika

Na wrażenia użytkownika dotyczące różnych powiadomień o zgodzie na stosowanie plików cookie wynikają przede wszystkim z 2 decyzji: umiejscowienia powiadomienia o plikach cookie na stronie oraz zakresu, w jakim użytkownik może dostosować sposób wykorzystywania plików cookie w witrynie. W tej sekcji omawiamy potencjalne podejścia do tych 2 decyzji.

Rozważając możliwe warianty informacji o plikach cookie, weź pod uwagę te kwestie:

  • UX: Czy to pozytywne wrażenie? Jak taki projekt wpłynie na istniejące elementy strony i zachowania użytkowników?
  • Firma: jaka jest strategia dotycząca plików cookie w Twojej witrynie? Jakie są cele związane z powiadomieniem o plikach cookie?
  • Wymagania prawne: czy to jest zgodne z wymaganiami prawnymi?
  • Inżynieria: Ile wysiłku wymagałoby wdrożenie i utrzymanie tej kampanii? Jak trudno byłoby je zmienić?

Miejsce docelowe

Powiadomienia o plikach cookie mogą być wyświetlane jako nagłówek, element wbudowany lub stopka. Mogą się też wyświetlać u góry strony w formacie modalnym lub wyświetlać się jako pełnoekranowe.

Schemat przedstawiający przykłady różnych opcji miejsc docelowych powiadomień o plikach cookie

Informacje o plikach cookie są zwykle umieszczane w nagłówku lub stopce. Spośród tych 2 opcji najlepszym rozwiązaniem jest umieszczenie stopki, ponieważ nie przeszkadza w reklamie, nie konkuruje o przyciągnięcie uwagi z banerami reklamowymi ani powiadomieniami i zwykle nie powoduje zmiany CLS. Można tam też znaleźć politykę prywatności i warunki korzystania z usług.

Choć wbudowane powiadomienia o plikach cookie są opcjonalne, integrowanie ich z istniejącymi interfejsami może być trudne, dlatego są rzadkie.

Okno modalne

Okno modalne to powiadomienia o zgodzie na używanie plików cookie, wyświetlane u góry treści strony. Moduły mogą wyglądać i działać różnie w zależności od rozmiaru.

Mniejsze, częściowo widoczne okna modalne mogą być dobrym rozwiązaniem dla witryn, które mają problem z implementacją powiadomień o plikach cookie w sposób, który nie powoduje przesunięć układu.

Z drugiej strony należy korzystać z dużych modali, które zasłaniają większość treści strony. Mniejsze witryny mogą mieć problemy z przechodzeniem do witryny przez użytkowników zamiast akceptować powiadomienia o plikach cookie pochodzące z nieznanej witryny z zasłoniętymi treściami. Chociaż nie są to koniecznie pojęcia, to jeśli rozważasz używanie pełnoekranowego modalnego uzyskiwania zgody na pliki cookie, zapoznaj się z przepisami dotyczącymi zasłaniania plików cookie.

Konfigurowalność

Interfejsy powiadomień o plikach cookie dają użytkownikom różne poziomy kontroli nad akceptowaniem plików cookie.

Brak możliwości konfiguracji

Te przypominające powiadomienia banery z plikami cookie nie dają użytkownikom bezpośrednich opcji rezygnacji z plików cookie. Zamiast tego zwykle na stronie znajdują się linki do zasad dotyczących plików cookie, które mogą zapewnić użytkownikom informacje o zarządzaniu plikami cookie w przeglądarce. Zwykle zawierają one przyciski „Odrzuć” i „Zaakceptuj”.

Diagram przedstawiający przykłady powiadomień o plikach cookie bez możliwości ich konfigurowania

Pewna możliwość konfigurowania

Takie powiadomienia dają użytkownikowi możliwość ich odrzucenia, ale nie zapewniają bardziej szczegółowych ustawień. Takie podejście do powiadomień o plikach cookie jest mniej powszechne.

Diagram przedstawiający przykłady powiadomień o plikach cookie z pewną możliwością ich konfiguracji

Pełna konfiguracja

Te informacje o plikach cookie dają użytkownikom bardziej szczegółową kontrolę nad konfiguracją korzystania z plików cookie przez użytkowników.

Diagram przedstawiający przykłady powiadomień o chaosie z pełną konfiguracją plików cookie

  • UX: opcje konfigurowania użycia plików cookie najczęściej wyświetlają się w osobnym oknie, które pojawia się, gdy użytkownik odpowie na pierwsze powiadomienie z prośbą o zgodę na stosowanie plików cookie. Jeśli jednak jest wystarczająco dużo miejsca, niektóre witryny będą wyświetlać te ustawienia w pierwszym powiadomieniu z prośbą o zgodę na stosowanie plików cookie.

  • Szczegółowość: najczęstszą metodą konfigurowania plików cookie jest umożliwienie użytkownikom ich akceptacji według ich „kategorii”. Typowe kategorie plików cookie to między innymi pliki funkcjonalne, służące do kierowania i mediów społecznościowych.

    Niektóre witryny pójdą jednak o krok dalej i umożliwiają użytkownikom wyrażenie zgody na wykorzystanie danych za pomocą pliku cookie. Innym sposobem na zapewnienie użytkownikom bardziej szczegółowych ustawień jest podział kategorii plików cookie, takich jak „reklamy”, na konkretne przypadki użycia, np. umożliwiając im oddzielną akceptację „reklam podstawowych” i „reklam spersonalizowanych”.

Diagram przedstawiający przykłady powiadomień o plikach cookie z pełną konfiguracją plików cookie