Ha valaha lefuttattad az oldaladat a Google PageSpeed Insights eszközén, biztosan találkoztál három rövidítéssel: LCP, INP és CLS. Ezek a Core Web Vitals mutatók, amelyekkel a Google azt méri, milyen élmény a valódi látogatóknak használni az oldaladat. Nem csak technikai érdekességek: a keresési rangsorolásban is szerepet játszanak, és szorosan összefüggnek azzal, hányan hagyják el az oldalt még a betöltés előtt.
LCP – mikor jelenik meg a lényeg?
A Largest Contentful Paint azt méri, mennyi idő alatt jelenik meg az oldal legnagyobb látható eleme – általában a nyitókép vagy a főcím. A Google szerint 2,5 másodperc alatt jó az érték.
Tipikus okok, ha lassú:
- túl nagy, optimalizálatlan nyitókép (több megabájtos JPG WebP helyett),
- lassú szerver vagy hiányzó gyorsítótárazás,
- a megjelenést blokkoló CSS- és JavaScript-fájlok,
- csúszkák (sliderek), amelyek több képet töltenek be egyszerre.
INP – mennyire reagál az oldal?
Az Interaction to Next Paint 2024 óta váltotta a korábbi FID mutatót. Azt nézi, mennyi idő telik el egy kattintás vagy érintés és a látható reakció között. 200 ezredmásodperc alatt jó.
A rossz INP mögött szinte mindig túl sok JavaScript áll: nehéz page builderek, egymást kerülgető bővítmények, harmadik féltől származó csevegőablakok és követőkódok.
CLS – ugrál-e a tartalom betöltés közben?
A Cumulative Layout Shift azt méri, mennyire mozdulnak el az elemek az oldal betöltése közben. Ismerős, amikor rá akarsz bökni egy gombra, de az utolsó pillanatban lejjebb csúszik, mert betöltődött fölötte egy kép vagy hirdetés? Ezt bünteti a CLS. 0,1 alatt jó.
Gyors javítás: minden képnek és beágyazott elemnek legyen megadott szélessége és magassága, így a böngésző előre lefoglalja a helyét.
Mit tehetsz, ha pirosak a mutatók?
- Optimalizáld a képeket (WebP/AVIF formátum, megfelelő méret, lusta betöltés).
- Használj oldal-gyorsítótárazást és CDN-t.
- Csökkentsd a bővítmények és külső szkriptek számát.
- Cseréld le a nehéz page buildert egy könnyű, egyedi sablonra.
- Töltsd a betűtípusokat saját tárhelyről, előtöltéssel.
Labor- és terepadatok különbsége
A PageSpeed Insights két adatot mutat: a laboradatot (egy szimulált mérés) és a terepadatot (valódi Chrome-felhasználók élménye az elmúlt 28 napból). A rangsorolásban a terepadat számít, ezért egy javítás hatása néhány hét alatt látszik meg igazán.
Ha az oldalad tartósan pirosan teljesít, érdemes egy alapos átvilágítást kérni: a sebesség- és kódoptimalizálás során a forráskódtól a szerverig minden réteget átnézünk.
