# LCP (Largest Contentful Paint) és a Slider Revolution

> Mit mér az LCP, mikor érdemes foglalkozni vele, és hogyan javíthatod a modulok képeivel, videóival és a PageSpeed-kapcsolóval.

## Mi az az LCP?

Az LCP a webhely teljesítményének egyik mérőszáma, amelyet a legtöbb Chromium-alapú böngésző fejlesztői eszközeinek **Lighthouse** füle vagy a Google PageSpeed Insights mér. Azt méri, mennyi idő alatt jelenik meg a nézetablakban látható legnagyobb tartalmi elem, a lap megnyitásától számítva. Legnagyobb elem lehet:

- kép,
- videó,
- háttérkép (nem CSS-háttér),
- szöveget tartalmazó blokkelem (például bekezdés vagy div).

A Google három kategóriába sorolja az eredményt: 2,5 másodpercig „jó” (zöld), 2,5 és 4 másodperc között „fejlesztésre szorul” (narancs), 4 másodperc fölött „gyenge” (piros).

A modulokat gyakran az oldal tetejére teszik, ezért gyakran ők a legnagyobb, elsőként látható tartalom, így az optimalizáltságukat részben az LCP mutatja.

## Az LCP és a betöltési sebesség

Az alacsony LCP jelezhet túl nagy képet, videót vagy szöveget a nézetablakban, és ilyenkor a betöltés is lassabb lehet. Máskor viszont az alacsony LCP csak egy ártalmatlan animáció miatt van, és a megjelenést nem lassítja: ez a téves jelzés (false positive).

A fő cél mindig a betöltési idő: legyen 3 másodperc alatt. Ritkán érhető el 1 másodperc alatti idő, mert ahhoz nagyon kevés tartalom kell; az 1 és 3 másodperc közötti idő kiváló. Példa: tartalmas, animált modulokkal teli oldalak is betölthetnek 1,3-1,5 másodperc alatt, miközben a Google LCP-t magyarázó oldala is 1,3 másodperc alatt tölt be, mégsem éri el a zöld LCP-t. Az LCP tehát hasznos útmutató, de nem feltétlenül első számú cél.

A pontszámok tesztenként akár 30 ponttal is ingadozhatnak. Ezért a tesztet futtasd többször (ideális esetben 3-5 alkalommal vagy többször), és ha tudsz, több eszközzel is.

## Mikor érdemes foglalkozni az LCP-vel?

- Akkor javítsd, ha segít olyan módszereket találni, amelyekkel az oldalad még gyorsabb lehet.
- Ha az oldal már maximálisan optimalizált, az LCP alacsony prioritású is lehet.

A teszt után a pontszám mellett mindig nézd meg a fejlesztői eszközök **Network** fülén a betöltési időt is. Gyakori, hogy a Lighthouse-pontszám nem tökéletes, miközben a betöltés kiváló. Például a YouTube „Trending” oldala piros LCP-t kap (a javasolt érték több mint hatszorosa), de 1,5 másodperc alatt betölt. Ha a betöltés 3 másodperc alatt van, az elsődleges célt elérted, az LCP tökéletesítése másodlagos.

Ha az LCP narancs vagy piros, nézd meg, miért. Lehet, hogy még gyorsíthatsz (például képoptimalizálással). Az is lehet, hogy a tökéletes LCP-hez olyan animációkat kellene egyszerűsíteni, amelyek valójában nem rontják a teljesítményt. A gazdag animációk a látogatók megszólításában segítenek, így dönthetsz úgy, hogy az animációkat megtartod.

## Az LCP javítása

### Alapmérés

Először állapítsd meg az oldalad alap betöltési idejét a jelenlegi szerverbeállításokkal.

