A Core Web Vitals három mutató, amellyel a Google az oldalélményt méri. Az LCP a betöltési sebességet méri. A CLS a vizuális stabilitást. Az INP a reakcióidőt.
Mindegyik mutató a teljesítmény más oldalát méri. Együtt adják ki a felhasználói élmény képét.
Largest Contentful Paint (LCP)
Az LCP azt az időt méri, amíg a fő tartalom betöltődik. A fő tartalom az oldal legnagyobb képe vagy szövegblokkja. A főoldalon az LCP a hero kép. Egy cikknél az LCP a cikk címsora és a fő kép.
Az LCP attól számít, hogy a felhasználó rákattint a linkre, addig, amíg a fő tartalom megjelenik a képernyőn. Ha az LCP 1 másodperc, a felhasználó a kattintás után 1 másodperccel látja a fő tartalmat. Ha az LCP 3 másodperc, 3 másodpercet vár.
Cél: a 2,5 másodperc alatti LCP jó. A 2,5 és 4 másodperc közötti LCP fejlesztésre szorul. A 4 másodperc feletti LCP gyenge.
Példa: a főoldal hero képe öt megabájt. A letöltése 3 másodpercig tart. Az LCP 3 másodperc. A cél 2,5 másodperc. A teljesítmény fejlesztésre szorul.
Cumulative Layout Shift (CLS)
A CLS a vizuális stabilitást méri. Elrendezés-eltolódás akkor történik, ha a tartalom elmozdul az oldal betöltése után. Példa: a felhasználó elkezd olvasni egy cikket. Betöltődik egy hirdetés. A cikk lejjebb csúszik. A felhasználó elveszíti a helyét. Bosszantó.
A CLS az összes elrendezés-eltolódást számszerűsíti. Ha a tartalom 200 pixellel lejjebb mozdul, a CLS nő. Ha a tartalom többször mozdul el, a CLS összeadódik.
Cél: a 0,1 alatti CLS jó. A 0,1 és 0,25 közötti CLS fejlesztésre szorul. A 0,25 feletti CLS gyenge.
Példa: az oldal betöltése után betöltődik egy hirdetés. A hirdetés 300 pixel magasságot foglal. A hirdetés alatti tartalom lejjebb csúszik. A CLS 0,15. Fejlesztésre szorul.
Interaction to Next Paint (INP)
Az INP a reakcióidőt méri. A felhasználó rákattint egy gombra. A rendszer feldolgozza a kattintást. Frissíti az oldalt. A változás megjelenik a képernyőn. Az INP a kattintástól a látható frissítésig eltelt idő.
Az INP az interaktív oldalaknál fontos (űrlapok, gombok, menük). A statikus oldalaknál (cikkek, blogok) kevésbé.
Cél: a 200 ezredmásodperc alatti INP jó. A 200 és 500 ezredmásodperc közötti INP fejlesztésre szorul. Az 500 ezredmásodperc feletti INP gyenge.
Példa: a felhasználó rákattint a Kosárba gombra. A rendszer feldolgozza a kérést. Frissíti a kosár számlálóját. Az INP 300 ezredmásodperc. Fejlesztésre szorul.
Miért három mutató egy helyett
Egyetlen mutató nem képes megragadni a felhasználói élményt. A betöltési sebesség számít (LCP). A vizuális stabilitás számít (CLS). A reakcióidő számít (INP). Egy oldal lehet gyorsan betöltődő, de instabil (magas CLS). Vagy gyors és stabil, de lassan reagáló (magas INP). A három mutató együtt méri a felhasználói élmény minőségét.
Valós példa: webshop Core Web Vitals értékei
Kiindulási állapot
Egy webshop termékoldalának kiindulási értékei:
LCP: 2,8 másodperc (a 2,5-ös cél fölött). CLS: 0,12 (a 0,1-es cél fölött). INP: 220 ezredmásodperc (a 200-as cél fölött).
Mindhárom mutató fejlesztésre szorul.
Optimalizálás
LCP: a hero kép optimalizálása, a képernyő alatti tartalom késleltetett betöltése. Eredmény: 1,8 másodperc.
CLS: hely foglalása a hirdetéseknek, a nem kritikus tartalom késleltetett betöltése. Eredmény: 0,05.
INP: kevesebb JavaScript, optimalizált eseménykezelők. Eredmény: 180 ezredmásodperc.
Mindhárom mutató most megfelel a Google elvárásainak.
Hogyan kapcsolódik a Core Web Vitals a felhasználói élményhez
Jó LCP: a felhasználó gyorsan látja a tartalmat. Gyorsnak érződik.
Gyenge LCP: a felhasználó vár a tartalomra. Lassúnak érződik.
Jó CLS: az elrendezés stabil. A felhasználó úgy olvashat, hogy a tartalom nem ugrál. Kényelmes.
Gyenge CLS: az elrendezés eltolódik. A felhasználó elveszíti a helyét. Bosszantó.
Jó INP: a felhasználó rákattint egy gombra, és azonnal látja a választ. Interaktívnak érződik.
Gyenge INP: a felhasználó rákattint egy gombra, és várnia kell a válaszra. Akadozónak érződik.
A jó Core Web Vitals jó felhasználói élményt ad. A gyenge Core Web Vitals gyenge felhasználói élményt.
A Core Web Vitals mérése
A Google a Core Web Vitalst valódi felhasználókon méri (valós felhasználói monitorozás). A laborteszt-eszközök, például a Lighthouse, becslést adnak a Core Web Vitalsra, de ez eltérhet a valós felhasználói élménytől (a hálózati körülmények különbözőek).
A Core Web Vitalst a Google Search Console-ban ellenőrizheted. A Google összesíti a valódi felhasználók adatait, és megmutatja, hogy az oldal megfelel-e az elvárásoknak (jó, fejlesztésre szorul, gyenge).
Nézd meg a PageSpeed Insightsban is. Lighthouse pontszámok és a Google adatbázisából származó valós felhasználói adatok.
Gyakran ismételt kérdések
Melyik a legfontosabb Core Web Vital?
Mind a három számít. De az LCP és a CLS általában a legnagyobb hatású. Ha az oldal gyorsan betöltődik, de az elrendezés folyton eltolódik, a felhasználói élmény rossz. Ha az oldal stabil, de lassan reagál, a bosszúság kisebb. Az LCP és a CLS általában az első és a második számú prioritás. Az INP az interaktív oldalaknál fontos, a statikus tartalomnál kevésbé kritikus. A WEMASY weboldalépítőjével ezt közvetlenül a saját weboldaladon beállíthatod.
Miben különbözik a Core Web Vitals a többi teljesítménymutatótól?
A Core Web Vitals a felhasználói élményre fókuszáló mutatók. Azt mérik, amit a felhasználók érzékelnek. A többi mutató (TTFB, FCP) technikai mutató: a jó Core Web Vitals előfeltétele, de nem közvetlenül a felhasználói élményt méri. Javítsd a többi mutatót alapként, de a Core Web Vitals mutatja meg, hogy az alapból jó élmény lesz-e.
Lehetnek jók a teljesítménymutatóink, de gyenge a Core Web Vitals?
Igen. Egy oldalnak lehet gyors a TTFB-je, de gyenge az LCP-je. Lehet gyors az FCP-je, de gyenge a CLS-e. A technikai mutatók szükségesek, de nem elegendők a jó Core Web Vitalshoz.
Mindhárom Core Web Vitalst egyformán optimalizáljuk?
Nem. Hatás szerint állíts sorrendet. Mérd fel a jelenlegi állapotot. Ha az LCP 4 másodperc, a CLS viszont 0,1, először az LCP-t javítsd. A legnagyobb elmaradásnak van a legnagyobb hatása a felhasználókra.
A Core Web Vitals az egyetlen mutató, ami számít a Google-nek?
Nem. A Google mér mobilbarátságot, HTTPS-t, biztonságos böngészést és tolakodó felugró elemeket is. A Core Web Vitals a legszembetűnőbb és legjobban módosítható. De a teljes oldalélménynek más tényezői is vannak. Optimalizáld a Core Web Vitalst, de ne hagyd figyelmen kívül a többi rangsorolási tényezőt.
Milyen gyakran frissül a valós felhasználói Core Web Vitals a Google Search Console-ban?
Naponta. A Google folyamatosan összesíti a valós felhasználói adatokat. A Search Console-ban a Core Web Vitals naponta frissül. A laborteszt-eszközök egy adott pillanatot mutatnak. A folyamatos teljesítményhez a Search Console valós adatait kövesd.