Mi az a Core Web Vitals és miért fontos? — Magyarul, példákkal
A Google 2021 óta a sebességet rangsorolási tényezőként használja. LCP, CLS, INP — 3 mérőszám, ami a weboldalad helyezését dönti el a Google-keresésben. Mit jelentenek és hogyan javíthatók.
Ha egyéni vállalkozóként vagy kisvállalkozás vezetőjeként weboldalad van, valószínűleg találkoztál már a "Core Web Vitals" kifejezéssel — talán a Google Search Console-ban, vagy egy SEO-szakembertől. Ebben a cikkben kibontjuk magyarul: mi ez, miért számít, és mit jelent a vállalkozásod számára.
1. Mi a Core Web Vitals?
A Core Web Vitals a Google 3 mérőszáma, amelyek a weboldalad felhasználói élményét értékelik. 2021 óta ez egy hivatalos rangsorolási tényező — vagyis két azonos minőségű tartalom közül a gyorsabb nyer a Google találati listán.
A 3 mérőszám:
- LCP (Largest Contentful Paint) — a betöltési sebesség
- CLS (Cumulative Layout Shift) — a vizuális stabilitás
- INP (Interaction to Next Paint) — az interakciós válaszidő
2. LCP — Largest Contentful Paint
Mit mér: mennyi idő alatt látja a felhasználó a weboldal legnagyobb látható elemét. Ez általában a Hero kép, a fő H1 cím, vagy egy nagy szöveges blokk.
Mit jelent egyszerűen: milyen gyorsan jelenik meg a fő tartalom a felhasználó számára.
Cél:
- Zöld (jó): 2.5 másodperc alatt
- Sárga (javítható): 2.5-4.0 másodperc
- Piros (rossz): 4.0 másodperc felett
Mi rontja az LCP-t?
- Optimalizálatlan képek — egy 5 MB-os hero-kép = 3-5 másodperc lassítás mobilon
- Render-blocking JavaScript — sok plug-in (WordPress) vagy nagy bundle (rossz React-konfig)
- Lassú szerver — olcsó shared hosting, ami 1-2 másodperc alatt válaszol
- 3rd-party scripts — Facebook Pixel, Google Ads, chat-widget mind hozzáadnak 200-500 ms-t
Hogyan javítható
- WebP/AVIF képek (50-70% kisebb mint JPG)
- Hero-kép preload (`<link rel="preload" as="image">`)
- Lazy loading minden below-the-fold képhez
- SSG/SSR — a HTML kapásból érkezik, nem JS-render után
- Cloudflare/Vercel edge CDN — közeli szerver minden kontinensen
3. CLS — Cumulative Layout Shift
Mit mér: mennyire "ugrálnak" az elemek betöltés közben. Klasszikus rossz UX: kattintasz egy gombra, de közben betölt egy banner, és véletlenül egy másik gombot nyomsz meg.
Cél:
- Zöld: 0.1 alatt
- Sárga: 0.1-0.25
- Piros: 0.25 felett
Mi rontja a CLS-t?
- Méretezetlen képek — `<img>` tag `width` és `height` attribútum nélkül
- Web fontok — a böngésző először system fonttal renderel, majd "ugrik" a custom fontra (FOUT)
- Reklám-bannerek — AdSense, ami betöltés közben helyet kér
- Cookie-banner — alulról beúszó plakát, ami eltakarja az alsó CTA-kat
- Lazy-loaded szekciók helyfoglalás nélkül — a szekció betöltése után minden lejjebb csúszik
Hogyan javítható
- Minden képnél `width` + `height` attribútum (vagy aspect-ratio CSS)
- Web font-ok preload + `font-display: optional`
- Reklám-helyfoglalás: fix `min-height` a banner-helyen
- Cookie-banner: `position: fixed` (nem foglal el helyet a layoutban)
- Lazy szekciók: stabil placeholder `min-height: 50vh`
4. INP — Interaction to Next Paint
Mit mér: egy kattintás (vagy érintés) után mennyi idő alatt reagál a weboldal vizuálisan. Pl. kattintasz a "Hozzáadom a kosárhoz" gombra — mikor kezd forogni a loader vagy lép vissza a UI?
Az INP 2024 márciusától a régi FID (First Input Delay) helyett vizsgáljuk. Pontosabb, mert nem csak az első, hanem az összes interakciót méri.
Cél:
- Zöld: 200 ms alatt
- Sárga: 200-500 ms
- Piros: 500 ms felett
Mi rontja az INP-t?
- Nehéz JavaScript a fő szálon — a kattintás után az engine 1-2 másodpercig számol valamit
- 3rd-party scripts — analytics, chat-widget, hirdetés mind blokkolja
- Komplex DOM — 5000+ elemű oldal lassan reagál minden interakcióra
- Synchron animációk — non-composited animations (pl. width/height animálás transform helyett)
Hogyan javítható
- Code splitting + lazy loading (csak a látható részek JS-e fut)
- 3rd-party scripts: `defer` vagy `async` attribútum
- Web Worker-be tett komplex számítások (off-main-thread)
- CSS-only animációk transform/opacity használatával (GPU-accelerated)
5. Hogyan mérheted a saját weboldaladat?
4 ingyenes eszköz:
- PageSpeed Insights (pagespeed.web.dev) — beírod a URL-t, és megkapod mind a 3 mérőszámot mobile + desktop bontásban. Plus konkrét javaslatokat.
- Google Search Console → Core Web Vitals report — a valós felhasználói adatokat (CrUX) mutatja az utolsó 28 napra.
- Lighthouse a Chrome DevTools-ban — teljes audit, részletes insight-okkal.
- web.dev/measure — átfogó performance audit ingyenes Google-szolgáltatással.
6. Miért számít ez a vállalkozásod számára?
Konkrét üzleti hatás:
- Google rangsorolás: 1-2 pozíciós különbség a "weboldal készítés Budapest" típusú lekérdezéseken jelentős forgalmi-különbséget okoz.
- Konverziós ráta: minden 1 másodperc lassítás kb. 7%-kal csökkenti a konverziót (Akamai 2024 retail e-commerce study).
- Bounce rate: ha az oldalad LCP 4 másodperc, a látogatók 32%-a elhagyja. 2 másodpercnél ez 9%.
- Mobile felhasználók: 65%-a a forgalomnak mobil — ahol a lassú net + olcsó eszköz miatt minden CWV-pont többet ér.
7. Reális mérőszámok 2026-ban
| Weboldal típus | LCP | CLS | INP |
|---|---|---|---|
| Átlagos WordPress (megosztott shared hosting) | 3.5-6.0 mp | 0.10-0.25 | 300-700 ms |
| WordPress (managed, optimalizált) | 2.0-3.5 mp | 0.05-0.15 | 150-400 ms |
| React + SSG (Cloudflare Pages) | 1.5-2.5 mp | 0.00-0.05 | 100-200 ms |
| Next.js + Vercel (SSR + ISR) | 1.0-2.0 mp | 0.00-0.05 | 50-150 ms |
A smartindustries.hu maga is React + SSG-n fut, és a mobile LCP 1.7-2.5 mp tartomány — zöld zóna. Ha kíváncsi vagy a saját weboldalad mérőszámaira és arra, hogy hogyan javíthatók — kérj ingyenes konzultációt →