Hogyan optimalizáljam a Core Web Vitals-t (LCP, INP, CLS) magyar webshop-on 2026-ban?

1. LCP (Largest Contentful Paint) — <2.5s target

Az LCP a legnagyobb látható elem (általában hero-image vagy headline) megjelenési ideje. Magyar webshop-okon a fő LCP-killer-ek: nagy hero-image (PNG 800KB+), render-blocking 3rd-party CSS, slow TTFB (>500ms).

Optimalization recipe:

• Hero-image WebP konverzió + tömörítés <200KB (magyar átlag webshop hero-image 600-1500KB)
• Preload tag a hero-image-re: <link rel="preload" as="image" href="hero.webp">
• Cloudflare CDN aktiválása — magyar audience-re EU-edge szerver, TTFB 50-150ms-ra csökken
• Critical CSS inline-olása — a fold-above CSS direkt a HTML-be (NEM külső .css fájl)
• Server response time csökkentés — managed WordPress hosting (Kinsta, WP Engine) helyett shared = 5-10× gyorsabb TTFB

2. INP (Interaction to Next Paint) — <200ms target

Az INP a kattintás → visual-feedback időtartam. Magyar webshop-okon a fő INP-killer-ek: Klaviyo / Hotjar / Tawk.to popup-script (300-800ms blocking), heavy GTM container, magas heavy 3rd-party-script-mennyiség.

Optimalization recipe:

• 3rd-party script defer: defer minden NEM-kritikus tag-en (analytics, chat, A/B test). NE async — async blokkolja az HTML parsing-ot.
• JavaScript bundle splitting: code splitting Webpack / Vite-tel — minden route-on csak a szükséges JS
• Long task-ok feldarabolása: requestIdleCallback() / setTimeout() chunked processing
• Event handler debounce / throttle: scroll + resize + input event-ekre
• Web Worker-ek heavy computation-höz: NEM main thread

3. CLS (Cumulative Layout Shift) — <0.1 target

A CLS a layout-ugrás kumulált mutatója. Magyar webshop-okon a fő CLS-killer-ek: width/height nélküli képek (lazy-load shift), dinamikusan injektált ad-banner / popup, late-loading fonts (FOUT).

Optimalization recipe:

• Image-eken kötelező width + height attribútum (HTML, NEM csak CSS)
• Iframe-eken kötelező width + height
• Reserved space dinamikus tartalomnak: popup-okra min-height div, lazy-load image-re aspect-ratio container
• font-display: optional (NEM swap!) — a swap CLS-shift-et okoz
• Font preload: <link rel="preload" as="font" type="font/woff2" href="..." crossorigin>
• Animation transform / opacity-ön (NEM top/left/width/height)

2026-os magyar webshop CWV benchmarkok

2026-os ROI az optimalizálásból

Magyar e-commerce-en a CWV-optimalizálás közvetlen ROI-mutatói:

• Organic ranking emelés: +12-22% Search Console impression a 6. hét után
• Konverzió-emelés: +1-2% conversion rate per 100ms LCP-javulás (Google saját adat)
• Bounce rate csökkenés: -8-15% mobile-on

Egy átlagos magyar webshop havi 5M Ft revenue-val: a CWV-optimization 6 hónap alatt 800K-1.5M Ft revenue-emelést hoz. ROI tipikusan 3-5×.

Gyakori kérdések

Kapcsolódó kérdések

Kapcsolódó tartalom