PageSpeed Insights és Lighthouse: sebesség és Core Web Vitals

A PageSpeed Insights valódi látogatói adatot és Lighthouse-labormérést mutat egy oldalról, így látod, mennyire gyors a WordPress-oldalad és mit érdemes javítani.

A PageSpeed Insights (PSI) a Google ingyenes eszköze: beírod egy oldal címét, és két dolgot kapsz. Az egyik a valódi látogatók élménye az elmúlt időszakból, a másik egy Lighthouse nevű programmal végzett, szimulált mérés. A Lighthouse a böngésződ Chrome DevTools eszközében is fut, és a parancssorból is. WordPress-oldalnál ezzel találod meg, mi lassítja a betöltést, és ellenőrzöd, hogy egy javítás tényleg segített-e.

Futtatás a PageSpeed Insightsban

Nyisd meg a pagespeed.web.dev oldalt.
Írd be az oldal címét, és kattints az Analyze gombra.
Várd meg a jelentést. A PSI mobilra és asztali gépre is jelent, a kettő eredménye eltér.

A terepi adathoz az oldalnak nyilvánosnak kell lennie (keresők számára elérhetőnek és indexelhetőnek).

Terepi adat és laboradat

A jelentés két részből áll, és fontos különválasztani őket.

	Terepi adat (field data)	Laboradat (lab data)
Honnan jön	A Chrome User Experience Report (CrUX): valódi Chrome-látogatók mérései az elmúlt 28 napból.	A Lighthouse egy szimulált, ellenőrzött környezetben tölti be az oldalt.
Mit mutat	FCP, INP, LCP, CLS és kísérleti jelleggel a TTFB.	Teljesítmény (Performance), Accessibility, Best Practices, SEO pontszám.
Mire jó	Ez mutatja, mit él át a látogatód.	Javítás utáni gyors ellenőrzésre és hibakeresésre, mert azonnal újra futtatható.

A laborban a mobil mérés egy középkategóriás telefont (Moto G4) szimulál mobilhálózaton, az asztali egy vezetékes kapcsolatú gépet. Ezért a lab és a terep eredménye gyakran eltér: a látogatóid eszközei, hálózata és a gyorsítótár állapota mások.

A terepi adatnál két szint van. Ha az oldalnak elég mérése van, a PSI az adott URL adatát mutatja. Ha nincs elég, az egész webhely (origin) összesített adatát mutatja. Ha az sincs, akkor terepi adat nem jelenik meg, ez új vagy kis forgalmú oldalnál gyakori. Ilyenkor csak a laboradatra támaszkodhatsz.

A terepi értékeket a 75. percentilisen adja meg: a látogatások háromnegyedénél legalább ennyire jó volt az élmény.

A Core Web Vitals értelmezése

A Core Web Vitals három mutató. A web.dev szerint akkor jó az oldal, ha a látogatások 75%-ánál mindhárom eléri a célt, mobilon és asztali gépen külön nézve.

Mutató	Mit mér	Jó érték
LCP (Largest Contentful Paint)	Mikor jelenik meg a legnagyobb látható elem, jellemzően a hero-kép vagy a főcím.	2,5 másodperc vagy kevesebb
INP (Interaction to Next Paint)	Mennyi idő telik el egy kattintás, érintés vagy billentés és a látható válasz között.	200 ms vagy kevesebb
CLS (Cumulative Layout Shift)	Mennyire ugrálnak az elemek betöltés közben.	0,1 vagy kevesebb

A PSI összegzi is ezt. Ha mindhárom mutatóra van elég adat, az oldal akkor felel meg, ha mindhárom 75. percentilise jó. Ha az INP-hez nincs elég adat, az LCP és a CLS dönt. Ha az LCP-hez vagy a CLS-hez nincs elég adat, az értékelés nem készül el.

A Lighthouse pontszáma 90-100 között jó (zöld), 50-89 között javítandó (narancs), 50 alatt gyenge (piros). A pontszám a labormérésből jön, és nem azonos a Core Web Vitals értékeléssel. Az INP-t laborban nem mérik ugyanúgy, mint a terepen, ezért a lab pontszámát ne tekintsd a valódi élmény mérőszámának.

