Mit mér a Core Web Vitals valójában?
- LCP – a fő tartalom megjelenési ideje. Cél: < 2,5 s.
- INP – mennyi idő alatt reagál az oldal a műveletekre. Cél: < 200 ms.
- CLS – elmozdul‑e a tartalom betöltés közben. Cél: < 0,1.
Fordítás: a látogató gyorsan látja a lényeget, az oldal azonnal reagál, és semmi nem ugrál el alóla.
Képméretezés, de okosan
Modern formátumok
Használj WebP vagy AVIF formátumot, és tartsd meg a JPEG fallbacket, ha kell. Mindig add meg a width/height értékeket, vagy aspect-ratio-t a CSS‑ben.
Lazy‑load – a jó értelemben
Az első képernyőn ne legyen lazy. Minden másnál jöhet a loading="lazy" + decoding="async". Galériáknál blur‑up vagy LQIP placeholder szebb élményt ad.
CSS: kritikus vs. „minden más”
- Kritikus CSS inline a
<head>-ben (fold‑ig szükséges stílusok). - Nem kritikus CSS betöltése
media="print"majdonload-dal visszaállítva:<link rel="stylesheet" href="theme.css" media="print" onload="this.media='all'"> - Távolítsd el a fölös stílusokat (PurgeCSS / beépített „remove unused CSS”).
Betűtípusok villámgyorsan
- Saját tárhelyről szolgáld ki (WOF2), és hasítsd al‑készletekre (subset), ha hosszú a karakterkészlet.
@font-face-nél font-display: swap vagy optional; előttepreconnectés szükség eseténpreload.- Csökkentsd a CLS‑t: állíts
font-size-adjust‑ot, vagy használd a metrika‑override‑okat (ascent-override,descent-override,line-gap-override).
JavaScript diéta
- Kapcsold ki, amit nem használsz. A legtöbb oldal kevesebb JS‑t igényel, mint hinnéd.
- defer/async mindenhol, ahol lehet;
type="module"+ dinamikusimport()a ritkább funkciókhoz. - Darabold a hosszú feladatokat (long tasks), használd a
requestIdleCallback‑ot és web workert, ha szükséges. - Harmadik féltől származó szkriptek: csak ami üzletkritikus (mérés, fizetés, chat – ésszel).
Cache & CDN döntések
- HTTP/2 vagy HTTP/3, Gzip/Brotli bekapcsolva.
- Cache-Control: HTML rövid (pl. 5–15 perc), statikus fájlok hosszú (pl. 1 év) fájl‑hash mellett.
- CDN (edge cache) a képekhez, videókhoz, letöltésekhez.
Lazy‑load: buktatók
- Ne „lustán”‑töltsd a hero képet – elrontja az LCP‑t.
- Mindig add meg a kép méreteit – különben ugrálni fog (CLS).
- Videónál
preload="metadata", és csak kattintásra indíts.
Gyors teszt – 10 lépés, ~30 perc
- Hero kép: WebP/AVIF +
fetchpriority="high". - Header kritikus CSS inline.
- Összes nem kritikus CSS halasztva.
- Képekhez
width/heightkitöltve. - Alap betűtípusok:
swap+preconnect. - JS fájlok
defer/ modulárisan tördelve. - Cache‑policy rendbetéve.
- Lazy‑load csak a hajtás alatt.
- Third‑party listát felezd meg.
- PageSpeed + web‑vitals ellenőrzés (LCP/INP/CLS).
Mérés: honnan tudod, hogy jobb lett?
Lab mérés (PageSpeed, Lighthouse) jó start, de a valódi a Search Console „Core Web Vitals” jelentése és a GA4-es valós felhasználói adatok. Nézd a trendet: ha esnek a betöltési idők, nő a konverzió.