Core Web Vitals és Page Experience

A Core Web Vitals (CWV) három kulcsmutató, amelyeket a Google a valódi felhasználói élmény mérésére vezetett be. A Google rangsorolási szempontnak tekinti őket: a gyenge értékű oldalak hátrányba kerülhetnek.

LCP, Largest Contentful Paint: A legnagyobb tartalom elem betöltési ideje. Jó érték: ≤ 2,5 másodperc.
INP, Interaction to Next Paint: A felhasználói interakciókra adott válaszidő. Jó érték: ≤ 200 ms.
CLS, Cumulative Layout Shift: Váratlan elrendezésváltozások összesített mértéke. Jó érték: ≤ 0,1

Az INP 2024-ben váltotta le a korábbi FID (First Input Delay) mutatót, és a teljes interaktivitást méri, nem csak az első interakciót.

Az LCP azt méri, mikor jelenik meg az oldal legnagyobb látható tartalma, jellemzően egy hero kép, videó borítókép vagy nagyobb szövegblokk.

Hogyan javítod?
- Szerver válaszidő csökkentése (TTFB): Használj CDN-t (pl. Cloudflare), optimalizáld a szerver konfigurációját
- Képek optimalizálása: Konvertálj WebP formátumra, adj meg width és height attribútumokat az img elemeknek
- CSS/JS blokkolás megszüntetése: Töltsd be aszinkron módon a nem kritikus szkripteket
- Lazy loading helyes alkalmazása: Az LCP elem (hero kép) NE legyen lazy-loaded, ez késlelteti a betöltést

Helyes: az LCP elem (hero kép) fetchpriority="high" attribútummal prioritással töltődik be.
Nem LCP elem esetén: loading="lazy" rendben van.

Az INP az oldal interaktivitását méri: mennyire gyorsan reagál a böngésző minden felhasználói interakcióra (kattintás, gombnyomás, form kitöltés). Magas INP esetén az oldal "döcög", nem reagál azonnal.

Hogyan javítod?
- JavaScript blokkot csökkentsd: Nagy JS fájlokat bontsd kisebb modulokra (code splitting)
- Third-party szkriptek: Hirdetési és analitikai szkripteket töltsd be aszinkron módon
- Web Workers: Időigényes JavaScript feladatokat futtass háttérszálon
- requestIdleCallback: Másodlagos funkciókat csak tétlen böngészőnél futtasd

A CLS azt méri, mennyit "ugrik" az oldal elrendezése betöltés közben. Ha egy gombra akarsz kattintani és az hirdetés betöltésekor a gomb eltolódik, ez CLS.

Hogyan javítod?
- Képek és videók mérete: Mindig adj meg width és height attribútumokat
- Webfontok: Használj font-display: optional vagy swap értéket
- Hirdetések: Foglalj le fix helyet a hirdetésnek a DOM-ban, ne töltse el dinamikusan
- Dinamikus tartalom: Animáld, ha betöltés után jelenik meg az oldalon

• Google PageSpeed Insights, Laboratóriumi és valódi (CrUX) mérés
• Google Search Console → Core Web Vitals, Valódi felhasználói adatok URL-szintű bontásban
• Chrome DevTools / Lighthouse, Fejlesztői környezetben való mérés
• Chrome UX Report (CrUX), Nyilvános adatbázis a népszerű oldalakra
• Web Vitals Chrome Extension, Valós idejű CWV értékek böngészés közben

A Page Experience egy összevont Google-jel, amely több tényezőt kombinál a felhasználói élmény megítéléséhez:

• Core Web Vitals (LCP, INP, CLS)
• Mobilbarát kialakítás, reszponzív design
• HTTPS, biztonságos kapcsolat
• Biztonságos böngészés, nincs rosszindulatú tartalom
• Nem zavaró interstitials, nem takarják el a tartalmat felugró ablakok

Javítási prioritások:
1. Hozd zöldre a Core Web Vitals értékeket (LCP ≤ 2,5s, INP ≤ 200ms, CLS ≤ 0,1)
2. Biztosítsd a mobilbarát kialakítást (reszponzív sablon)
3. Aktiváld a HTTPS-t és szüntesd meg a mixed content hibákat
4. Távolítsd el a teljes képernyős, nehezen bezárható felugrókat

