Miért nem várhat tovább a Core Web Vitals optimalizálása?
A Google 2024-ben és 2025-ben is egyértelművé tette: a felhasználói élmény (UX) nem csupán egy kényelmi funkció, hanem kritikus rangsorolási tényező. A Core Web Vitals mutatók – az LCP, a CLS és az immár hivatalos INP – mérik azt, hogy egy weboldal mennyire gyors, stabil és válaszkész.
Sok fejlesztő számára ezek a számok ijesztőnek tűnhetnek a Search Console felületén, de a javításuk nem igényel mindig teljes kódújraírást. Ebben a cikkben azokra a gyors beavatkozásokra fókuszálunk, amelyekkel látványos javulást érhetsz el anélkül, hogy hetekre elmerülnél a technikai adósságok tengerében. Ha eleged van a piros jelzésekből, ez az útmutató neked szól.
1. LCP (Largest Contentful Paint) javítása: A 2.5 másodperces szabály
Az LCP azt méri, mennyi idő alatt jelenik meg az oldal legnagyobb látható tartalmi eleme (általában egy hős-kép vagy egy nagy címsor).
Gyors technikai hackek az LCP-hez:
- Fetch Priority API: Jelöld meg a legfontosabb képedet a
fetchpriority="high"attribútummal. Ez jelzi a böngészőnek, hogy ezt az erőforrást minden mást megelőzve kell letöltenie. - Képformátum váltás: Felejtsd el a PNG-t a nagy felületeken. Használj WebP vagy AVIF formátumot, amely akár 30-50%-kal kisebb fájlméretet eredményez azonos minőség mellett.
- Preconnect a kritikus domainekhez: Ha a képeid CDN-ről érkeznek, használd a
kódot a head szekcióban.
Szakértői tipp: Gyakori hiba a „Lazy Load” alkalmazása az LCP elemre. Soha ne használj
loading="lazy"attribútumot az „above-the-fold” (hajtás feletti) képeken, mert ez mesterségesen késlelteti a megjelenítést!
2. CLS (Cumulative Layout Shift) és a vizuális stabilitás
A CLS a bosszantó „ugrálásokat” méri az oldalon töltődés közben. Senki nem szereti, ha egy hirtelen betöltődő hirdetés miatt rossz gombra kattint.
Hogyan szüntesd meg az ugrálást?
- Foglalj helyet a képeknek: Mindig adj meg
widthésheightattribútumot a képeknek a HTML-ben. A modern böngészők ebből számolják ki az aspect ratiót (oldalarányt). - Font-display: swap: A betűtípusok betöltésekor használd a CSS-ben a
font-display: swap;szabályt. Ez megakadályozza, hogy a szöveg láthatatlan maradjon (FOIT), amíg a webfont megérkezik. - Dinamikus tartalmak kezelése: Ha hirdetéseket vagy widgeteket szúrsz be, egy fix magasságú konténerrel foglald le a helyüket előre.
3. INP (Interaction to Next Paint): Az új király
2024 márciusától az INP váltotta fel az FID-t. Ez a mutató azt méri, hogy az oldal milyen gyorsan reagál a felhasználói interakciókra (kattintás, gépelés) a teljes látogatás alatt.
Fejlesztői beavatkozások az INP javítására:
- Long Taskok darabolása: Ha egy JavaScript függvény futása meghaladja az 50 ms-ot, az már blokkolja a főszálat. Használd a
setTimeout()vagy a modernscheduler.yield()megoldást a feladatok darabolására. - Input Delay csökkentése: Vizsgáld meg, hogy a harmadik féltől származó scriptek (analitika, chat botok) nem foglalják-e le a CPU-t pont akkor, amikor a felhasználó cselekedne.
- Debouncing és Throttling: Gördítésnél vagy keresőmezőbe gépelésnél alkalmazz korlátozást a függvényhívásokra, hogy ne terheld túl az eseménykezelőt.
4. Képoptimalizálás mesterfokon: Több, mint méretcsökkentés
A modern webes környezetben a képek felelősek az átvitt adatmennyiség több mint 60%-áért. Az LCP javításához nem elég a tömörítés; intelligens kiszolgálásra van szükség.
A Responsive Images és a
srcseterejeNe kényszerítsd a mobilfelhasználókat asztali méretű képek letöltésére. Használd a
srcsetattribútumot, amellyel a böngésző a kijelző felbontásához leginkább passzoló forrást választja ki:HTML
Modern formátumok: AVIF vs. WebP
Bár a WebP már iparági sztenderd, az AVIF még jobb tömörítési rátát kínál (átlagosan 20%-kal hatékonyabb a WebP-nél). A legjobb gyakorlat a
5. JavaScript végrehajtási idő: A csendes INP gyilkos
Hiába tölt be gyorsan az oldal, ha a főszál (main thread) hosszú másodpercekig foglalt. Amikor a felhasználó kattint, de nem történik semmi, az INP értéked az egekbe szökik.
Harmadik féltől származó scriptek (Third-party JS)
A Facebook Pixel, a Hotjar vagy a különféle chat-alkalmazások gyakran a legrosszabbkor „rabolják el” a processzort.
- Auditálás: Használd a Chrome DevTools Bottom-Up fülét a CPU-t leginkább terhelő scriptek azonosítására.
- Partytown könyvtár: Egy innovatív megoldás, amely a harmadik féltől származó scripteket egy Web Workerbe helyezi át, így felszabadítja a főszálat az interakciók számára.
Kód-szétválasztás (Code Splitting)
Ne töltsd be a teljes JavaScript csomagot a kezdőlapon. A modern frameworkök (React, Vue, Next.js) lehetővé teszik a dinamikus importálást, így csak az a kód fut le, amire az adott aloldalon valóban szükség van.
6. CSS kritikus út (Critical CSS) optimalizálása
A böngésző nem kezdi el az oldal renderelését, amíg az összes
be nem töltődött. Ez a blokkoló tényező drasztikusan növelheti az LCP-t.Inline Critical CSS technika
A megoldás az, hogy a hajtás feletti (above-the-fold) rész megjelenítéséhez szükséges minimális CSS-t közvetlenül a HTML
részébe ágyazzuk ( - Long Taskok darabolása: Ha egy JavaScript függvény futása meghaladja az 50 ms-ot, az már blokkolja a főszálat. Használd a
