Core Web Vitals & Performance

Mik a Core Web Vitals?

A Core Web Vitals a Google által bevezetett teljesítménymérők egy sora, amelyek a webhelyek felhasználói élményének kulcsfontosságú szempontjait értékelik.
Arra összpontosítanak, hogy egy oldal milyen gyorsan töltődik be, mennyire érzékeny a felhasználók interakcióira, és mennyire stabil az elrendezés a tartalom megjelenésekor.

A Google a Core Web Vitals értékeket az oldalélményt rangsoroló jelek részeként veszi figyelembe, amelyek közvetlenül befolyásolják a SEO teljesítményét és a keresési eredményekben való láthatóságot.

A három fő Core Web Vitals a következő:

1. Largest Contentful Paint (LCP) - A betöltési teljesítmény mérése.
2. Interaction to Next Paint (INP) - A reakciókészséget méri (az FID helyett).
3. Cumulative Layout Shift (CLS) - A vizuális stabilitást méri.

A három alapvető mérőszám magyarázata

1. Legnagyobb tartalmi festék (LCP)

• Meghatározás: A legnagyobb látható elem (például kép, videó vagy szövegblokk) megjelenéséhez szükséges idő a nézetablakon belül.
• Jó eredmény: ≤ 2,5 másodperc.
• Optimalizálási tippek:
  • Hatékony képformátumok használata (WebP, AVIF).
  • Lusta betöltés megvalósítása.
  • Kritikus erőforrások előzetes betöltése.
  • Optimalizálja a szerver válaszidejét (TTFB).

2. Interakció a következő festményig (INP)

• Meghatározás: Az általános reakciókészséget méri a felhasználói interakció (például kattintás vagy koppintás) és a következő vizuális frissítés közötti késleltetés kiszámításával.
• Jó pontszám: ≤ 200 milliszekundum.
• Helyettesíti: First Input Delay (FID), amely csak az első interakciót mérte.
• Optimalizálási tippek:
  • Minimalizálja a JavaScript végrehajtási idejét.
  • Hosszú feladatok felosztása.
  • Használja a requestIdleCallback() vagy a Web Workers funkciót a nem sürgős kódokhoz.
  • Kritikus eseményhallgatók priorizálása.

3. Halmozott elrendezéseltolódás (CLS)

• Meghatározás: Azt követi, hogy a látható elemek mennyit mozognak váratlanul az oldal betöltése során.
• Jó eredmény: ≤ 0,1.
• Optimalizálási tippek:
  • A képek és videók szélesség/magasság attribútumainak beépítése.
  • Foglaljon helyet a hirdetéseknek és a dinamikus beágyazásoknak.
  • Kerülje a tartalom beillesztését a meglévő elemek fölé.

Támogató teljesítménymutatók

Bár a Google a Core Web Vitals-ra összpontosít, a teljesítménytesztelés során számos laboratóriumi mérőszám egészíti ki őket:

Teljes blokkolási idő (TBT)

Azt méri, hogy a szkriptek mennyi ideig blokkolják a főszálat a First Contentful Paint (FCP) és az Time to Interactive (TTI) között.

• Ideális érték: < 200 ms.
• Proxy metrika: A TBT-t a laboratóriumi tesztekben az INP proxyjaként használják, mielőtt a terepi adatok rendelkezésre állnának.

Interaktívvá válási idő (TTI)

Azt jelzi, hogy egy oldal mikor válik teljesen interaktívvá.

• Cél: ≤ 5 másodperc.
• Segít mérni a felhasználó által érzékelt készenlétet az LCP-n túl.

Első tartalmas festés (FCP)

Azt méri, hogy milyen gyorsan jelenik meg az első szöveg vagy kép.

• Cél: ≤ 1,8 másodperc.
• Gyakran az első benyomás az érzékelt teljesítményről.

---

Modern webes szállítási szabványok

A Core Web Vitals teljesítménye szorosan kapcsolódik a modern webes szállítási és optimalizálási protokollokhoz.
Az alábbiak megvalósítása drasztikusan javíthatja a pontszámokat:

HTTP/2 és HTTP/3

• Lehetővé teszi a multiplexelést és a gyorsabb párhuzamos erőforrás-töltést.
• Csökkenti a késleltetést és javítja az általános felhasználói élményt.

Brotli tömörítés

• Hatékonyabb, mint a GZIP; szövegalapú eszközök (HTML, JS, CSS) tömörítése kisebb fájlmérettel.

