Mobilos Core Web Vitals, miért teljesít másképp az oldalad mobilon?

Az oldalad valószínűleg asztali gépen sokkal gyorsabban tölt be, mint mobilon. A mobilos Core Web Vitals értékek általában rosszabbak, mert a mobileszközök lassabb processzorral, korlátozott sávszélességgel és változó hálózati körülményekkel működnek.

A mobilos felhasználók általában:
- Lassabb CPU-t használnak
- Korlátozott RAM-mal rendelkeznek (JavaScript futtatása drágább)
- Változó hálózaton vannak (4G, 3G, WiFi)
- Kisebb képernyőn böngésznek

Eredmény: Ugyanaz a weboldal mobilon akár 2–3× lassabb LCP-t és magasabb CLS-t produkálhat, mint asztali gépen.

A három mobilos Core Web Vitals célérték:
- LCP (Largest Contentful Paint): ≤ 2,5 mp
- INP (Interaction to Next Paint): ≤ 200 ms
- CLS (Cumulative Layout Shift): ≤ 0,1

Ezeket a 75. percentilisen mérik, azaz a látogatók 75%-ának kell elérnie a célértéket.

Az LCP (Largest Contentful Paint) általában a főkép vagy a főcím betöltési ideje. Mobilon különösen kritikus.

1. Képformátum és méret optimalizálás

Mobilon 800px szélességű kép elegendő, ne töltsd be a 2000px-es asztali képet mobilra!

```html
<picture>
<source srcset="hero-800w.webp" type="image/webp" media="(max-width: 768px)">
<source srcset="hero-1600w.webp" type="image/webp" media="(min-width: 769px)">
<img src="hero-800w.jpg" alt="Főkép" width="800" height="450">
</picture>
```

2. Képek előtöltése (preload)

```html
<link rel="preload" as="image" href="hero-800w.webp" media="(max-width: 768px)">
```

Az LCP-kép előtöltése akár 0,5–1 másodperccel csökkentheti a betöltési időt.

3. Lazy loading helyes alkalmazása

Figyelem: Az LCP-képre soha ne alkalmazz loading="lazy" attribútumot!

```html
<!-- LCP-kép: NE lazy load -->
<img src="hero.jpg" alt="Főkép" loading="eager">

<!-- Képernyőn kívüli képek: lazy load -->
<img src="termek.jpg" alt="Termék" loading="lazy">
```

Az INP (Interaction to Next Paint) méri, mennyi idő telik el egy kattintás/érintés és az oldal vizuális válasza között. Mobilon különösen fontos, mert a JavaScript futtatása lassabb CPU-n sokkal több időt vesz igénybe.

1. JavaScript bundle méret csökkentése
- Code splitting: csak az aktuálisan szükséges JS töltődjön be
- Tree shaking: távolítsd el a nem használt kód-részeket
- Kerüld a nagy, monolitikus JavaScript könyvtárakat

2. Main thread tehermentesítése
Nehéz számítások esetén Web Worker használata ajánlott.

3. Third-party szkriptek kezelése
A Google Analytics, Facebook Pixel, chat widgetek lelassítják a mobilos teljesítményt.
- Töltsd be őket aszinkron módon (async/defer)
- Késleltett betöltés (csak scroll után)
- Fontold meg a szükségtelen szkriptek eltávolítását

A CLS (Cumulative Layout Shift) különösen mobilon problémás, mert a kisebb képernyőn az ugráló elemek arányosan nagyobb területet érintenek.

Leggyakoribb mobilos CLS-okok:

1. Méret nélküli képek
```html
<!-- Helytelen -->
<img src="termek.jpg" alt="Termék">

<!-- Helyes -->
<img src="termek.jpg" alt="Termék" width="400" height="300">
```

2. Betűtípusok váltása (FOUT)
```css
@font-face {
font-family: 'Montserrat';
src: url('montserrat.woff2');
font-display: optional; /* Legjobb CLS-re */
}
```

3. Dinamikusan betöltött tartalom
Ha hirdetések vagy bannerek tolják el a tartalmat, foglalj helyet előre:
```css
.ad-placeholder {
min-height: 90px;
background: #f5f5f5;
}
```

• PageSpeed Insights (pagespeed.web.dev), Lab + valós adat (CrUX), mindig nézd a Mobil fület!
• Google Search Console, Valós felhasználói adat, CWV-jelentés → szűrj mobilra
• Chrome DevTools, F12 → Lighthouse → Mobil mód
• Web Vitals Chrome Extension, Valós idejű CWV böngészés közben

