A három Core Web Vitals 2026-ban

A Google három elsődleges mezőmérőszámot mér az oldalbetöltési élményhez. Mindegyiknek van egy "Jó" teljesítményszintje:

• Largest Contentful Paint (LCP) — a legnagyobb látható elem megjelenítéséig eltelt idő. Jó: 2,5 másodperc alatt.
• Interaction to Next Paint (INP) — az összes felhasználói interakcióra adott válaszkészség (felváltotta a FID-et 2024 márciusában). Jó: 200 ms alatt.
• Cumulative Layout Shift (CLS) — vizuális stabilitás betöltés közben. Jó: 0,1 alatt.

Egy hozzájárulási banner, amely blokkolja a renderelést, nehéz JavaScript-et futtat betöltéskor, vagy késői elrendezés-változásokat szúr be, bármelyiket a "Fejlesztésre szorul" vagy "Gyenge" sávba taszíthatja — és a Google 28 napos mezőadatokat használ valós Chrome-felhasználóktól, így az átmeneti problémák tartós rangsorolási jelekké válnak.

Hogyan rontják a hozzájárulási bannerek az LCP-t

A Largest Contentful Paint általában egy főképen vagy főcímen aktiválódik. Számos hozzájárulási minta szükségtelenül késlelteti:

Renderelést blokkoló CMP szkriptek

A CMP szinkron betöltése a dokumentum fejlécéből megállítja az HTML-feldolgozást, amíg a szkript letöltődik és lefut. Ha a CMP lassú CDN-en van hosztolva vagy hideg gyorsítótárral rendelkezik, globálisan 200-800 ms-ot adhat az LCP-hez.

A bannert takarja a főképet

Ha a hozzájárulási banner modális felugróként van elhelyezve, amely takarja az LCP-elemet, a böngészők még mindig a takart elemből mérik az LCP-t. Ha azonban a banner a legnagyobb festett elem, akkor LCP-jelölt lesz — és ha JavaScript-en keresztül renderelődik az oldalbetöltés után, az LCP mesterségesen magas lesz.

Javítás: Aszinkron betöltés apró inline bootstrap segítségével

Töltsd be a teljes CMP-t aszinkron módon (`async` vagy `defer`), csak egy apró inline szkripttel a kezdeti banner megjelenítéséhez. Célozz meg egy 5 KB-nál kisebb gzip-elt bootstrap-et. A teljes viselkedési logika, szállítólisták és UI-elemek lazán betölthetők az első festés után.

Hogyan rontják a hozzájárulási bannerek az INP-t

Az Interaction to Next Paint a legrosszabb válaszidőt méri az összes kattintás, érintés és billentyűleütés során egy munkamenetben. A cookie-hozzájárulási interakciók gyakran a felhasználó első interakciói — így egy lassú Elfogadás gomb tönkreteszi a pontszámot.

Nehéz munkavégzés Elfogadáskor

Sok CMP szinkron munkát végez Elfogadáskor: 40+ szállítói szkript betöltése, írás localStorage-ba, dataLayer események küldése, Google Consent Mode frissítések indítása. Ha ez meghaladja a 200 ms-ot, az INP csökken.

Javítás: Munka ütemezése festés után

Az Elfogadás gombra kattintáskor azonnal rejtsd el a bannert, és ütemezd a nehéz munkát `requestIdleCallback` vagy `setTimeout(0)` segítségével. A felhasználó azonnal látja, hogy a banner eltűnik; a szállítói szkriptek a háttérben töltődnek be, anélkül hogy blokkolnák az interakciót.

Hogyan rontják a hozzájárulási bannerek a CLS-t

A Cumulative Layout Shift nyomon követi a váratlan vizuális mozgást. A bannerek klasszikus CLS-forrást jelentenek, amikor a tartalom festése után szúrják be őket a DOM-ba.

Késői banner-befecskendezés

Ha a banner 800 ms-sal az LCP után jelenik meg, lenyomja a tartalmat és elrendezés-eltolódást generál. Még egy kis banner is 0,1-nél magasabb CLS-pontszámot válthat ki, ha a nézőablak nagy részét érinti.

Cookie-beállítási widget újrarenderelések

A lábléc preferencia-widgetjei, amelyek aszinkron módon töltik be a szállítói logókat, az egész láblécet többször is átrendezhetik, tovább növelve a CLS-t.

Javítás: Hely foglalása előre

Használj CSS-t a banner helyének lefoglalásához már az első festéstől — rögzített magasságú helyőrző, `min-height` a lábléccen, vagy alul rögzített banner, amely nem tolja le a tartalmat. A modern CMP-knek alapból kínálniuk kell egy nulla CLS-es konfigurációt.

Google Consent Mode V2 és teljesítmény

A Consent Mode V2 lehetővé teszi a Google-tageknek, hogy cookie nélküli állapotban fussanak a hozzájárulás előtt, jeleket továbbítva `gtag('consent', 'default', {...})` segítségével. Ez kiváló a mérési folytonosság szempontjából, de maga a gtag.js könyvtár 50-90 KB. Töltsd be aszinkron módon, és állítsd be az alapértelmezett értékeket a lehető legkorábban a versenyhelyzetek elkerülése érdekében.

• Állítsd be az alapértelmezett értékeket a gtag betöltése előtt — helyezd a hozzájárulás alapértelmezett hívását a fejlécbe, a gtag.js szkript elé.
• Használj `analytics_storage: 'denied'` alapértelmezettként — minimalizálja a hozzájárulás előtt gyűjtött adatokat.
• Frissítés Elfogadáskor requestIdleCallback segítségével — kerüld a fő szál blokkolását.

A CMP hatásának mérése a Core Web Vitals értékeire

Ne találgass — mérj. Ezekkel az eszközökkel mérd fel a bannered hatását:

• PageSpeed Insights — mezőadatok a Chrome UX Report-ból, plusz laboratóriumi Lighthouse-audit. Hasonlítsd össze a pontszámokat CMP szkripttel és anélkül.
• Web Vitals Chrome-bővítmény — valós idejű LCP, INP, CLS overlay helyi tesztelés közben.
• WebPageTest.org — filmszalag és vízesés nézet, amely pontosan megmutatja, mikor renderelődik a banner és mit blokkol.
• Search Console Core Web Vitals jelentés — 28 napos mezőadatok URL-minta szerint csoportosítva. Ellenőrizd, hogy a bannert tartalmazó céloldalak eltérő pontszámot kapnak-e, mint az anélküliek.

Hogyan marad gyors a FlexyConsent