A képek általában a legnehezebb bájtok egy oldalon, így az optimalizálásuk a legnagyobb LCP-nyereség. Három kar: modern formátumok, reszponzív méretezés és betöltési prioritás.
Az AVIF és a WebP azonos minőség mellett sokkal kisebbre tömörít, mint a JPEG/PNG (az AVIF gyakran 50%-kal kisebb a JPEG-nél). Szolgáld ki őket tartalék (fallback) megoldással, hogy a régi böngészők is működjenek:
Ne küldj 2000px-es képet egy 400px-es telefonra. A srcset lehetővé teszi, hogy a böngésző kiválassza az eszközhöz megfelelő méretet:
<img
srcset="/p-400.jpg 400w, /p-800.jpg 800w, /p-1600.jpg 1600w"
sizes="(max-width: 600px) 100vw, 800px"
src="/p-800.jpg" width="800" height="600" alt="...">
A sizes megmondja a böngészőnek, milyen szélesen renderelődik a kép, hogy a legkisebb elegendő forrást választhassa.
fetchpriority="high", loading="eager", és fontold meg a preload-ot.loading="lazy", hogy csak szükség esetén töltődjön le.Mindig tartsd meg a width/height értékeket a CLS megelőzésére.
A lassú LCP leggyakrabban csak egy túl nagy hero kép. A formátumok (AVIF/WebP), a megfelelő felbontáshoz való srcset és a helyes prioritás ismerete — plusz az, hogy nem lazy-loadolod az LCP-képet — az a gyakorlati eszköztár, amit az interjúztatók elvárnak, és általában ez az egyetlen legnagyobb hatású változtatás egy valós oldalon.
IT interjúkérdések gyűjteménye részletes válaszokkal — Juniortól Seniorig.
Adományozás