Preload, Prefetch és Preconnect

• Előbetöltés: Megmondja a böngészőnek, hogy a kulcsfontosságú eszközöket (betűtípusok, hősképek) helyezze előtérbe.
• Prefetch: Betölti a valószínűleg szükséges erőforrásokat, mielőtt a felhasználó lekérné azokat.
• Preconnect: Korai kapcsolatokat hoz létre harmadik fél tartományokkal.

Lusta betöltés

• A nem kritikus képek vagy iframe-ek betöltését elhalasztja, amíg azok be nem lépnek a nézetablakba.
• Csökkenti az oldal kezdeti súlyát és javítja az LCP-t.

Prioritási súgók

• Lehetővé teszi a fejlesztők számára, hogy a fetchpriority használatával kifejezetten szabályozzák az erőforrások betöltési sorrendjét.
• Különösen hasznos a hősképek vagy betűtípusok első betöltésének biztosításához.

HSTS (HTTP szigorú szállítási biztonság)

• HTTPS-kapcsolatokat kényszerít ki minden kéréshez, javítva a biztonságot és csökkentve az átirányítások számát.

---

Hogyan befolyásolják a SEO-t az alapvető webes paraméterek

A Google a Core Web Vitals-t rangsorolási jelként használja a Page Experience frissítésen belül.
Azok a webhelyek, amelyek jól teljesítenek ezeken a mérőszámokon, általában a következőkkel rendelkeznek:

• Nagyobb felhasználói elkötelezettség és megtartás.
• Alacsonyabb visszafordulási arány.
• Jobb szerves láthatóság.

A Ranktracker Web Audit és SERP Checker eszközei segíthetnek mérni és nyomon követni ezeket a mérőszámokat, hogy azonosítani lehessen a teljesítmény szűk keresztmetszeteit, amelyek hatással lehetnek a rangsorolásra.

---

Legjobb gyakorlatok az alapvető webes mutatók optimalizálásához

1. Használjon tartalomszolgáltató hálózatot (CDN): Csökkentse a késleltetést a tartalom széleken lévő helyekről történő kiszolgálásával.
2. Kódfelosztás bevezetése: Kisebb, oldal-specifikus JavaScript-csomagok kiszolgálása.
3. Optimalizálja a betűtípusokat: Használjon betűtípus-kijelzés cserét és töltse be előre a fontos betűtípusokat.
4. Stratégiai gyorsítótár: Használja ki a böngésző gyorsítótárazását és a szerveroldali gyorsítótárazást.
5. Halassza el a nem kritikus szkripteket: Használjon async és defer attribútumokat a JS-hez.
6. Minifikálja és tömörítse az eszközöket: Alkalmazzon minifikációt és Brotli tömörítést a HTML, CSS és JS esetében.
7. Monitorozza a mezőadatokat: Használja a Chrome UX Report vagy a Ranktracker webhelyauditját a valós felhasználói teljesítményadatok gyűjtéséhez.

---

Eszközök az alapvető webes mutatók méréséhez

• Ranktracker Webaudit: Azonosítsa a Core Web Vitals problémákat valós időben.
• Google PageSpeed Insights: Terepi + laboratóriumi adatok a Chrome UX Reportból.
• Világítótorony: Szimulált laboratóriumi tesztelés a teljesítmény optimalizálásához.
• WebPageTest: Fejlett teljesítménydiagnosztika vizuális összehasonlítással.
• Chrome DevTools: Teljesítmény fül a renderelés és a blokkoló szkriptek vizsgálatához.

---

A Core Web Vitals jövője

A Google folyamatosan finomítja a mérőszámokat, hogy azok jobban tükrözzék a valós felhasználói élményt.
A jövőbeli irányok közé tartoznak:

• AI-vezérelt teljesítményprioritás (prediktív betöltés).
• Kibővített INP-fókusz a mikro-interakciókra.
• Edge-rendering teljesítményadatok a Page Experience jelek részeként.

---

Összefoglaló

A Core Web Vitals meghatározza, hogyan méri a Google a valós oldalélményt.
Az LCP, INP és CLS optimalizálásával, valamint ezek modern szállítási szabványokkal, például a HTTP/3, a Brotli és a Priority Hints szabványokkal való támogatásával javíthatja mind a SEO-rangsorolást, mind a felhasználói elégedettséget.
A teljesítmény nem csak technikai kérdés - a modern keresőben a láthatóság és a hitelesség alapja.