LCP (Largest Contentful Paint) és a Slider Revolution

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.

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 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 fejezet is szól.