Core Web Vitals: az LCP, CLS és INP magyarázata. Teljesítsd a Google rangsorolási küszöbértékeit a Largest Contentful Paint, a Cumulative Layout Shift és az Interaction to Next Paint optimalizálásával.

Ezen az oldalon
Összefoglaló
A Core Web Vitals három felhasználói élmény-mérőszám (LCP, CLS, INP), amelyet a Google rangsorolási tényezőként használ annak mérésére, hogy mennyire gyors és mennyire reagál a webhelyed.
Szeretnél többet megtudni? Kérdezd meg
2021-ben a Google bejelentette, hogy a Core Web Vitals rangsorolási tényezők. Három konkrét mérőszám közvetlenül hat a keresési helyezéseidre: Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) és Interaction to Next Paint (INP). A gyenge mutatókkal rendelkező oldalak kevésbé valószínű, hogy jól rangsorolnak. A kiváló mutatókkal rendelkezők rangsorolási előnyre tesznek szert. A modern SEO-ban a Core Web Vitals teljesítése nélkülözhetetlen.
A következmények messzemenők. Már nem hagyhatod figyelmen kívül a teljesítményt. Nem építhetsz lassú weboldalt, és remélheted, hogy jó helyezéseket kapsz. A Google egyértelművé tette, hogy a felhasználói élmény számít, a Core Web Vitals pedig ezt számszerűsíti. A Core Web Vitals optimalizálása már nem opcionális: a versenyképes keresési láthatósághoz kötelező.
A Core Web Vitals a felhasználói élmény három dimenzióját méri: a betöltési sebességet (LCP), a vizuális stabilitást (CLS) és a válaszkészséget (INP). A Google Web Vitals oldala részletesen meghatározza az egyes mutatókat. Ez a három mutató a legfontosabb aspektusait képviseli annak, ahogyan a felhasználók megtapasztalják a webhelyedet.
A Google valódi felhasználóktól származó adatpontok billióit gyűjtötte annak megállapítására, melyek a legfontosabb mutatók. Az eredmény a Core Web Vitals. Ezek nem önkényes küszöbértékek, hanem bizonyítékokon alapuló mérések arról, mitől érződik gyorsnak és reszponzívnak egy weboldal a valódi felhasználók számára.
A Google hivatalos bejelentése elmagyarázza, hogyan befolyásolják a Core Web Vitals a keresési helyezéseket. A Google a Core Web Vitals-t több rangsorolási tényező egyikeként kezeli. A tartalom minősége és relevanciája továbbra is fontosabb, de két hasonlóan releváns webhelyet a Core Web Vitals teljesítménye alapján rangsorol.
A Largest Contentful Paint (LCP) azt méri, mennyi idő alatt válik láthatóvá a felhasználó számára az oldal legnagyobb tartalmi eleme. Ez lehet kép, videó, címsor vagy szövegblokk. Az LCP azt a pillanatot méri, amikor a felhasználó már látja a fő tartalmat, és érzékeli, hogy az oldal betöltődött.
A Google ajánlása: az LCP legyen 2.5 másodperc alatt. A 2.5 másodperc alatti LCP-t „jónak” tekintik. A 2.5-4 másodperc közötti LCP „javításra szorul”. A 4 másodpercnél hosszabb LCP „gyenge”. A felhasználók 3 másodperc feletti LCP-nél lassúnak érzik az oldalt. 4 másodperc felett a felhasználók gyakran elhagyják az oldalt.
A lassú LCP gyakori okai: lassú szerverválasz, a renderelést blokkoló CSS és JavaScript, optimalizálatlan képek, valamint lassan betöltődő, nagy betűtípusok. Az LCP javítása: a szerver gyorsítása (a Time to First Byte / TTFB csökkentése), a renderelést blokkoló erőforrások eltávolítása, a JavaScript halasztása, a képek optimalizálása és tömörítése, modern képformátumok (WebP) használata, valamint a kritikus erőforrások előtöltése.
A PageSpeed Insights megmutatja az LCP-pontszámodat, és konkrét javaslatokat ad. Futtasd a tesztet a kulcsoldalaidon, rangsorold a javaslatokat hatás szerint, és először a legnagyobb hatásúakat valósítsd meg.
A Cumulative Layout Shift (CLS) az oldalelemek váratlan elmozdulását méri a betöltés során. Ha egy cikket olvasol, és a szöveg hirtelen lejjebb ugrik, mert fölé betöltődött egy hirdetés, az layout shift. A CLS azt számszerűsíti, mennyire mozdul el az oldal elrendezése betöltés közben.
A Google ajánlása: a CLS legyen 0.1 alatt. A 0.1 alatti CLS „jó”. A 0.1-0.25 közötti érték javításra szorul. A 0.25 feletti érték „gyenge”. Még a kis elmozdulások is összeadódnak. A 0.15-ös CLS azt jelenti, hogy az oldalelemek betöltés közben összesen a nézetablak magasságának 15 százalékával mozdultak el. A felhasználók ezt bosszantónak találják, és frusztráció éri őket.
A magas CLS gyakori okai: aszinkron módon betöltődő hirdetések, width és height attribútumok nélküli képek, aszinkron módon betöltődő beágyazások (YouTube-videók, közösségimédia-widgetek) és hirtelen cserélődő betűtípusok. A CLS javítása: a képek méreteinek megadása a HTML-ben (width és height attribútumok), hely fenntartása a hirdetések betöltése előtt, a font-display: swap használata az @font-face CSS-ben a betűtípuscsere okozta ugrálás megelőzésére, valamint a videók és beágyazások szinkron betöltése, vagy fenntartott hellyel.
A webhelyed minden képének legyen egyértelmű width és height attribútuma. Ez arra utasítja a böngészőt, hogy a kép betöltése előtt foglaljon helyet. Méretek nélkül a böngésző nem tudja, mennyi helyet tartson fenn, így a kép megérkezésekor elmozdul az elrendezés.
Az Interaction to Next Paint (INP) azt méri, mennyire reagál az oldal a felhasználói interakciókra (kattintások, koppintások, billentyűleütések). Az INP az az idő, amely attól telik, hogy a felhasználó interakcióba lép az oldallal, addig, amíg az oldal vizuálisan válaszol. A reszponzív oldal milliszekundumokon belül reagál. A nem reszponzív oldal másodpercekig gondolkodik.
A Google ajánlása: az INP legyen 200 milliszekundum alatt. A 200 ms alatti pontszám „jó”. A 200-500 ms közötti érték javításra szorul. Az 500 ms feletti érték „gyenge”. A felhasználók azonnali választ várnak. Az 500 ms-os INP lassúnak hat. Az egy másodperces INP töröttnek érződik.
A gyenge INP gyakori okai: a főszálat blokkoló nehéz JavaScript, nagy harmadik féltől származó szkriptek, nem hatékony eseménykezelők és a request idle callback hiánya. Az INP javítása: a hosszú JavaScript-feladatok kisebb részekre bontása, a nem kritikus JavaScript halasztása, a nem használt szkriptek eltávolítása, az eseményfigyelők optimalizálása, valamint web workerek használata a számításigényes feladatokhoz.
Az INP gyakran a legnehezebben optimalizálható Core Web Vitals mutató, mert JavaScript-szakértelmet igényel. Ha a csapatodból hiányzik a JavaScript-optimalizálási tudás, fontolj meg egy teljesítményszakértő megbízását, vagy egy harmadik féltől származó teljesítményoptimalizáló szolgáltatást.
A Core Web Vitals kétféleképpen mérhető: laboradatokkal és terepadatokkal. A laboradatokat olyan eszközök adják, mint a PageSpeed Insights vagy a Lighthouse, ellenőrzött környezetben futtatva. A terepadatok a valódi látogatóktól származnak. A Google a terepadatokat helyezi előtérbe, mert ezek a tényleges felhasználói élményt tükrözik.
A Google teljesítmény-tanulási útvonala elmagyarázza a laboratóriumi és a terepmérések közötti különbséget. A laboradatok segítenek azonosítani a problémákat és tesztelni a javításokat. A terepadatok a valós működést mutatják. Lehetnek kiváló laborpontszámaid és gyenge terepi pontszámaid, ha a valódi felhasználóid lassú hálózaton vagy régi eszközön böngésznek.
A Google Search Console a Core Web Vitals terepadatait jeleníti meg. A jelentés a Chrome User Experience Reportból (CrUX) összesített valódi felhasználói méréseket mutat. Ha a webhelyednek nincs elég valódi felhasználói adata, a Google helyette a Lighthouse laboradatait adja.
A Google akkor tekinti „jónak” a Core Web Vitals mutatókat, ha a felhasználói élmény eléri a 75. percentilist. Ez azt jelenti, hogy a valódi felhasználók 75 százaléka a küszöbértéken vagy annál jobban éli meg a webhelyedet. A küszöbértékek:
LCP: legfeljebb 2.5 másodperc. CLS: legfeljebb 0.1. INP: legfeljebb 200 milliszekundum. Ezeket a küszöbértékeket tudományosan validálták a valódi felhasználói interakciók billióinak elemzésével. A küszöbértéket elérő vagy azt meghaladó oldalak jó felhasználói élményt nyújtanak.
A Google azonban nem követeli meg, hogy az oldalaid 100 százaléka átmenjen a Core Web Vitals-vizsgálaton. Ha az oldalaid 75 százaléka átmegy, a webhelyed összességében „jó” Core Web Vitals-értékkel rendelkezik. Ez azt jelenti, hogy lehetnek lassabb oldalaid, és még így is megfelelhetsz, ha a forgalmat hozó oldalaid nagy része gyors.
Az LCP optimalizálása: Először mérd meg a TTFB-t (Time to First Byte) a PageSpeed Insights segítségével. Ha a TTFB lassú (600 ms felett), a szerver a szűk keresztmetszet. Frissíts tárhelyet, optimalizáld a backend kódot, vagy használj tartalomkézbesítő hálózatot (CDN). Ha a TTFB jó, de az LCP lassú, a CSS vagy a JavaScript blokkolja a renderelést. Halaszd a nem kritikus JavaScriptet, és ágyazd be a hajtás fölötti tartalomhoz szükséges kritikus CSS-t.
A CLS optimalizálása: Vizsgáld meg az oldalt a betöltés során mozgó elemek szempontjából. Használd a böngésző fejlesztői eszközeit a mozgó elemek azonosításához. Adj width és height attribútumot minden képhez. Használd a font-display: swap beállítást a CSS-ben. Foglalj helyet a hirdetéseknek, beágyazásoknak és dinamikus tartalmaknak.
Az INP optimalizálása: A Chrome fejlesztői eszközeinek Performance fülén azonosítsd a hosszú JavaScript-feladatokat (50 ms-nál tovább tartók). Bontsd szét a hosszú feladatokat. Halaszd a nem kritikus JavaScriptet. Alacsony prioritású munkához használj requestIdleCallback-et. Tesztelj valódi eszközökön, ne csak asztali számítógépen.
Használd a Google Search Console-t a Core Web Vitals teljesítményének figyelésére. A Core Web Vitals jelentés megmutatja a webhelyed valódi felhasználói mérőszámait, és azt, hogy ezek hogyan viszonyulnak a Google küszöbértékeihez. Az oldalak „Jó”, „Javításra szorul” vagy „Gyenge” kategóriába kerülnek.
Állíts be figyelmeztetéseket. Ha romlanak a Core Web Vitals mutatóid, azonnal ki kell vizsgálnod a problémát. Az okok között lehet új kódkiadás, amely hatékonyságvesztést okozott, új harmadik féltől származó szkript, a képek vagy médiatartalmak módosítása, vagy tárhelyproblémák.
A mobil és az asztali nézetet külön figyeld. A mobileszközök általában lassabb processzorral és lassabb hálózattal rendelkeznek, ezért a Core Web Vitals mutatók gyakran rosszabbak mobilon, mint asztali gépen. Jelentős mobilforgalmú webhelyeknél a mobil optimalizálást helyezd előtérbe.
A Core Web Vitals ma már alapvető rangsorolási tényező, amely összemérhető fontosságú a visszamutató linkekkel és a tartalom minőségével. A gyenge Core Web Vitals mutatókkal rendelkező webhelyek valószínűleg nem fognak jól rangsorolni, bármilyen jó is a tartalmuk. Ezért a teljesítményoptimalizálásnak a SEO-stratégia részének kell lennie, nem utólagos gondolatnak.
Ha rangsorolásért versenyzel, és a versenytársaidnak jobb a Core Web Vitals mutatójuk, nekik van rangsorolási előnyük. Tartalommal önmagában nem nyerhetsz, ha az oldalad lassú és nem reagál. Egyenlő feltételek mellett csak akkor versenyezhetsz, ha legalább eléred, vagy meghaladod a versenytársaid teljesítményét.
A Core Web Vitals ma már a SEO-siker nélkülözhetetlen része. Az LCP, CLS és INP optimalizálása közvetlenül javítja a keresési helyezéseidet és a felhasználói élményt. A kiváló Core Web Vitals mutatókkal rendelkező webhelyek felülmúlják a hasonlóan releváns, gyenge mutatójú oldalakat. Ettől nincs kiút: ha előkelő helyezésekre vágysz, teljesítened kell a Core Web Vitals követelményeit.
Kezdd azzal, hogy lefuttatod a PageSpeed Insights vizsgálatát a kulcsoldalaidon. Azonosítsd a legnagyobb szűk keresztmetszeteket, és először azokat javítsd. Helyezd előtérbe a mobil optimalizálást. Figyeld rendszeresen a teljesítményt a Google Search Console-ban. Használd a GEO SEO-auditunkat, hogy az egész webhelyeden azonosítsd a Core Web Vitals problémákat, és idővel kövesd nyomon a javulást.
Források
Nem. A Core Web Vitals szükséges, de nem elegendő az előkelő helyezésekhez. Kiváló Core Web Vitals mutatókkal, de gyenge tartalommal és visszamutató linkek nélkül egy oldal nem fog jól rangsorolni. A Core Web Vitals a döntő tényező a hasonló tartalmi minőségű oldalak között.
A megfelelő (átmenő) pontszámok: LCP 2.5 másodperc alatt, CLS 0.1 alatt és INP 200 milliszekundum alatt. A Google ezeket a küszöbértékeket a felhasználói élmény 75. percentilise alapján határozza meg.
A gyors nyereségek (képoptimalizálás, a JavaScript halasztása) napokon belül javíthatják a pontszámokat. A szerkezeti változtatások hetekig is eltarthatnak. A Core Web Vitals teljes optimalizálása jellemzően 4-12 hetet vesz igénybe.
A TE ELŐTTED PRÓBÁLTÁK KI A SORANKOT