1. Hozz létre egy új WordPress-oldalt, amelyben csak kb. 5 bekezdésnyi helyettesítő szöveg van.
2. Állítsd az oldalt a Slider Revolution üres oldal sablonjára, hogy a téma okozta teljesítményproblémák ne zavarjanak.
3. Tedd közzé az oldalt, nézd meg a böngészőben, futtass rajta teljesítménytesztet, és jegyezd fel a betöltési időt.
4. Opcionálisan kapcsold ki az üres sablont, és mérj újra. Ha az eredmény rosszabb, a témán is lehet optimalizálni. Mérés után kapcsold vissza az üres sablont.
5. Tedd az optimalizálandó modult az oldal tetejére, frissítsd az oldalt, és mérj újra.

Ha a modullal és anélkül mért eredmény között jelentős a különbség, a modulban van optimalizálási lehetőség. Ha nincs, a probléma oka valószínűleg máshol van (az oldal vagy a szerver beállításaiban).

### Képek optimalizálása

Az LCP-javítás leggyakoribb módja, hogy a modul minden képe teljesen optimalizált legyen. Példa: ugyanannak a modulnak a két változata között a fő kép egyiknél 462 KB-os WebP, a másiknál 26,3 KB-os JPG volt. Az elsőnél a kép betöltése 538 ms (a teljes betöltés 1,86 s), a másodiknál 269 ms (a teljes betöltés 1,46 s). Vizuálisan azonosak, a pontszámok mégis jelentősen eltértek.

Az SR7 a képek átméretezését, tömörítését és formátumának átalakítását automatikusan végzi, neked csak azt kell eldöntened, milyen képarányt használsz. Részletek: [Képoptimalizálás](https://hub.hellowp.io/hu/plugins/revslider/szerkeszto-panelek-kepoptimalizalas/).

### Videók kicsinyítése és tömörítése

A videók is kicsinyíthetők és tömöríthetők. Csökkentsd a méretüket, amennyire a minőség engedi (például 4K-ról 1080p-re vagy 720p-re), és próbálj különböző formátumokat (WebM, MP4), hogy lásd, melyik adja a legkisebb fájlt.

### Felesleges rétegek törlése

Sablonból kiindulva könnyen bennmaradnak fölösleges rétegek. Közzététel előtt nézd át a modulszerkesztő **Rétegek** oldalsávját, és töröld a már nem használtakat. A sávról a [Rétegek oldalsáv](https://hub.hellowp.io/hu/plugins/revslider/szerkeszto-bejaras-retegek-oldalsav/) fejezetben olvashatsz.

### Animációk rövidítése (ha nagyon fontos)

Ha a képek és videók optimalizáltak, nézd meg, mi történik az LCP-vel, ha lerövidíted az első betöltéskor lejátszódó BE (IN) animációk időtartamát. Előfordul, hogy a BE animáció téves jelzést okoz: az LCP a renderelés késleltetésének látja az animációt. Ha az imperfekt LCP egyetlen oka ez, az oldal teljesítményét nem rontja, és te döntöd el, megtartod-e az animációt.

### Mérés a PageSpeed-kapcsolóval

Ha az LCP-t csak a belépő animáció tartja vissza, a modul úgy is megjeleníthető, ahogy a teszt várja.

1. A vezérlőpulton kattints a **Beállítások** gombra.
2. Nyisd meg az **Optimalizálás** fület.
3. Kapcsold be a **Mérés a Google PageSpeeddel** kapcsolót.

Bekapcsolt állapotban a lap első modulja a nyitóképét közvetlenül az oldal kódjából rajzolja ki, így a sebességteszt azt olvassa a legnagyobb tartalomnak, nem várja meg az animációs motort. A képet a bővítmény magától megtalálja: ez a dia háttere, a diát beborító képréteg vagy a háttérvideó posztere. Futtasd le a teszteket, majd kapcsold ki a kapcsolót: kikapcsolt állapotban a belépő animáció visszatér. A kapcsolóról a [Globális beállítások](https://hub.hellowp.io/hu/plugins/revslider/globalis-beallitasok/) fejezet is szól.