Lighthouse a Chrome DevTools-ban

Ha helyi vagy bejelentkezés mögötti oldalt akarsz mérni, vagy csak gyorsan újrafuttatnál, a Lighthouse a böngészőben is elérhető.

Nyisd meg Chrome-ban az oldalt.
Nyisd meg a DevTools-t (például F12-vel).
Válaszd a Lighthouse fület.
Hagyd bekapcsolva a kategóriákat, és kattints az Analyze page load gombra.
A jelentés általában fél-egy perc alatt elkészül.

Parancssorból:

npm install -g lighthouse
lighthouse https://pelda.hu

A kimenetet JSON-ba is mentheted: lighthouse https://pelda.hu --output json --output-path ./jelentes.json. A további kapcsolókat a lighthouse --help írja ki. Node-modulként CI-rendszerbe is bekötheted.

A Google a Chrome-bővítményes változatot nem ajánlja, mert az nem tud helyi vagy bejelentkezést kérő oldalt tesztelni.

Tipikus javaslatok WordPress-oldalnál

A jelentés javaslatokat is ad. A leggyakoribbak és a jelentésük:

Javaslat	Mit jelent	Mit tegyél
Képek méretezése, modern formátum	A kép nagyobb vagy nehezebb, mint amit a böngésző megjelenít.	Használj WebP-t, a megjelenített méretnek megfelelő képet, a hajtás alatti képekre lusta betöltést.
Képek méretének megadása	A böngésző nem tudja előre, mekkora helyet foglaljon, ezért ugrál az oldal (CLS).	Add meg a `width` és `height` értéket a képeken.
LCP-kép ne legyen lusta betöltésű	A legnagyobb kép késve kezd töltődni.	A hero-képet ne töltsd lustán, hogy minél előbb elinduljon.
Render-blokkoló erőforrások	Egy CSS vagy JS fájl megállítja az oldal megjelenítését, amíg le nem töltődik.	Tedd a kritikus CSS-t az oldalba, halaszd (defer) a nem kritikus scripteket.
Nem használt JavaScript és CSS	A bővítmények olyan kódot is betöltenek, amit az adott oldal nem használ.	Kapcsold ki a nem használt bővítményeket, vagy tiltsd le a scriptjüket ott, ahol nem kell.
Szerverválasz ideje (TTFB)	A szerver sokáig készíti az oldalt.	Kapcsolj be oldalgyorsítót (page cache), és kérdezd a tárhelyszolgáltatót.
Gyorsítótár-szabályok	A statikus fájlok nem maradnak meg a látogató böngészőjében.	Állíts be böngésző-gyorsítótárat és tömörítést.

A render-blokkoló fájlok halasztására, a nem használt kód letiltására és a gyorsítótárra WordPressben bővítmény való. A HelloWP-n erre a WP Rocket és a Perfmatters használható. Az eredményt minden módosítás után mérd újra, mert a kód halasztása elronthat egy menüt vagy űrlapot.

Mire figyelj

A mérések kicsit ingadoznak. Futtasd többször, és ne egyetlen számot nézz.
A lab és a terep eltérhet. Ha a terepi adat jó, a rossz lab pontszám nem baj, és fordítva.
A terepi adat 28 napot fog át, ezért egy javítás hatása ott csak lassan jelenik meg. A javítás ellenőrzésére a labor való.
A mobil mérés lassabb eszközt és hálózatot szimulál, ezért az eredménye jellemzően gyengébb az asztalinál. Mobilra optimalizálj először.
Ugyanazon az URL-en, ugyanazzal a beállítással hasonlíts össze.

A PSI-hez hasonló, részletesebb (például hullámdiagramot adó) mérést a GTmetrix ad. A két eszköz pontszáma nem egyezik pontosan, de ugyanabba az irányba mutatnak.

Hasznos linkek

Készült: 2026. október 31.