LCP javítás: hogyan gyorsítsd fel az oldalad legnagyobb elemét?

Ha a PageSpeed pirosra színezte az LCP mutatódat, az első kérdés nem az, hogy mit csináljak, hanem az, hogy mi egyáltalán az LCP elem az oldaladon. Mert az LCP nem mindig kép: lehet szöveg, lehet egy nagy banner, sőt lehet egy videó első képkockája is. A javítás attól függ, mivel van dolgod.

Hogyan derítsd ki, mi az LCP elem?

A legegyszerűbb módszer a Google PageSpeed Insights. Az eredményoldalon, a Diagnosztika szekció alatt megmutatja, hogy melyik elem volt az LCP, és mennyi időbe telt megjelennie. Ha Chrome böngészőt használsz, a fejlesztői eszközökben (F12) a Performance fülön is megtalálod: indíts egy rögzítést, töltsd be az oldalt, majd keresd az „LCP" jelölést az idővonalán.

Ha az LCP elem egy kép, a leggyakoribb okok és megoldások a következők.

Ha a probléma a kép formátuma vagy mérete

Rossz formátum. A legtöbb weboldal még mindig PNG vagy JPEG képeket használ. Ezeket ma már felváltotta a WebP és az AVIF formátum, amelyek ugyanolyan minőséget adnak, de töredék méretben. Egy egyszerű háttérkép konvertálásával például 81 KB-ból 46 KB lett, 43%-os megtakarítás egyetlen fájlon. A képeket ingyenesen átkonvertálhatod a Google Squoosh eszközével, közvetlenül a böngészőből.

Túl nagy méret. Ha egy 3000 pixel széles fotót töltesz fel, de az oldalon csak 800 pixelen jelenik meg, a böngésző ugyanúgy letölti az egészet. A látogató sávszélességét a felesleges pixelek emésztik fel. Töltsd fel akkora képet, amekkora a megjelenési slot, plusz egy-két száz pixel tartaléknak a nagyobb képernyőkre.

Minden eszközre más méret: a srcset. Ha van mobilos, tabletes és asztali látogatód is, mindháromnak ugyanazt a nagy képet küldeni pazarlás. A srcset attribútum megoldja ezt: megmondod a böngészőnek, hogy ugyanabból a képből több méret is elérhető, és ő automatikusan azt tölti le, amelyik a legjobban illik az aktuális eszközhöz.

<img
  src="kep-800.jpg"
  srcset="kep-400.jpg 400w, kep-800.jpg 800w, kep-1600.jpg 1600w"
  sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1600px"
  alt="Kép leírása"
>

A fenti példában a böngésző mobilon a 400 pixeles verziót tölti le, tableten a 800 pixelest, asztali gépen a 1600 pixelest. Ugyanaz a tartalom, töredék az adatforgalom mobilon.

Fontos, hogy mindehhez megfelelő szerver oldali háttér is kell. A különböző méretű és formátumú verziók előállításához a szerveren képfeldolgozó könyvtárnak kell futnia, például ImageMagick-nek vagy GD-nek. Ha ezek nincsenek telepítve vagy nem megfelelően konfigurálva, a plugin hiába próbálkozik: vagy nem készülnek el az optimalizált verziók, vagy csak az eredeti tömörítetlen formátumban menti el a képeket.

Ha a probléma a kép betöltési sorrendje

Az LCP képnek nem kellene lazily betöltődnie. A lazy load technika azt jelenti, hogy egy kép csak akkor töltődik be, amikor a látogató odagörget. Ez a legtöbb képre jó ötlet, de az LCP elemre egyáltalán nem: ha a főkép lazy-loadolt, a böngésző szándékosan késlelteti a betöltését, és az LCP idő szükségszerűen magas lesz. Az oldal fejlécében vagy a hajtás felett lévő képekre ne használj lazy load-ot, ellenkezőleg: adj nekik fetchpriority="high" attribútumot.

<img
  src="hero-kep.jpg"
  fetchpriority="high"
  alt="Főoldali kép"
>

A böngésző nem fedezi fel időben a képet. Ha az LCP kép CSS háttérképként van beállítva (background-image), a böngésző csak a stíluslap feldolgozása után tudja meg, hogy szüksége van rá. Ez komoly késedelmet okoz az LCP-ben. A megoldás: az LCP elemet lehetőség szerint valódi <img> taggel add meg, ne CSS háttérképként, vagy adj hozzá egy <link rel="preload"> sort a HTML fejlécébe, hogy a böngésző korán felfedezze.

<link rel="preload" as="image" href="hero-kep.jpg" fetchpriority="high">

Egyéb okok, amik lassíthatják az LCP-t

Az LCP nem csak képektől függhet. Ha a képek rendben vannak és az LCP még mindig magas, érdemes ezeket is megvizsgálni:

Lassú szerver (magas TTFB). Ha a szerver sokáig gondolkodik mielőtt az első adatot elküldi, minden más is késik: az LCP elem sem tud hamarabb betöltődni, mint ahogy az oldal HTML-je megérkezett. Arról, hogy mikor a tárhely a szűk keresztmetszet, a Miért lassú a weboldalad? cikk „Lassú szerver" szakaszában olvashatsz.

Render-blokkoló CSS vagy JavaScript. Ha az oldal fejlécében nagy CSS fájlok vagy JavaScript blokkolják a renderelést, a böngésző nem tudja megjeleníteni az LCP elemet sem, amíg ezeket fel nem dolgozta. A PageSpeed „Eliminate render-blocking resources" figyelmeztetése pontosan ezt jelzi.

Webfontok. Ha az LCP elem egy szöveg, és az oldal egyedi betűtípust használ, az LCP-t a font betöltése is késleltetheti. A font-display: swap beállítással a szöveg azonnal megjelenik egy tartalék betűtípussal, és csak a betöltés után cserélődik át az igazi fontra.

Az LCP csak az egyik oka annak, hogy egy oldal lassúnak érződik. A teljes képet, a mérés helyes módjával és a többi gyakori okkal együtt, itt találod: Miért lassú a weboldalad, és hogyan gyorsítsd fel?