Baner cookie a szybkość strony - jak nie zepsuć Core Web Vitals
Baner cookie ładuje się na każdej podstronie, przed wszystkim innym i w polu widzenia użytkownika. Trudno o gorsze miejsce na ciężki skrypt. Jeśli po wdrożeniu CMP wyniki Core Web Vitals spadły, to zwykle nie przypadek - i zwykle da się to naprawić.
Trzy sposoby, w jakie baner psuje wyniki
- CLS (Cumulative Layout Shift) - baner wstrzykiwany po wyrenderowaniu strony przepycha treść w dół. Rozwiązanie: nakładka pozycjonowana
fixed, która nie uczestniczy w układzie dokumentu, zamiast elementu doklejanego dobody. - Blokowanie renderowania - skrypt wpięty synchronicznie w
<head>zatrzymuje parsowanie dokumentu. Baner powinien ładować się asynchronicznie. - Rozmiar transferu - część CMP dociąga kilkaset kilobajtów: silnik, tłumaczenia wszystkich języków, ikony i zewnętrzne czcionki. To dokładka do każdego wejścia.
Ile powinien ważyć baner
Konkret zamiast ogólników - tak wygląda skrypt CookieFox zmierzony na produkcji:
jeden język (np. polski): 35 KB surowo → 13 KB po gzip
28 języków z autodetekcją: 78 KB surowo → 30 KB po gzip
Różnica jest tu pouczająca: wielojęzyczność kosztuje. Jeśli Twoja strona jest wyłącznie polska, wybierz jeden język zamiast autodetekcji, a payload spadnie ponad dwukrotnie.
Włącz kompresję - to jednorazowa robota
Najczęstszy zaniedbany punkt: serwer WWW nie kompresuje application/javascript. Wtedy przeglądarka pobiera 35 KB zamiast 13 KB - trzy razy więcej, bez żadnego powodu. Jedna dyrektywa w konfiguracji nginksa czy Apache'a i problem znika.
Druga rzecz to cache. Konfiguracja banera zmienia się rzadko, więc powinna być serwowana z nagłówkiem ETag i stale-while-revalidate - przy powrotach na stronę przeglądarka nie pobiera jej wcale.
Czego nie da się przyspieszyć
Autoblokada z definicji musi działać zanim załadują się trackery - to jej sens. Dobry baner zdejmuje jednak interceptor po uzyskaniu pełnej zgody, żeby nie obciążać strony przez resztę sesji obserwowaniem drzewa dokumentu.
CookieFox serwuje skrypt bezpośrednio z panelu, z ETagiem i asynchronicznie, a baner jest nakładką fixed - nie przepycha treści. Sprawdź to na własnej stronie albo zobacz, jak wybrać CMP.