Fontos: A PageSpeed Insights-ban mindig nézd meg a "Mobil" fület, az asztali értékek sokkal jobbak lehetnek, de a Google a mobilos értékeket veszi figyelembe!

Egy nyíregyházi online ékszerüzlet 2026 februárjában szembesült azzal, hogy a mobilos Core Web Vitals értékei kritikusan rosszak: LCP 5,8 másodperc (piros), CLS 0,32 (piros), INP 520 ms (piros). Az asztali értékek ugyanakkor zöldek voltak — pontosan a mobilos CPU-teljesítmény és sávszélesség különbsége okozta a gap-et.

Az audit megállapításai:
- A főkép (1800×1200 px, 640 KB JPEG) loading="lazy" volt beállítva, ami az LCP-t 5,8 másodpercre növelte
- Egy harmadik feles chat widget és két marketing szkript szinkron töltődött be, blokkolva a főszálat
- Kategória oldalon 24 termékképnek nem volt megadva width/height attribútum, ez okozta a 0,32-es CLS-t

A javítások:
- LCP-képre fetchpriority="high" és loading="eager" beállítva; WebP formátumra konvertálva (640 KB → 89 KB)
- Chat widget és marketing szkriptek async/defer betöltésre állítva
- Minden képhez width és height attribútum hozzáadva
- Lazy loading (késleltetett betöltés) csak a képernyőn kívüli képekre alkalmazva

Eredmény 5 héttel később: LCP 5,8 s → 1,9 s (zöld), CLS 0,32 → 0,05 (zöld), INP 520 ms → 145 ms (zöld). A Google Search Console mobilos Core Web Vitals riportjában a "gyenge" kategória 89 URL-ről 0-ra csökkent. A mobilos konverzió 2,1%-ról 3,4%-ra javult 6 héten belül.

• Hiba: Az LCP-képen lazy loading alkalmazása. Ez az egyik leggyakoribb és legkárosabb mobilos SEO hiba. Ha a főkép (hero banner, termékfotó) loading="lazy" attribútumot kap, a böngésző késlelteti a betöltését — és az LCP rögtön 3–6 másodpercre ugrik. Mindig ellenőrizd: az LCP-képen loading="eager" és fetchpriority="high" legyen.
• Hiba: Third-party szkriptek szinkron betöltése. Minden harmadik feles szkript (Facebook Pixel, Google Tag Manager, chat widgetek, heatmap eszközök) blokkolja a mobilos főszálat, ha szinkron töltődik be. Minden ilyen szkriptet async vagy defer módban tölts be, vagy halaszd a betöltésüket az első interakció utánra.
• Hiba: Mobilos értékek asztali értékekkel való összetévesztése. A PageSpeed Insights alapértelmezés szerint az asztali fület mutatja. Sok tulajdonos ezért hiszi, hogy az oldala gyors — miközben a mobilos fülön kritikus piros hibák vannak. Mindig a Mobil fület ellenőrizd, mert a Google is azt veszi figyelembe a rangsoroláshoz.

A mobilos Core Web Vitals értékek rendszerint rosszabbak az asztali értékeknél, mert a mobileszközök lassabb CPU-val és korlátozott sávszélességgel működnek. 2026-ban a Google az LCP, INP és CLS értékeket a 75. percentilisen méri — ha ezek mobilon nem zöldek, az közvetlenül rontja az organikus rangsorolást. A legfontosabb lépések: az LCP-kép optimalizálása, a third-party szkriptek késleltetése és a képméretek explicit megadása.

A mobilos Core Web Vitals javítása után a következő lépés az oldalsebesség (page speed) átfogó optimalizálása és a CDN (Content Delivery Network) bevezetése, amely különösen mobilon csökkenti a szerver válaszidőt.

1. Nyisd meg a PageSpeed Insights Mobil fülét az 5 legfontosabb URL-edhez és vedd fel a hibák listáját.
2. Kezd a legnagyobb hatású javítással: az LCP-kép optimalizálásával (WebP + fetchpriority).
3. Állíts fel havi CWV-monitoringot a Google Search Console Core Web Vitals riportjával.

Ha a technikai SEO rendszeres auditját és a teljesítmény karbantartását automatizálni szeretnéd, a Publicator AI segíthet. 👉 Csomag megismerése