• PageSpeed Insights pontszám ≥ 90 mobilon és asztali gépen
• LCP elem azonosítva és optimalizálva (WebP, fetchpriority="high")
• CLS ≤ 0,1, minden kép és hirdetés mérete rögzítve
• INP ≤ 200ms, harmadik féltől származó szkriptek aszinkron betöltve
• Search Console CWV jelentésben nincs "Rossz" besorolású URL
• Mobilbarát teszt: zöld
• HTTPS + nincs mixed content hiba

Egy 2026-os valós eset: egy 1200 termékes budapesti lakástextil-kereskedés tulajdonosa WooCommerce alapon üzemeltette webshopját. A Google Search Console CWV-riportjában a mobilos LCP értéke 5,1 másodperc volt — ez "Rossz" besorolást eredményezett 340 termékoldalnál.

A Core Web Vitals javítása három lépésben történt:
1. A hero képeket WebP formátumra konvertálták, és a hero img taghoz fetchpriority="high" attribútumot adtak. LCP: 5,1 s → 2,3 s.
2. Három analitikai és egy retargetingszript aszinkron betöltésre állt át. INP: 390 ms → 140 ms.
3. A hirdetések helyét CSS-ben lefoglalták fix magassággal. CLS: 0,28 → 0,07.

Az oldalsebesség (page speed) javulása után a Google 8 hét alatt újraértékelte a CWV-státuszt. Az organikus mobilos kattintások 31%-kal nőttek, a kosárba helyezések száma mobilon 18%-kal emelkedett. A 2026-os Core Update tovább emelte a Page Experience súlyát a rangsorolásban, ami a webshopnak látható pozíciójavulást hozott a kulcsszavain.

Fontos tanulság: az algoritmusfrissítés (algorithm update) hatásait leggyorsabban azok érezték meg pozitívan, akik már zöld CWV-értékeket mutattak a frissítés előtt.

• Az LCP elem lazy-loading beállítása: Sok fejlesztő alapértelmezetten alkalmaz loading="lazy" attribútumot minden képre. Ha a hero kép is ilyen, az LCP drasztikusan romlik. Az LCP elemet mindig fetchpriority="high" attribútummal töltsd be, lazy-loading nélkül.
• Külső fontok blokkolása: Ha egy Google Font nem kap font-display: swap értéket, a böngésző megvárja a betöltését, mielőtt szöveget renderel. Ez ront az LCP-n és a CLS-en is. Mindig add meg a display=swap paramétert a Google Fonts URL-ben.
• Dinamikus tartalom rögzítetlen helyfoglalással: Bannerek, ajánlott termékblokkok, cookie-sávok — ha nem foglalnak le helyet a DOM-ban, megjelenésükkor elcsúsztatják az elrendezést és romlik a CLS. Minden dinamikusan betöltődő elemnek előre definiált méretű konténer kell.

A Core Web Vitals három mérőszáma — LCP (betöltési sebesség), INP (interaktivitás) és CLS (elrendezés-stabilitás) — a Google Page Experience signal részét képezi, és közvetlen rangsorolási tényező. 2026-ban a mobilos CWV-értékek különösen kritikusak: az LCP ≤ 2,5 s, INP ≤ 200 ms és CLS ≤ 0,1 értékek az optimális tartomány. A Search Console CWV-riportja az első hely az ellenőrzésre.

1. Nyisd meg a Google Search Console-ban a Core Web Vitals riportot, és azonosítsd a "Rossz" és "Fejlesztést igényel" kategóriájú URL-eket.
2. Futtasd a PageSpeed Insights eszközt a legfontosabb landing oldalaidon mobilon — nézd meg az LCP-elemet és a diagnosztikai javaslatokat.
3. Az indexelés (indexing) és a CWV kapcsolatát is vizsgáld meg: a gyengén teljesítő oldalak lassabban újraindexelődnek is.

👉 Autopilot csomag megismerése — a Publicator AI automatikusan figyeli és jelzi a technikai SEO-problémákat, beleértve a CWV-romlást is.