Jak zoptymalizować PageSpeed podczas korzystania z ConsentManager?

Jeśli używasz (jakiegokolwiek) banera dotyczącego plików cookie na swojej stronie internetowej, szybkość działania strony będzie niższa ze względu na ilość dodatkowych skryptów, które muszą zostać załadowane. Oto kilka wskazówek, jak możesz poprawić szybkość działania strony:

Optymalizacja techniczna

Użyj długiego czasu buforowania

Możesz ustawić czas, przez jaki skrypty są buforowane, w Menu > CMP > Inne. Domyślnym ustawieniem jest tutaj 30 minut. Używając wyższych wartości, umożliwiasz dłuższe buforowanie i unikasz sytuacji, w której użytkownicy muszą zbyt często ponownie żądać kodów.

Użyj półautomatycznego kodu blokującego

CMP oferuje dwie wersje kodu: automatyczny i półautomatyczny/ręczny kod blokujący. Półautomatyczny kod blokujący ładuje się asynchronicznie, dzięki czemu ma mniejszy wpływ na wydajność strony. Zawsze zalecamy stosowanie półautomatycznego kodu blokującego.

Dodaj kod bezpośrednio na stronie

Zawsze zaleca się dodanie kodu CMP bezpośrednio do kodu strony internetowej zamiast dodawania go za pośrednictwem TagManagera lub podobnego narzędzia. Korzystanie z menedżera tagów opóźni ładowanie strony o około 200–500 ms, co negatywnie wpłynie na wyniki CLS/LCP (patrz poniżej).

Umieść kod CMP jak najwcześniej na swojej stronie internetowej

Aby CMP ładowało się szybko, należy dodać kod CMP jak najwcześniej w <body> lub <head> .

Użyj preconnect

Aby skrócić czas ładowania, możesz dodać następujący kod do swojego <head>:

<link rel="preconnect" href="https://delivery.consentmanager.net">
<link rel="preconnect" href="https://cdn.consentmanager.net">

Uwaga: W zależności od ustawień konta adresy URL używane przez CMP mogą się różnić. Pamiętaj, aby zawsze dodawać pełną subdomenę (np. a.delivery.consentmanager.net) jako preconnect.

Optymalizacja projektu

Skumulowana zmiana układu (CLS)

Dla wyszukiwarki Google istotnym czynnikiem rankingowym jest wskaźnik CLS (Cumulative Layout Shift). Aby zmniejszyć wpływ CLS na Twoją stronę internetową, zalecamy następujące działania:

  • Nie używaj zewnętrznych czcionek (a jedynie pliki czcionek hostowane na własnym serwerze, jeśli to konieczne) w niestandardowym CSS projektu ConsentManager
  • Nie używaj zewnętrznych obrazów (ani żadnych innych obrazów) w niestandardowym kodzie HTML projektu ConsentManager. Jeśli to możliwe, używaj obrazów SVG wbudowanych w kod, aby uniknąć dodatkowego pobierania pliku obrazu.
  • Nie używaj zewnętrznych arkuszy CSS (reguły @import) w niestandardowym arkuszu CSS projektu ConsentManager
  • Nie używaj trybu układu Consentmanager "Push down" (CMP > Projekty > Ustawienia okienka), który pojawi się u góry okna

Largest Contentful Paint (LCP)

Podobnie jak CLS (powyżej), LCP jest kolejnym czynnikiem rankingowym. Aby zmniejszyć wpływ CMP na Twoją stronę internetową, zalecamy następujące działania:

  • Postępuj zgodnie z powyższymi zaleceniami technicznymi (umiejscowienie kodu, preconnect itp.)
  • W miarę możliwości korzystaj z trybu proxy whitelabel
  • Postaraj się zaprojektować warstwę zgody tak, aby zajmowała jak najmniej miejsca (zazwyczaj jest to możliwe tylko w układach na komputery stacjonarne)
  • Ustaw opcje CMP tak, aby warstwa zgody wyświetlała się tylko w krajach UE/EOG, co pozwoli zmniejszyć wpływ LCP w innych krajach
  • Jeśli szybkość ładowania ma kluczowe znaczenie, zalecamy, aby nie korzystać z importów (zmienna konfiguracyjna cmp_waitforimport) i ustawić zakres zgody na zgodę specyficzną dla domeny (Menu > CMP > Ustawienia prawne > Zakres zgody)
  • Unikaj projektów z obrazami w tle (np. projekt z ilustracjami plików cookie)
  • Zmniejsz rozmiar największego tekstu, używając wielu <div> lub <p> zamiast jednego dużego tekstu
  • Możesz ustawić Menu > Wzory > Edytuj > Zachowanie tak, aby warstwa pojawiała się dopiero po x sekundach i/lub po najechaniu myszką. Może to pomóc w radzeniu sobie z LCP.

Interakcja do następnego rysowania (INP)

INP opisuje czas, jaki przeglądarka potrzebuje na obliczenia między interakcją użytkownika (np. kliknięciem „akceptuję”) a momentem, w którym interfejs reaguje. W konfiguracji ConsentManager ma na to wpływ głównie a) liczba dostawców oraz b) opcje projektowe, z których korzystasz. Oto kilka zaleceń, które pomogą zwiększyć wartość INP:

  • Używaj jak najmniejszej liczby dostawców
  • Pogrupuj dostawców równomiernie według celów (np. szybciej jest użyć 10 dostawców na 10 celów niż 100 dostawców zgrupowanych w 1 cel).
  • Unikaj animacji przełączników, nie wyświetlając ich na pierwszej warstwie (wyświetlaj tylko tekst / listę) lub wyłączając animację poprzez Menu > CMPs > Ustawienia ogólne i ustawiając animację na 0:
  • Zastosuj projekt, który nie pokazuje dostawców na pierwszej warstwie (np. bez rozwijanej listy dostawców na pierwszej warstwie)
  • Użyj szablonu, który pokazuje tylko część dostawców na drugim poziomie (poziom preferencji). Możesz to ustawić w ustawieniach szablonu, rozwijając pole „Strona ustawień niestandardowych” > Menu. Użyj szablonu z menu i unikaj szablonów bez menu lub szablonów z rozwijaną karuzelą.

We do our best to keep this purely informative documentation up to date. However, if you notice that any of these guides need a little touch-up, let us know!