Webes teljesítmény
Így optimalizálj LCP hero képet minőségromlás nélkül
A lassú hero részért gyakran az LCP-képet hibáztatják, pedig a fájlméret csak egy része a késésnek. A böngészőnek meg kell kapnia a dokumentumot, megtalálnia a megfelelő erőforrást, prioritást adnia, letöltenie, dekódolnia és stabil elrendezésben kirajzolnia.
Bontsd fel az LCP szállítási útját
Mérd az első byte idejét, az erőforrás indulási késését, letöltési idejét és renderelési késését. Így kiderül, hogy a javítás a szerverhez, HTML-felfedezéshez, prioritáshoz, képmérethez, CSS-hez vagy főszálhoz tartozik.
1. Azonosítsd a valódi LCP-elemet és késést
Ha elérhető, indulj valós attribúciós adatokból, majd reprodukáld az oldalt labortrace-ben. Erősítsd meg, mely elem lesz LCP az adott viewporton; mobilon és asztali gépen eltérő kép vagy akár szöveg is lehet. Vizsgáld a kérési vízesést és a felfedezés pillanatát.
- Futtass több összehasonlítható mérést, és rögzítsd a cache, eszköz, hálózat, hozzájárulás és viewport feltételeit.
- A megoldás kiválasztása előtt különítsd el a szerver-, felfedezési, letöltési és renderelési késést.
- A böngésző által ténylegesen választott reszponzív jelöltet ellenőrizd, ne feltételezd, hogy a src URL töltődött le.
2. Legyen az erőforrás korán felfedezhető és fontos
A képet lehetőleg normál src vagy srcset segítségével tedd a kezdeti HTML-be. Ne lazy-loadold a látható LCP-képet. A fetchpriority=high csak a valószínű jelöltnél legyen, preload pedig akkor, ha a kép egyébként CSS, JavaScript vagy késői kliensrenderelés mögött rejtőzne.
- Kerüld a data-src mintát és a szkriptből beszúrt hero markupot, amely elrejti a képet a preload scanner elől.
- Ne tölts elő minden reszponzív jelöltet vagy hero képet; a sürgős kérések egymással és a CSS-sel versenyeznek.
- Reszponzív preloadnál az imagesrcset, imagesizes, típus és cross-origin viselkedés egyezzen a végső elemmel.
3. A megfelelő pixelt és bájtot szállítsd
Srcset és sizes segítségével a kis képernyő ne töltsön le asztali méretet. Használj AVIF vagy WebP formátumot, amikor illeszkedik a vizuális igényhez és kiszolgáláshoz, de hasonlítsd össze a valódi eredményt. Intrinsic width és height tartsa stabilan az elrendezést.
- A komponens képarányára vágj, ne küldj hatalmas forrást, amelynek nagy részét a CSS elrejti.
- A tömörítést gyakori nagy pixelsűrűségű kijelzőn, vizuális ellenőrzéssel állítsd be, ne csak egy minőségszámból.
- Az ujjlenyomatos változatokat hosszan cache-eld, tartalomváltozáskor pedig módosítsd az ujjlenyomatot.
4. Távolítsd el a kirajzolást késleltető munkát
A letöltött kép még várhat blokkoló CSS-re, betűtípusra, animációra, rétegre vagy hosszú JavaScript-feladatra. A kritikus hero-stílus legyen kicsi és elérhető, a végső elemet ne rejtsd el hidratálásig, és ellenőrizd, hogy hozzájárulás vagy személyre szabás nem cseréli-e le később.
- Vizsgáld meg a képletöltés vége és az LCP időpontja közötti elkerülhető renderelési késést.
- Induláskor jelöltet váltó carousel helyett részesítsd előnyben a stabil, szerveroldalon renderelt hero részt.
- Élesítés után teszteld újra a vizuális minőséget, CLS-t, akadálymentességet, konverziót és valós LCP-t.
LCP-kép optimalizálási ellenőrzőlista
- 01 Azonosítsd a valódi mobil- és asztali LCP-elemet és a négy időzítési részt.
- 02 A valószínű LCP-kép szerepeljen a kezdeti HTML-ben, és ne legyen lazy loading rajta.
- 03 Fetchpriority vagy preload csak akkor legyen, ha a trace felfedezési vagy prioritási késést mutat.
- 04 Reszponzív méretet, megfelelő kódolást, intrinsic méretet és stabil képarányt szolgálj ki.
- 05 Csökkentsd a szerver-, CSS-, font-, hidratálási és főszálas késést, amely eltolja a kirajzolást.
- 06 Hasonlíts össze több laborfutást, fizikai eszközt és később valós adatot a vizuális és konverziós minőség megőrzésével.
A kritikus útvonalat optimalizáld, ne csupán a fájlt
A jó változás segít korán felfedezni a helyes hero képet, arányos prioritást ad, csak a szükséges pixelt tölti le, és felesleges várakozás nélkül rajzol. A trace alapján keresd a legnagyobb elkerülhető részt, majd egyetlen Lighthouse-futáson túl is bizonyítsd az eredményt.
Elsődleges források
Folytasd egy kapcsolódó útmutatóval
Ezek az ellenőrzések hatnak egymásra. A következő útmutatóval a környező jeleket is vizsgáld meg, ne csak egy címkét vagy pontszámot.