Trzy Core Web Vitals w 2026 roku

Google mierzy trzy podstawowe metryki terenowe dla doświadczenia strony. Każda ma próg dla wydajności "Dobra":

• Largest Contentful Paint (LCP) — czas do wyrenderowania największego widocznego elementu. Dobrze: poniżej 2,5 sekundy.
• Interaction to Next Paint (INP) — responsywność na wszystkie interakcje użytkownika (zastąpił FID w marcu 2024). Dobrze: poniżej 200ms.
• Cumulative Layout Shift (CLS) — stabilność wizualna podczas ładowania. Dobrze: poniżej 0,1.

Baner zgody, który blokuje renderowanie, uruchamia ciężki JavaScript przy ładowaniu lub wstrzykuje późne zmiany układu, może zepchnąć dowolny z nich do pasma "Wymaga poprawy" lub "Słaby" — a Google używa 28-dniowych danych terenowych od prawdziwych użytkowników Chrome, więc przejściowe problemy stają się trwałymi sygnałami rankingowymi.

Jak banery zgody szkodzą LCP

Largest Contentful Paint zazwyczaj uruchamia się na obrazie hero lub nagłówku. Kilka wzorców zgody niepotrzebnie go opóźnia:

Skrypty CMP blokujące renderowanie

Synchroniczne ładowanie CMP z nagłówka dokumentu zatrzymuje parsowanie HTML do momentu pobrania i wykonania skryptu. Jeśli CMP jest hostowany na wolnym CDN lub ma zimną pamięć podręczną, możesz dodać 200-800ms do LCP globalnie.

Baner zasłaniający element hero

Jeśli baner zgody jest pozycjonowany jako modalny overlay zasłaniający element LCP, przeglądarki nadal będą mierzyć LCP od zasłoniętego elementu. Jeśli jednak baner jest największym namalowanym elementem, staje się kandydatem LCP — a jeśli renderuje się przez JavaScript po załadowaniu strony, LCP jest sztucznie wysoki.

Rozwiązanie: asynchroniczne ładowanie z małym inline bootstrap

Załaduj pełny CMP asynchronicznie (async lub defer), z tylko małym skryptem inline dla początkowego wyświetlania banera. Dąż do bootstrap mniejszego niż 5KB skompresowanego. Pełna logika zachowania, listy dostawców i elementy interfejsu mogą ładować się leniwie po pierwszym wyrenderowaniu.

Jak banery zgody szkodzą INP

Interaction to Next Paint mierzy najgorszy czas odpowiedzi na wszystkie kliknięcia, dotknięcia i naciśnięcia klawiszy podczas sesji. Interakcje ze zgodą na pliki cookie są często pierwszą interakcją użytkownika — więc powolny przycisk Akceptuj niszczy wynik.

Ciężka praca przy Akceptuj

Wiele CMP wykonuje synchroniczną pracę przy Akceptuj: ładowanie 40+ skryptów dostawców, zapis do localStorage, wywoływanie zdarzeń dataLayer, wyzwalanie aktualizacji Google Consent Mode. Jeśli przekracza to 200ms, INP cierpi.

Rozwiązanie: kolejkowanie pracy po wyrenderowaniu

Po kliknięciu Akceptuj natychmiast ukryj baner i zaplanuj ciężką pracę za pomocą requestIdleCallback lub setTimeout(0). Użytkownik widzi natychmiastowe zniknięcie banera; skrypty dostawców ładują się w tle bez blokowania interakcji.

Jak banery zgody szkodzą CLS

Cumulative Layout Shift śledzi nieoczekiwane ruchy wizualne. Banery są klasycznym źródłem CLS, gdy są wstrzykiwane do DOM po namalowaniu treści.

Późne wstrzykiwanie banera

Jeśli baner pojawia się 800ms po LCP, przesuwa treść w dół i generuje przesunięcie układu. Nawet mały baner może wywołać wynik CLS 0,1+ jeśli wpływa na dużą część widocznego obszaru.

Ponowne renderowanie widżetu preferencji plików cookie

Widżety preferencji stopki, które asynchronicznie ładują logo dostawców, mogą wielokrotnie przeformatowywać całą stopkę, zwiększając CLS.

Rozwiązanie: rezerwowanie miejsca z góry

Użyj CSS do zarezerwowania miejsca banera od samego pierwszego wyrenderowania — placeholder o stałej wysokości, min-height na stopce lub baner przyklejony na dole, który nie przesuwa treści. Nowoczesne CMP powinny oferować konfigurację bez CLS od razu.

Google Consent Mode V2 a wydajność

Consent Mode V2 pozwala tagom Google działać w stanie bez plików cookie przed wyrażeniem zgody, przekazując sygnały przez gtag('consent', 'default', {...}). Jest to świetne dla ciągłości pomiaru, ale sama biblioteka gtag.js ma 50-90KB. Ładuj ją asynchronicznie i ustawiaj domyślne jak najwcześniej, aby uniknąć warunków wyścigu.

• Ustaw domyślne przed załadowaniem gtag — umieść wywołanie domyślne zgody w nagłówku, przed skryptem gtag.js.
• Użyj analytics_storage: 'denied' jako domyślnego — minimalizuje dane zbierane przed wyrażeniem zgody.
• Aktualizuj przy Akceptuj przez requestIdleCallback — unikaj blokowania głównego wątku.

Mierzenie wpływu CMP na Core Web Vitals

Nie zgaduj — mierz. Użyj tych narzędzi, aby skwantyfikować wpływ Twojego banera:

• PageSpeed Insights — dane terenowe z Chrome UX Report plus laboratoryjny audyt Lighthouse. Porównaj wyniki z i bez skryptu CMP.
• Rozszerzenie Chrome Web Vitals — nakładka LCP, INP, CLS w czasie rzeczywistym podczas lokalnych testów.
• WebPageTest.org — widok taśmy filmowej i wodospadu pokazujący dokładnie, kiedy baner się renderuje i co blokuje.
• Raport Core Web Vitals w Search Console — 28-dniowe dane terenowe pogrupowane według wzorca URL. Sprawdź, czy strony docelowe z Twoim banerem mają inne wyniki niż strony bez niego.

Jak FlexyConsent pozostaje szybki